فانوس دریایی را اجرا کنید
این اشکال به اندازهای کوچک است که میتوان تصاویر آن را با دست بررسی کرد. با این حال برای اکثر وب سایت ها، استفاده از ابزاری مانند Lighthouse برای خودکارسازی این امر ضروری است.
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
- به دنبال نتایج ممیزی تصاویر با اندازه مناسب باشید.
ممیزی Lighthouse نشان می دهد که هر دوی تصاویر این صفحه باید اندازه خود را تغییر دهند.
flower_logo.png
رفع کنید
از بالای صفحه شروع کنید و تصویر لوگو را اصلاح کنید.
-
flower_logo.png
در پنل DevTools Elements بررسی کنید.
این CSS برای flower_logo.png
است:
.logo {
width: 50px;
height: 50px;
}
عرض CSS این تصویر 50 پیکسل است، بنابراین flower_logo.png
باید اندازه آن مطابقت داشته باشد. می توانید از ImageMagick برای تغییر اندازه تصویر به تناسب استفاده کنید. ImageMagick یک ابزار CLI برای ویرایش تصویر است که از قبل در محیط Codelab نصب شده است.
- روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
- روی ترمینال کلیک کنید (توجه: اگر دکمه ترمینال نشان داده نشد، ممکن است لازم باشد از گزینه تمام صفحه استفاده کنید).
- در کنسول تایپ کنید:
convert flower_logo.png -resize 50x50 flower_logo.png
flower_photo.jpg را برطرف کنید
بعد عکس گل های بنفش را درست کنید.
-
flower_photo.jpg
را در پانل عناصر DevTools بررسی کنید.
این CSS برای flower_photo.jpg
است:
.photo {
width: 50vw;
margin: 30px auto;
border: 1px solid black;
}
50vw
عرض CSS flower_photo.jpg
را به نصف عرض مرورگر تنظیم می کند. ( 1vw برابر با 1% عرض مرورگر است).
اندازه ایدهآل برای این تصویر به دستگاهی که در آن مشاهده میشود بستگی دارد، بنابراین باید اندازه آن را به اندازهای تغییر دهید که برای اکثر کاربران شما خوب باشد. میتوانید دادههای تحلیلی خود را بررسی کنید تا بدانید کدام وضوح صفحه در بین کاربران شما رایج است:
این داده ها نشان می دهد که بیش از 95٪ از بازدیدکنندگان این سایت از وضوح صفحه نمایش با عرض 1920 پیکسل یا کمتر استفاده می کنند.
با استفاده از این اطلاعات میتوانیم میزان عرض تصویر را محاسبه کنیم: (1920 پیکسل عرض) * (50٪ عرض مرورگر) = 960 پیکسل
در وضوحهای بیشتر از 1920 پیکسل، تصویر کشیده میشود تا منطقه را بپوشاند. اندازه تصویر هنوز نسبتاً بزرگ است، بنابراین تأثیرات آن نباید خیلی قابل توجه باشد.
- از ImageMagick برای تغییر اندازه تصویر به 960 پیکسل استفاده کنید. در نوع ترمینال:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg
# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg
فانوس دریایی را دوباره اجرا کنید
- بازرسی عملکرد Lighthouse را مجدداً اجرا کنید تا تأیید کنید که با موفقیت اندازه تصاویر را تغییر داده اید.
... و شکست می خورد! چرا اینطور است؟
Lighthouse آزمایشات خود را روی Nexus 5x انجام می دهد. Nexus 5x دارای صفحه نمایش 1080 x 1920 است. برای Nexus 5x، اندازه بهینه flower_photo.jpg
540 پیکسل عرض (1080 پیکسل * . 5) خواهد بود. این بسیار کوچکتر از اندازه تصویر ما است.
آیا باید اندازه تصویر را تغییر دهید تا حتی کوچکتر شود؟ احتمالا. با این حال، پاسخ به این همیشه واضح نیست.
تفاوت در اینجا بین کیفیت تصویر در دستگاه های با وضوح بالا و عملکرد است. به راحتی می توان بیش از حد ارزیابی کرد که کاربران چقدر تصاویر را از نزدیک بررسی می کنند - بنابراین احتمالاً باید آنها را کوچکتر کنید - اما مطمئناً موارد استفاده ای وجود دارد که کیفیت تصویر مهم تر است.
خبر خوب این است که میتوانید با استفاده از تصاویر واکنشگرا برای ارائه اندازههای مختلف تصاویر، این مبادله را به کلی دور بزنید. میتوانید در راهنمای تصاویر واکنشگرا درباره این موضوع بیشتر بیاموزید.