همه ما این شرایط را تجربه کردهایم: فراموش کردهاید قبل از اضافه کردن یک تصویر به صفحه، آن را کوچک کنید. تصویر خوب به نظر میرسد، اما باعث هدر رفتن دادههای کاربران و آسیب به عملکرد صفحه میشود.
شناسایی تصاویر با اندازه نادرست
لایتهاوس شناسایی تصاویر با اندازه نادرست را آسان میکند. حسابرسی عملکرد ( 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 و sizes ، به شما این امکان را میدهند که چندین نسخه از تصویر را مشخص کنید و دستگاه، اندازهای را که برای آن مناسبتر است انتخاب کند.
تغییر اندازه تصاویر
صرف نظر از رویکردی که انتخاب میکنید، ممکن است استفاده از ImageMagick برای تغییر اندازه تصاویرتان مفید باشد. ImageMagick محبوبترین ابزار خط فرمان برای ایجاد و ویرایش تصاویر است. اکثر افراد میتوانند هنگام استفاده از CLI نسبت به یک ویرایشگر تصویر مبتنی بر GUI، تصاویر را بسیار سریعتر تغییر اندازه دهند.
تغییر اندازه تصویر به ۲۵٪ اندازه اصلی:
convert flower.jpg -resize 25% flower_small.jpg
مقیاس تصویر را طوری تغییر دهید که در محدوده «عرض ۲۰۰ پیکسل و ارتفاع ۱۰۰ پیکسل» قرار گیرد:
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
اگر قرار است تصاویر زیادی را تغییر اندازه دهید، ممکن است استفاده از یک اسکریپت یا سرویس برای خودکارسازی این فرآیند برایتان راحتتر باشد. میتوانید در راهنمای تصاویر واکنشگرا اطلاعات بیشتری در این مورد کسب کنید.
با مشخص کردن ابعاد، از تغییرات طرحبندی جلوگیری کنید
اگرچه این راهنما ابعاد تصویر را در زمینه کاهش میزان بایتهای غیرضروری دانلود شده مورد بحث قرار میدهد، اما توجه به این نکته ضروری است که رزرو فضای صحیح برای تصاویر در طرحبندی، یکی دیگر از مؤلفههای حیاتی برای به حداقل رساندن معیار تغییر طرحبندی تجمعی صفحه است. هنگام ارائه تصاویر در 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 استفاده کنید تا مطمئن شوید که تصویر در این نمای صریح ۱۶/۹ تحریف نمیشود:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
تأیید
وقتی اندازه تمام تصاویر خود را تغییر دادید، Lighthouse را دوباره اجرا کنید تا مطمئن شوید چیزی را از قلم نینداختهاید.