از srcset برای انتخاب خودکار اندازه تصویر مناسب استفاده کنید.
طبق بایگانی HTTP ، یک صفحه وب موبایل معمولی بیش از 2.6 مگابایت وزن دارد و بیش از دو سوم این وزن را تصاویر تشکیل می دهند. این یک فرصت عالی برای بهینه سازی است!
خلاصه
- تصاویر بزرگتر از اندازه نمایش آنها را ذخیره نکنید.
- چندین اندازه را برای هر تصویر ذخیره کنید و از ویژگی
srcsetبرای فعال کردن مرورگر برای انتخاب کوچکترین استفاده کنید. مقدارwعرض هر نسخه را به مرورگر می گوید:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
تصاویر را با اندازه مناسب ذخیره کنید
می توانید با استفاده از تصاویری با ابعادی که با اندازه نمایشگر مطابقت دارند، وب سایت خود را سریعتر و داده های کمتری مصرف کنید. به عبارت دیگر، هنگام ذخیره تصاویر، عرض و ارتفاع مناسب را به آنها بدهید.
به تصاویر زیر دقت کنید.
آنها تقریباً یکسان به نظر می رسند، اما اندازه فایل یکی بیش از 10 برابر بزرگتر از دیگری است.
تصویر اول از نظر اندازه فایل بسیار بزرگتر است زیرا با ابعاد بسیار بزرگتر از اندازه نمایش ذخیره شده است. هر دو تصویر با عرض ثابت 300 پیکسل نمایش داده می شوند، بنابراین منطقی است که از یک تصویر ذخیره شده در اندازه یکسان استفاده کنید.
برای عرض های ثابت، از تصاویر ذخیره شده با همان ابعاد اندازه نمایش استفاده کنید.
اما... اگر اندازه نمایشگر متفاوت باشد چه؟
در دنیای چند دستگاهی، تصاویر همیشه با یک اندازه ثابت نمایش داده نمی شوند.
عناصر تصویر ممکن است یک درصد عرض داشته باشند یا بخشی از طرح‌بندی‌های واکنش‌گرا باشند که اندازه‌های نمایش تصویر متناسب با اندازه صفحه تغییر می‌کند.
... و دستگاه های تشنه پیکسل مانند نمایشگرهای رتینا چطور؟
به مرورگر کمک کنید تا اندازه تصویر مناسب را انتخاب کند
آیا عالی نیست اگر بتوانید هر تصویر را در اندازه های مختلف در دسترس قرار دهید، سپس به مرورگر اجازه دهید بهترین اندازه را برای دستگاه و اندازه نمایش انتخاب کند؟ متأسفانه وقتی نوبت به کار کردن بهترین تصویر می رسد، یک catch-22 وجود دارد. مرورگر باید از کوچکترین تصویر ممکن استفاده کند، اما نمی‌تواند عرض یک تصویر را بدون دانلود آن برای بررسی بداند.
اینجاست که srcset به کار می آید. شما تصاویر را در اندازه های مختلف ذخیره می کنید، سپس عرض هر نسخه را به مرورگر بگویید:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
مقادیر w عرض هر تصویر را بر حسب پیکسل نشان می دهد. برای مثال، small.jpg 500w به مرورگر می گوید که small.jpg 500 پیکسل عرض دارد. این کار مرورگر را قادر می‌سازد تا بسته به نوع صفحه و اندازه درگاه دید، کوچکترین تصویر ممکن را انتخاب کند—بدون نیاز به دانلود تصاویر برای بررسی اندازه آنها.
می توانید srcset در عمل برای تصویر زیر مشاهده کنید. اگر از لپ تاپ یا رایانه رومیزی استفاده می کنید، اندازه پنجره مرورگر خود را تغییر دهید و این صفحه را دوباره باز کنید. سپس از پنل Network ابزارهای مرورگر خود استفاده کنید تا بررسی کنید از کدام تصویر استفاده شده است. (شما باید این کار را در یک پنجره ناشناس یا خصوصی انجام دهید، در غیر این صورت فایل تصویر اصلی در حافظه پنهان ذخیره می شود.)
چگونه می توانم چندین اندازه تصویر ایجاد کنم؟
شما باید برای هر تصویری که می خواهید با srcset استفاده کنید، چندین اندازه در دسترس قرار دهید.
برای تصاویر یکباره مانند تصاویر قهرمان می توانید به صورت دستی اندازه های مختلف را ذخیره کنید. اگر تصاویر زیادی مانند عکس محصول دارید، باید خودکار را انجام دهید. برای آن دو رویکرد وجود دارد.
پردازش تصویر را در فرآیند ساخت خود بگنجانید
به عنوان بخشی از فرآیند ساخت خود، می توانید مراحلی را برای ایجاد نسخه هایی با اندازه های مختلف از تصاویر خود اضافه کنید. برای اطلاعات بیشتر به "استفاده از Imagemin برای فشرده سازی تصاویر" مراجعه کنید.
از سرویس تصویر استفاده کنید
ایجاد و تحویل تصویر را می توان با استفاده از یک سرویس تجاری مانند Cloudinary یا یک معادل منبع باز مانند Thumbor که خودتان نصب و اجرا می کنید، خودکار شود.
شما تصاویر با وضوح بالا خود را آپلود می کنید و سرویس تصویر به طور خودکار قالب ها و اندازه های مختلف تصویر را بسته به پارامترهای URL ایجاد و ارائه می دهد. برای مثال، این نمونه تصویر را در Cloudinary باز کنید و مقدار w یا پسوند فایل را در نوار URL تغییر دهید.
خدمات تصویر همچنین دارای ویژگی های پیشرفته تری مانند توانایی خودکارسازی «برش هوشمند» برای اندازه های مختلف تصویر و تحویل خودکار تصاویر WebP به مرورگرهایی که فرمت را پشتیبانی می کنند، به جای JPEG - بدون تغییر پسوند فایل، دارند.
اگر تصویر در اندازه های مختلف درست به نظر نرسد چه؟
در این صورت، باید از عنصر <picture> برای "جهت هنری" استفاده کنید: ارائه یک تصویر یا برش تصویر متفاوت در اندازه های مختلف. برای کسب اطلاعات بیشتر، نگاهی به کد «Art direction» بیندازید.
در مورد تراکم پیکسل چطور؟
دستگاه‌های پیشرفته پیکسل‌های فیزیکی کوچک‌تر (تراکم‌تر) دارند. برای مثال، یک تلفن رده بالا ممکن است دو یا سه برابر بیشتر از یک دستگاه ارزان‌تر پیکسل در هر ردیف پیکسل داشته باشد.
این می تواند بر اندازه مورد نیاز برای ذخیره تصاویر تأثیر بگذارد. ما در اینجا به جزئیات ناخوشایند نمی‌پردازیم، اما می‌توانید از کد لبه «استفاده از توصیف‌گرهای چگالی» اطلاعات بیشتری کسب کنید.
در مورد اندازه نمایش تصویر چطور؟
برای اینکه srcset بهتر کار کند می توانید sizes استفاده کنید.
بدون آن، مرورگر هنگام انتخاب یک تصویر از یک srcset از عرض کامل درگاه نمایش استفاده می کند. ویژگی sizes به مرورگر عرض می‌کند که یک عنصر تصویر نمایش داده می‌شود، بنابراین مرورگر می‌تواند کوچکترین فایل تصویری ممکن را انتخاب کند - قبل از اینکه هر گونه محاسبات طرح‌بندی را انجام دهد.
در مثال زیر، sizes="50vw" به مرورگر می‌گوید که این تصویر در 50% عرض درگاه نمایش نمایش داده می‌شود.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
می‌توانید این را در عمل در simpl.info/sizes و کد لبه «تعیین عرض‌های چندگانه اسلات» ببینید.
پشتیبانی مرورگر چطور؟
srcset و sizes توسط بیش از 90 درصد مرورگرهای جهانی پشتیبانی می شوند.
اگر مرورگری srcset یا sizes پشتیبانی نکند، فقط از ویژگی src استفاده می‌کند.
این باعث می‌شود srcset و sizes پیشرفتهای پیشرفتهای داشته باشند!
بیشتر بدانید
برای بررسی عمیق‌تر بهینه‌سازی تصویر، به بخش «بهینه‌سازی تصاویر خود» web.dev نگاهی بیندازید. برای تجربه بیشتر، دوره رایگان "تصاویر پاسخگو" ارائه شده توسط Udacity را امتحان کنید.