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

Katie Hempenius

همه ما آنجا بوده ایم: فراموش کرده اید قبل از افزودن یک تصویر به صفحه، آن را کوچک کنید. تصویر خوب به نظر می رسد، اما داده های کاربران را هدر می دهد و به عملکرد صفحه آسیب می رساند.

تصاویر با اندازه نادرست را شناسایی کنید

Lighthouse تشخیص تصاویر با اندازه نادرست را آسان می کند. ممیزی عملکرد ( Lighthouse > Options > Performance ) را اجرا کنید و به دنبال نتایج ممیزی تصاویر اندازه مناسب بگردید. ممیزی تصاویری را که نیاز به تغییر اندازه دارند فهرست می کند.

اندازه صحیح تصویر را تعیین کنید

اندازه تصویر می تواند به طرز فریبنده ای پیچیده باشد. به همین دلیل، ما دو رویکرد ارائه کرده‌ایم: «خوب» و «بهتر». هر دو عملکرد را بهبود می بخشند، اما رویکرد "بهتر" ممکن است کمی بیشتر طول بکشد تا درک و پیاده سازی شود. با این حال، با بهبود عملکرد بزرگتر نیز به شما پاداش می دهد. بهترین انتخاب برای شما انتخابی است که در اجرای آن احساس راحتی کنید.

یک یادداشت سریع در مورد واحدهای CSS

دو نوع واحد CSS برای تعیین اندازه عناصر HTML از جمله تصاویر وجود دارد:

• واحدهای مطلق: عناصری که با استفاده از واحدهای مطلق طراحی شده اند، صرف نظر از دستگاه، همیشه در یک اندازه نمایش داده می شوند. نمونه هایی از واحدهای CSS معتبر و مطلق: px، cm، mm، in.
• واحدهای نسبی: عناصری که با استفاده از واحدهای نسبی سبک‌دهی شده‌اند، بسته به طول نسبی مشخص‌شده، در اندازه‌های متفاوتی نمایش داده می‌شوند. نمونه‌هایی از واحدهای CSS معتبر و نسبی: %, vw (1vw = 1% از عرض نمای پورت)، em (1.5 em = 1.5 برابر اندازه قلم).

رویکرد "خوب".

برای تصاویر با سایز بندی بر اساس…

• واحدهای نسبی : اندازه تصویر را به اندازه ای تغییر دهید که در همه دستگاه ها کار کند.

ممکن است برای شما مفید باشد که داده های تجزیه و تحلیل خود را بررسی کنید (مثلاً Google Analytics) ببینید که چه اندازه های نمایشی معمولاً توسط کاربران شما استفاده می شود. از طرف دیگر، screensiz.es اطلاعاتی در مورد نمایشگرهای بسیاری از دستگاه های رایج ارائه می دهد. - واحدهای مطلق : اندازه تصویر را برای مطابقت با اندازه ای که در آن نمایش داده می شود، تغییر دهید.

از پنل DevTools Elements می توان برای تعیین اندازه یک تصویر استفاده کرد.

رویکرد "بهتر".

برای تصاویر با اندازه مطلق و نسبی، از ویژگی‌های srcset و sizes استفاده کنید تا تصاویر مختلف را با تراکم‌های نمایش متفاوت نمایش دهید. راهنمای تصاویر واکنش گرا را بخوانید.

"تراکم نمایشگر" به این واقعیت اشاره دارد که نمایشگرهای مختلف دارای تراکم پیکسل های متفاوتی هستند. اگر همه چیز برابر باشد، نمایشگر با تراکم پیکسلی بالا واضح تر از نمایشگر با تراکم پیکسلی پایین به نظر می رسد.

در نتیجه، اگر می‌خواهید کاربران بدون توجه به تراکم پیکسلی دستگاه خود، واضح‌ترین تصاویر ممکن را تجربه کنند، چندین نسخه تصویر ضروری است.

تکنیک‌های تصویر واکنش‌گرا این امکان را به شما می‌دهد که به شما امکان می‌دهد چندین نسخه تصویر را فهرست کنید و دستگاه بهترین تصویر را انتخاب کند.

تصویری که در همه دستگاه‌ها کار می‌کند، برای دستگاه‌های کوچک‌تر بی‌جهت بزرگ خواهد بود. تکنیک‌های واکنش‌گرا، به‌ویژه srcset و اندازه‌ها ، به شما این امکان را می‌دهند که چندین نسخه تصویر را مشخص کنید و دستگاه اندازه‌ای را انتخاب کند که برای آن مناسب‌تر است.

تغییر اندازه تصاویر

صرف نظر از رویکردی که انتخاب می کنید، ممکن است استفاده از ImageMagick برای تغییر اندازه تصاویرتان مفید باشد. ImageMagick محبوب ترین ابزار خط فرمان برای ایجاد و ویرایش تصاویر است. اکثر افراد هنگام استفاده از CLI نسبت به ویرایشگر تصویر مبتنی بر رابط کاربری گرافیکی می توانند اندازه تصاویر را بسیار سریعتر تغییر دهند.

اندازه تصویر را به 25% اندازه اصلی تغییر دهید:

convert flower.jpg -resize 25% flower_small.jpg

مقیاس تصویر را متناسب با "عرض 200 پیکسل در طول 100 پیکسل" تنظیم کنید:

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

اگر اندازه بسیاری از تصاویر را تغییر می‌دهید، ممکن است استفاده از یک اسکریپت یا سرویس برای خودکار کردن فرآیند راحت‌تر باشد. می توانید در راهنمای Responsive Images درباره این موضوع بیشتر بدانید.

با مشخص کردن ابعاد، از جابجایی طرح‌بندی خودداری کنید

در حالی که این راهنما ابعاد تصویر را در زمینه کاهش میزان بایت های غیرضروری دانلود شده مورد بحث قرار می دهد، مهم است که توجه داشته باشید که رزرو فضای صحیح برای تصاویر در طرح بندی یکی دیگر از اجزای حیاتی برای به حداقل رساندن متریک تغییر چیدمان تجمعی صفحه است. هنگام ارائه تصاویر در HTML، مطمئن شوید که از ویژگی های width و height مناسب استفاده کنید تا مرورگر بداند چه مقدار فضا را در طرح بندی برای تصویر اختصاص می دهد:

<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">

بدون این ویژگی‌ها یا اندازه‌های معادل CSS، مرورگر نمی‌داند که تصویر تا بارگذاری چقدر فضای اشغال می‌کند. این باعث تغییر طرح‌بندی در سند می‌شود، که می‌تواند برای کاربران خسته‌کننده باشد، وقتی محتوا بعد از شروع مصرف آن جابه‌جا می‌شود. این می تواند منجر به از دست دادن جایگاه خود در هنگام مطالعه شود یا اینکه هدف مورد نظر خود را از دست بدهند و در نهایت روی چیز دیگری کلیک کنند که در طول بارگذاری صفحه قصد نداشتند.

یک جایگزین برای ارائه صریح عرض و ارتفاع، استفاده از ویژگی aspect-ratio CSS بر روی تصویر است. این تأثیر مشابهی بر اندازه یک عنصر دارد که ویژگی‌های width و height انجام می‌دهند به این معنا که ظرف نسبت ابعاد ثابتی را حفظ می‌کند. با این حال، تفاوت این است که این ممکن است منجر به استفاده از نسبت ابعادی متفاوتی نسبت به تصویر ارائه شده در آن شود، بنابراین احتمالاً می‌خواهید از تنظیمات object-fit استفاده کنید تا اطمینان حاصل کنید که تصویر در این نمای 16/9 صریح مخدوش نمی‌شود. :

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

تأیید کنید

هنگامی که اندازه همه تصاویر خود را تغییر دادید، Lighthouse را دوباره اجرا کنید تا مطمئن شوید چیزی را از دست نداده اید.