ارائه تصاویر با ابعاد صحیح

کیتی همپنیوس
Katie Hempenius
X

فانوس دریایی را اجرا کنید

این اشکال به اندازه‌ای کوچک است که می‌توان تصاویر آن را با دست بررسی کرد. با این حال برای اکثر وب سایت ها، استفاده از ابزاری مانند Lighthouse برای خودکارسازی این امر ضروری است.

  1. برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید تمام صفحه .
  2. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
  3. روی تب Lighthouse کلیک کنید.
  4. مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
  5. روی دکمه Generate report کلیک کنید.
  6. به دنبال نتایج ممیزی تصاویر با اندازه مناسب باشید.

ممیزی تصاویر با اندازه مناسب در Lighthouse ناموفق است.

ممیزی Lighthouse نشان می دهد که هر دوی تصاویر این صفحه باید اندازه خود را تغییر دهند.

flower_logo.png رفع کنید

از بالای صفحه شروع کنید و تصویر لوگو را اصلاح کنید.

  • flower_logo.png در پنل DevTools Elements بررسی کنید.

پانل عناصر DevTools

این CSS برای flower_logo.png است:

.logo {
  width: 50px;
  height: 50px;
}

عرض CSS این تصویر 50 پیکسل است، بنابراین flower_logo.png باید اندازه آن مطابقت داشته باشد. می توانید از ImageMagick برای تغییر اندازه تصویر به تناسب استفاده کنید. ImageMagick یک ابزار CLI برای ویرایش تصویر است که از قبل در محیط Codelab نصب شده است.

  1. روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
  2. روی ترمینال کلیک کنید (توجه: اگر دکمه ترمینال نشان داده نشد، ممکن است لازم باشد از گزینه تمام صفحه استفاده کنید).
  3. در کنسول تایپ کنید:
convert flower_logo.png -resize 50x50 flower_logo.png

flower_photo.jpg را برطرف کنید

بعد عکس گل های بنفش را درست کنید.

  • flower_photo.jpg در پانل عناصر DevTools بررسی کنید.

پانل عناصر 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) خواهد بود. این بسیار کوچکتر از اندازه تصویر ما است.

آیا باید اندازه تصویر را تغییر دهید تا حتی کوچکتر شود؟ شاید. با این حال، پاسخ به این همیشه واضح نیست.

تفاوت در اینجا بین کیفیت تصویر در دستگاه های با وضوح بالا و عملکرد است. به راحتی می توان بیش از حد ارزیابی کرد که کاربران چقدر تصاویر را از نزدیک بررسی می کنند - بنابراین احتمالاً باید آنها را کوچکتر کنید - اما مطمئناً موارد استفاده ای وجود دارد که کیفیت تصویر مهم تر است.

خبر خوب این است که می‌توانید با استفاده از تصاویر واکنش‌گرا برای ارائه اندازه‌های مختلف تصاویر، این مبادله را به کلی دور بزنید. می‌توانید در راهنمای تصاویر واکنش‌گرا درباره این موضوع بیشتر بیاموزید.