از srcset برای انتخاب خودکار اندازه تصویر مناسب استفاده کنید.
طبق گفته HTTP Archive ، یک صفحه وب موبایل معمولی بیش از ۲.۶ مگابایت حجم دارد و بیش از دو سوم این حجم را تصاویر تشکیل میدهند. این یک فرصت عالی برای بهینهسازی است!
خلاصه
- تصاویر را بزرگتر از اندازه نمایش آنها ذخیره نکنید.
- برای هر تصویر چندین اندازه ذخیره کنید و از ویژگی
srcsetبرای فعال کردن مرورگر برای انتخاب کوچکترین اندازه استفاده کنید. مقدارwبه مرورگر عرض هر نسخه را میگوید:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
ذخیره تصاویر با اندازه مناسب
شما میتوانید با استفاده از تصاویری با ابعادی که با اندازه صفحه نمایش مطابقت دارند، وبسایت خود را سریعتر و مصرف داده کمتری داشته باشید. به عبارت دیگر، هنگام ذخیره تصاویر، به آنها عرض و ارتفاع مناسب بدهید.
به تصاویر زیر نگاهی بیندازید.
آنها تقریباً یکسان به نظر میرسند، اما حجم فایل یکی بیش از 10 برابر بزرگتر از دیگری است.
تصویر اول از نظر اندازه فایل بسیار بزرگتر است زیرا با ابعادی بسیار بزرگتر از اندازه نمایشگر ذخیره شده است. هر دو تصویر با عرض ثابت ۳۰۰ پیکسل نمایش داده میشوند، بنابراین منطقی است که از تصویری که با اندازه یکسان ذخیره شده است استفاده کنیم.
برای عرضهای ثابت، از تصاویری استفاده کنید که با ابعاد مشابه با اندازه نمایشگر ذخیره شدهاند.
اما... اگر اندازه نمایشگر متفاوت باشد چه؟
در دنیای چند دستگاهی، تصاویر همیشه با یک اندازه ثابت نمایش داده نمیشوند.
عناصر تصویر ممکن است عرض درصدی داشته باشند، یا بخشی از طرحبندیهای واکنشگرا باشند که در آنها اندازه نمایش تصویر متناسب با اندازه صفحه نمایش تغییر میکند.
... و در مورد دستگاههایی که به پیکسل زیادی نیاز دارند مانند نمایشگرهای رتینا چطور؟
به مرورگر کمک کنید تا اندازه تصویر مناسب را انتخاب کند
آیا عالی نمیشد اگر میتوانستید هر تصویر را در اندازههای مختلف در دسترس قرار دهید، سپس به مرورگر اجازه دهید بهترین اندازه را برای دستگاه و اندازه صفحه نمایش انتخاب کند؟ متأسفانه وقتی صحبت از تعیین بهترین تصویر میشود، یک معما وجود دارد. مرورگر باید از کوچکترین تصویر ممکن استفاده کند، اما نمیتواند عرض یک تصویر را بدون دانلود آن برای بررسی، بداند.
اینجاست که srcset به کار میآید. شما تصاویر را در اندازههای مختلف ذخیره میکنید، سپس به مرورگر عرض هر نسخه را اعلام میکنید:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
مقادیر w عرض هر تصویر را بر حسب پیکسل نشان میدهند. برای مثال، small.jpg 500w به مرورگر میگوید که small.jpg 500 پیکسل عرض دارد. این به مرورگر امکان میدهد بسته به نوع صفحه نمایش و اندازه نمایشگر، کوچکترین تصویر ممکن را انتخاب کند - بدون اینکه مجبور باشد تصاویر را برای بررسی اندازه آنها دانلود کند.
میتوانید عملکرد srcset را برای تصویر زیر مشاهده کنید. اگر از لپتاپ یا رایانه رومیزی استفاده میکنید، اندازه پنجره مرورگر خود را تغییر دهید و این صفحه را دوباره باز کنید. سپس از پنل شبکه ابزارهای مرورگر خود برای بررسی اینکه از کدام تصویر استفاده شده است، استفاده کنید. (باید این کار را در یک پنجره ناشناس یا خصوصی انجام دهید، در غیر این صورت فایل تصویر اصلی ذخیره میشود.)
چطور میتوانم چندین اندازه تصویر ایجاد کنم؟
شما باید برای هر تصویری که میخواهید با srcset استفاده کنید، چندین اندازه را در دسترس قرار دهید.
برای تصاویر تکی مانند تصاویر اصلی، میتوانید به صورت دستی اندازههای مختلف را ذخیره کنید. اگر تصاویر زیادی دارید، مانند عکسهای محصول، باید این کار را خودکار کنید. برای این کار دو رویکرد وجود دارد.
پردازش تصویر را در فرآیند ساخت خود بگنجانید
به عنوان بخشی از فرآیند ساخت، میتوانید مراحلی را برای ایجاد نسخههای با اندازههای مختلف از تصاویر خود اضافه کنید. برای کسب اطلاعات بیشتر به «استفاده از Imagemin برای فشردهسازی تصاویر» مراجعه کنید.
از یک سرویس تصویر استفاده کنید
ایجاد و تحویل ایمیج میتواند با استفاده از یک سرویس تجاری مانند Cloudinary یا معادل متنباز آن مانند Thumbor که خودتان نصب و اجرا میکنید، خودکار شود.
شما تصاویر با وضوح بالای خود را آپلود میکنید و سرویس تصویر به طور خودکار فرمتها و اندازههای مختلف تصویر را بسته به پارامترهای URL ایجاد و ارائه میدهد. برای مثال، این تصویر نمونه را در Cloudinary باز کنید و سعی کنید مقدار w یا پسوند فایل را در نوار URL تغییر دهید.
سرویسهای تصویر همچنین ویژگیهای پیشرفتهتری مانند قابلیت خودکارسازی «برش هوشمند» برای اندازههای مختلف تصویر و ارائه خودکار تصاویر WebP به مرورگرهایی که از این فرمت پشتیبانی میکنند، به جای JPEG - بدون تغییر پسوند فایل - دارند.
اگر تصویر در اندازههای مختلف درست به نظر نرسد، چه میشود؟
در این صورت، باید از عنصر <picture> برای "art direction" استفاده کنید: ارائه یک تصویر یا برش تصویر متفاوت در اندازههای مختلف. برای کسب اطلاعات بیشتر، به codelab "art direction" نگاهی بیندازید.
در مورد تراکم پیکسل چطور؟
دستگاههای رده بالا پیکسلهای فیزیکی کوچکتر (متراکمتر) دارند. برای مثال، یک گوشی رده بالا ممکن است در هر ردیف پیکسل، دو یا سه برابر یک دستگاه ارزانتر پیکسل داشته باشد.
این میتواند بر اندازه مورد نیاز برای ذخیره تصاویرتان تأثیر بگذارد. ما در اینجا وارد جزئیات جزئی نمیشویم، اما میتوانید اطلاعات بیشتر را از آزمایشگاه کد «استفاده از توصیفگرهای چگالی» کسب کنید.
در مورد اندازه نمایش تصویر چطور؟
شما میتوانید sizes برای بهبود عملکرد srcset استفاده کنید.
بدون آن، مرورگر هنگام انتخاب تصویر از یک srcset از کل عرض viewport استفاده میکند. ویژگی sizes به مرورگر میگوید که یک عنصر تصویر چه عرضی نمایش داده خواهد شد، بنابراین مرورگر میتواند کوچکترین فایل تصویری ممکن را انتخاب کند - قبل از اینکه هرگونه محاسبه طرحبندی را انجام دهد.
در مثال زیر، sizes="50vw" به مرورگر میگوید که این تصویر در ۵۰٪ از عرض viewport نمایش داده خواهد شد.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
میتوانید این را در عمل در simpl.info/sizes و codelab «مشخص کردن عرض چندین اسلات» مشاهده کنید.
پشتیبانی مرورگر چطور؟
srcset و sizes توسط بیش از ۹۰٪ مرورگرهای جهان پشتیبانی میشوند.
اگر مرورگری srcset یا sizes پشتیبانی نکند، فقط از ویژگی src استفاده خواهد کرد.
این باعث میشود srcset و sizes پیشرفتهای تصاعدی فوقالعادهای داشته باشند!
بیشتر بدانید
برای آشنایی عمیقتر با بهینهسازی تصاویر، به بخش «بهینهسازی تصاویر» در web.dev نگاهی بیندازید. برای یک تجربهی هدایتشدهتر، میتوانید دورهی رایگان «تصاویر واکنشگرا» که توسط Udacity ارائه میشود را امتحان کنید.