تصاویر اغلب سنگینترین و رایجترین منبع در وب هستند. در نتیجه، بهینهسازی تصاویر میتواند عملکرد وبسایت شما را به میزان قابل توجهی بهبود بخشد. در بیشتر موارد، بهینهسازی تصاویر به معنای کاهش زمان شبکه با ارسال بایتهای کمتر است، اما میتوانید با ارائه تصاویری که اندازه مناسبی برای دستگاه کاربر دارند، میزان بایتهای ارسالی به کاربر را نیز بهینه کنید.
تصاویر را میتوان با استفاده از عناصر <img> یا <picture> یا ویژگی background-image در CSS به صفحه اضافه کرد.
اندازه تصویر
اولین بهینهسازی که میتوانید هنگام استفاده از منابع تصویری انجام دهید، نمایش تصویر در اندازه صحیح است - در این حالت، اصطلاح اندازه به ابعاد یک تصویر اشاره دارد. با در نظر گرفتن هیچ متغیر دیگری، تصویری که در یک ظرف ۵۰۰ پیکسل در ۵۰۰ پیکسل نمایش داده میشود، به طور بهینه در اندازه ۵۰۰ پیکسل در ۵۰۰ پیکسل خواهد بود. به عنوان مثال، استفاده از یک تصویر مربعی ۱۰۰۰ پیکسلی به این معنی است که تصویر دو برابر بزرگتر از حد مورد نیاز است.
با این حال، متغیرهای زیادی در انتخاب اندازه مناسب تصویر دخیل هستند و این امر انتخاب اندازه مناسب تصویر را در هر مورد کاملاً پیچیده میکند. در سال ۲۰۱۰، زمانی که آیفون ۴ منتشر شد، وضوح صفحه نمایش (۶۴۰x۹۶۰) دو برابر آیفون ۳ (۳۲۰x۴۸۰) بود. با این حال، اندازه فیزیکی صفحه نمایش آیفون ۴ تقریباً مشابه آیفون ۳ باقی ماند.
نمایش همه چیز با وضوح بالاتر، متن و تصاویر را به طور قابل توجهی کوچکتر میکرد - به طور دقیق نصف اندازه قبلی آنها. در عوض، ۱ پیکسل به ۲ پیکسل دستگاه تبدیل شد. به این نسبت پیکسل دستگاه (DPR) میگویند. آیفون ۴ (و بسیاری از مدلهای آیفون که پس از آن عرضه شدند) DPR برابر با ۲ داشتند.
با نگاهی دوباره به مثال قبلی، اگر دستگاه DPR برابر با ۲ داشته باشد و تصویر در یک ظرف ۵۰۰ پیکسل در ۵۰۰ پیکسل نمایش داده شود، اکنون یک تصویر مربعی ۱۰۰۰ پیکسلی (که به آن اندازه ذاتی گفته میشود) اندازه بهینه است. به طور مشابه، اگر دستگاه DPR برابر با ۳ داشته باشد، یک تصویر مربعی ۱۵۰۰ پیکسلی اندازه بهینه خواهد بود.
srcset
The <img> element supports the srcset attribute, which lets you specify a list of possible image sources the browser may use. Each image source specified must include the image URL, and a width or pixel density descriptor.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
قطعه کد HTML قبلی از توصیفگر تراکم پیکسلی استفاده میکند تا به مرورگر بفهماند که در دستگاههایی با DPR برابر با ۱ از image-500.png ، در دستگاههایی با DPR برابر با ۲ از image-1000.jpg و در دستگاههایی با DPR برابر با ۳ از image-1500.jpg استفاده کند.
اگرچه همه اینها ممکن است ساده و بیعیب و نقص به نظر برسد، اما DPR صفحه نمایش تنها عامل مورد توجه در انتخاب تصویر بهینه برای یک صفحه خاص نیست. طرحبندی صفحه نیز یکی دیگر از موارد مورد توجه است.
sizes
راه حل قبلی فقط در صورتی کار میکند که تصویر را با اندازه پیکسل CSS یکسان در تمام نماها نمایش دهید. در بسیاری از موارد، طرحبندی یک صفحه - و اندازه کانتینر به همراه آن - بسته به دستگاه کاربر تغییر میکند.
ویژگی sizes به شما امکان میدهد مجموعهای از اندازههای منبع را مشخص کنید، که در آن هر اندازه منبع شامل یک شرط رسانه و یک مقدار است. ویژگی sizes اندازه نمایش مورد نظر تصویر را در پیکسلهای CSS توصیف میکند. هنگامی که با توصیفگرهای عرض srcset ترکیب میشود، مرورگر میتواند انتخاب کند که کدام منبع تصویر برای دستگاه کاربر بهترین است.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
در قطعه کد HTML قبلی، ویژگی srcset فهرستی از تصاویر کاندید را مشخص میکند که مرورگر میتواند از بین آنها انتخاب کند و با کاما از هم جدا شدهاند. هر کاندید در این فهرست شامل URL تصویر و به دنبال آن سینتکسی است که عرض ذاتی تصویر را نشان میدهد. اندازه ذاتی یک تصویر، ابعاد آن است. به عنوان مثال، توصیفگر 1000w نشان میدهد که عرض ذاتی تصویر 1000 پیکسل است.
با استفاده از این اطلاعات، مرورگر وضعیت رسانه را در ویژگی sizes ارزیابی میکند و - در این مورد - به آن دستور داده میشود که اگر عرض نمای دستگاه از ۷۶۸ پیکسل بیشتر باشد، تصویر با عرض ۵۰۰ پیکسل نمایش داده شود. در دستگاههای کوچکتر، تصویر با 100vw - یا عرض کامل نمای دستگاه - نمایش داده میشود.
سپس مرورگر میتواند این اطلاعات را با لیست منابع تصویر srcset ترکیب کند تا تصویر بهینه را پیدا کند. برای مثال، اگر کاربر در دستگاه تلفن همراه با عرض صفحه نمایش ۳۲۰ پیکسل با DPR برابر با ۳ باشد، تصویر با 320 CSS pixels x 3 DPR = 960 device pixels نمایش داده میشود. در این مثال، نزدیکترین اندازه تصویر image-1000.jpg خواهد بود که دارای عرض ذاتی ۱۰۰۰ پیکسل ( 1000w ) است.
فرمتهای فایل
مرورگرها از چندین فرمت فایل تصویری مختلف پشتیبانی میکنند. فرمتهای تصویری مدرن مانند WebP و AVIF ممکن است فشردهسازی بهتری نسبت به PNG یا JPEG ارائه دهند، که باعث میشود اندازه فایل تصویری شما کوچکتر شود و بنابراین زمان کمتری برای دانلود صرف شود. با ارائه تصاویر در فرمتهای مدرن، میتوانید زمان بارگذاری یک منبع را کاهش دهید ، که ممکن است منجر به کاهش Largest Contentful Paint (LCP) شود.
WebP فرمتی با پشتیبانی گسترده است که در تمام مرورگرهای مدرن کار میکند. WebP اغلب فشردهسازی بهتری نسبت به JPEG، PNG یا GIF دارد و هم فشردهسازی با اتلاف و هم بدون اتلاف را ارائه میدهد. WebP همچنین از شفافیت کانال آلفا حتی هنگام استفاده از فشردهسازی با اتلاف پشتیبانی میکند - ویژگیای که کدک JPEG ارائه نمیدهد.
AVIF یک فرمت تصویر جدیدتر است و اگرچه به اندازه WebP پشتیبانی نمیشود، اما از پشتیبانی نسبتاً مناسبی در مرورگرها برخوردار است. AVIF از هر دو فشردهسازی با اتلاف و بدون اتلاف پشتیبانی میکند و آزمایشها در برخی موارد، بیش از ۵۰٪ صرفهجویی در مقایسه با JPEG را نشان دادهاند. AVIF همچنین ویژگیهای طیف رنگ گسترده (WCG) و محدوده دینامیکی بالا (HDR) را ارائه میدهد.
فشرده سازی
در مورد تصاویر، دو نوع فشردهسازی وجود دارد:
فشردهسازی با اتلاف با کاهش دقت تصویر از طریق کوانتیزاسیون عمل میکند و اطلاعات رنگی اضافی ممکن است با استفاده از نمونهبرداری کروما حذف شوند. فشردهسازی با اتلاف بیشترین تأثیر را روی تصاویر با چگالی بالا با نویز و رنگهای زیاد دارد - معمولاً عکسها یا تصاویری با محتوای مشابه. دلیل این امر این است که مصنوعات تولید شده توسط فشردهسازی با اتلاف در چنین تصاویر دقیقی بسیار کمتر دیده میشوند. با این حال، فشردهسازی با اتلاف ممکن است روی تصاویری که حاوی لبههای تیز مانند خطوط هنری، جزئیات واضح مشابه یا متن هستند، کمتر مؤثر باشد. فشردهسازی با اتلاف را میتوان روی تصاویر JPEG، WebP و AVIF اعمال کرد.
فشردهسازی بدون اتلاف، با فشردهسازی تصویر بدون از دست دادن دادهها، حجم فایل را کاهش میدهد. فشردهسازی بدون اتلاف، یک پیکسل را بر اساس تفاوت آن با پیکسلهای همسایهاش توصیف میکند. فشردهسازی بدون اتلاف برای فرمتهای تصویر GIF، PNG، WebP و AVIF استفاده میشود.
شما میتوانید تصاویر خود را با استفاده از Squoosh ، ImageOptim یا یک سرویس بهینهسازی تصویر فشرده کنید. هنگام فشردهسازی، یک تنظیم جهانی مناسب برای همه موارد وجود ندارد. رویکرد توصیه شده این است که سطوح فشردهسازی مختلف را آزمایش کنید تا زمانی که یک تعادل خوب بین کیفیت تصویر و حجم فایل پیدا کنید. برخی از سرویسهای پیشرفته بهینهسازی تصویر میتوانند این کار را به طور خودکار برای شما انجام دهند، اما ممکن است برای همه کاربران از نظر مالی مقرون به صرفه نباشد.
عنصر <picture>
عنصر <picture> انعطافپذیری بیشتری در تعیین چندین تصویر کاندید به شما میدهد:
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg">
</picture>
When you use <source> element(s) within the <picture> element, you can add support for AVIF and WebP images, but fall back to more compatible legacy image formats if the browser does not support modern formats. With this approach, the browser picks the first <source> element specified that matches. If it can render the image in that format, it uses that image. Otherwise, the browser moves on to the next specified <source> element. In the preceding HTML snippet, the AVIF format takes priority over the WebP format, falling back to the JPEG format if neither AVIF or WebP is supported.
یک عنصر <picture> به یک عنصر <img> که درون آن قرار دارد نیاز دارد. ویژگیهای alt ، width و height روی <img> تعریف میشوند و صرف نظر از اینکه کدام <source> انتخاب شده باشد، استفاده میشوند.
عنصر <source> همچنین از ویژگیهای media ، srcset و sizes پشتیبانی میکند. مشابه مثال <img> که قبلاً ذکر شد، این ویژگیها به مرورگر نشان میدهند که در نماهای مختلف، کدام تصویر را انتخاب کند.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
ویژگی media یک شرط رسانهای میگیرد. در مثال قبلی، DPR دستگاه به عنوان شرط رسانهای استفاده میشود. هر دستگاهی که DPR آن بزرگتر یا مساوی ۱.۵ باشد، از اولین عنصر <source> استفاده میکند. عنصر <source> به مرورگر میگوید که در دستگاههایی با عرض نمایشگر بیشتر از ۷۶۸ پیکسل، تصویر کاندید انتخاب شده با عرض ۵۰۰ پیکسل نمایش داده میشود. در دستگاههای کوچکتر، این عرض کل نمایشگر را اشغال میکند. با ترکیب ویژگیهای media و srcset ، میتوانید کنترل دقیقتری بر روی تصویر مورد استفاده داشته باشید.
این موضوع در جدول زیر نشان داده شده است، که در آن چندین عرض نمایشگر و نسبت پیکسل دستگاه ارزیابی شدهاند:
| عرض نمای دید (پیکسل) | ۱ دی پی آر | ۱.۵ دی پی آر | ۲ دی پی آر | ۳ دی پی آر |
|---|---|---|---|---|
| ۳۲۰ | ۵۰۰.jpg | ۵۰۰.jpg | ۵۰۰.jpg | ۱۰۰۰.jpg |
| ۴۸۰ | ۵۰۰.jpg | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
| ۵۶۰ | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
| ۱۰۲۴ عدد | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
| ۱۹۲۰ | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
دستگاههایی با DPR برابر با ۱، image-500.jpg را دانلود میکنند، از جمله اکثر کاربران دسکتاپ - که تصویر را در اندازه بیرونی ۵۰۰ پیکسل مشاهده میکنند. از سوی دیگر، کاربران موبایل با DPR برابر با ۳، تصویر بزرگتر image-1500.jpg دانلود میکنند - همان تصویری که در دستگاههای دسکتاپ با DPR برابر با ۳ استفاده میشود.
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
در این مثال، عنصر <picture> طوری تنظیم شده است که شامل یک عنصر <source> اضافی باشد تا از تصاویر مختلف برای دستگاههای عریض با DPR بالا استفاده کند:
| عرض نمای دید (پیکسل) | ۱ دی پی آر | ۱.۵ دی پی آر | ۲ دی پی آر | ۳ دی پی آر |
|---|---|---|---|---|
| ۳۲۰ | ۵۰۰.jpg | ۵۰۰.jpg | 1000-sm.jpg | 1000-sm.jpg |
| ۴۸۰ | ۵۰۰.jpg | ۵۰۰.jpg | 1000-sm.jpg | ۱۵۰۰-sm.jpg |
| ۵۶۰ | ۵۰۰.jpg | 1000-sm.jpg | 1000-sm.jpg | ۱۵۰۰-sm.jpg |
| ۱۰۲۴ عدد | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
| ۱۹۲۰ | ۵۰۰.jpg | ۱۰۰۰.jpg | ۱۰۰۰.jpg | ۱۵۰۰.jpg |
با این کوئری اضافی، میتوانید ببینید که image-1000-sm.jpg و image-1500-sm.jpg در نمایشگرهای کوچک نمایش داده میشوند. این اطلاعات اضافی به شما امکان میدهد تصاویر را بیشتر فشرده کنید، زیرا مصنوعات فشردهسازی در آن اندازه و تراکم زیاد قابل مشاهده نیستند، در حالی که کیفیت تصویر را در دستگاههای رومیزی نیز به خطر نمیاندازند.
از طرف دیگر، با تنظیم ویژگیهای srcset و media ، میتوانید از نمایش تصاویر بزرگ در نماهای کوچک جلوگیری کنید:
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x">
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x">
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg">
</picture>
در قطعه کد HTML قبلی، توصیفگرهای عرض به نفع توصیفگرهای نسبت پیکسل دستگاه حذف شدهاند. تصاویر نمایش داده شده در دستگاه تلفن همراه حتی در دستگاههایی با DPR برابر با ۳، به /image-500.jpg یا /image-1000.jpg محدود میشوند.
مدیریت پیچیدگی
هنگام کار با تصاویر واکنشگرا، ممکن است با انواع مختلفی از اندازهها و فرمتها برای هر تصویر مواجه شوید. در مثال قبلی، از انواع مختلفی برای هر اندازه استفاده شده است، اما AVIF و WebP را شامل نمیشود. چند نوع تصویر باید داشته باشید؟ مانند بسیاری از مسائل مهندسی، پاسخ این است که «بستگی دارد».
اگرچه ممکن است وسوسهانگیز باشد که برای ارائه بهترین نتیجه، هر نوع تصویر اضافی هزینهبر باشد و استفاده کمتری از حافظه پنهان مرورگر داشته باشد. با داشتن تنها یک نوع تصویر، هر کاربر تصویر یکسانی را دریافت میکند، بنابراین میتوان آن را بسیار کارآمد ذخیره کرد.
از طرف دیگر، اگر انواع زیادی وجود داشته باشد، هر نوع به ورودی کش دیگری نیاز دارد. اگر ورودی کش نوع منقضی شده باشد و تصویر نیاز به دریافت مجدد از سرور مبدا داشته باشد، هزینههای سرور میتواند افزایش یابد و ممکن است عملکرد را کاهش دهد.
جدا از این، اندازه سند HTML شما با هر تغییر افزایش مییابد. ممکن است برای هر تصویر چندین کیلوبایت HTML ارسال کنید.
تصاویر را بر اساس هدر درخواست Accept ارائه دهید
هدر درخواست Accept HTTP به سرور اطلاع میدهد که مرورگر کاربر چه نوع محتوایی را درک میکند. این اطلاعات میتواند توسط سرور شما برای ارائه فرمت تصویر بهینه بدون اضافه کردن بایتهای اضافی به پاسخهای HTML شما استفاده شود.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
قطعه کد HTML قبلی، نسخه سادهشدهای از کدی است که میتوانید برای انتخاب و ارائه فرمت تصویر بهینه به بکاند جاوا اسکریپت سرور خود اضافه کنید. اگر سربرگ Accept درخواست شامل image/avif باشد، تصویر AVIF ارائه میشود. در غیر این صورت، اگر سربرگ Accept شامل image/webp باشد، تصویر WebP ارائه میشود. اگر هیچ یک از این شرایط برقرار نباشد، تصویر JPEG ارائه میشود.
شما میتوانید پاسخها را بر اساس محتوای هدر درخواست Accept تقریباً در هر نوع وب سروری تغییر دهید - برای مثال، میتوانید درخواستهای تصویر را در سرورهای آپاچی بر اساس هدر Accept با استفاده از mod_rewrite بازنویسی کنید .
این بیشباهت به رفتاری نیست که در یک شبکه تحویل محتوای تصویر (CDN) مشاهده میکنید. CDNهای تصویر، راهحلهای بسیار خوبی برای بهینهسازی تصاویر و ارسال فرمت بهینه بر اساس دستگاه و مرورگر کاربر هستند.
نکته کلیدی، یافتن تعادل، ایجاد تعداد معقولی تصویر کاندید و اندازهگیری تأثیر آن بر تجربه کاربری است. تصاویر مختلف میتوانند نتایج متفاوتی ارائه دهند و بهینهسازیهای اعمال شده بر هر تصویر به اندازه آن در صفحه و دستگاههایی که کاربران شما استفاده میکنند بستگی دارد. به عنوان مثال، یک تصویر قهرمان با عرض کامل ممکن است به انواع بیشتری نسبت به تصاویر کوچک در صفحه فهرست محصولات تجارت الکترونیک نیاز داشته باشد.
بارگذاری تنبل
میتوان با استفاده از ویژگی loading به مرورگر گفت که تصاویر را هنگام نمایش در viewport به صورت lazy load بارگذاری کند. مقدار ویژگی lazy به مرورگر میگوید که تصویر را تا زمانی که در (یا نزدیک) viewport قرار نگرفته است، دانلود نکند. این کار باعث صرفهجویی در پهنای باند میشود و به مرورگر اجازه میدهد منابع مورد نیاز خود را برای رندر محتوای حیاتی که از قبل در viewport قرار دارد، اولویتبندی کند.
ویژگی رمزگشایی
ویژگی decoding به مرورگر میگوید که چگونه باید تصویر را رمزگشایی کند. سه مقدار ممکن وجود دارد:
-
asyncبه مرورگر میگوید که تصویر میتواند به صورت غیرهمزمان رمزگشایی شود، که ممکن است زمان رندر کردن سایر محتوا را بهبود بخشد. -
syncبه مرورگر میگوید که تصویر باید همزمان با سایر محتوا ارائه شود. -
auto(پیشفرض) به مرورگر اجازه میدهد تا تصمیم بگیرد که چه چیزی برای کاربر بهتر است.
میتوانید هنگام درج تصویر در DOM، از متد decode روی نمونهای از HTMLImageElement در جاوا اسکریپت استفاده کنید.
نسخه نمایشی تصویر
دانش خود را بیازمایید
کدام فرمتهای تصویر از فشردهسازی بدون اتلاف پشتیبانی میکنند؟
کدام فرمتهای تصویر از فشردهسازی با اتلاف پشتیبانی میکنند؟
توصیفگر عرض (برای مثال، 1000w ) چه چیزی را در مورد یک کاندید تصویر مشخص شده در ویژگی srcset به مرورگر میگوید؟
ویژگی sizes چه چیزی را در مورد عنصر <img> که روی آن اعمال شده است، به مرورگر میگوید؟
srcset یک عنصر <img> باید با توجه به ابعاد نمای فعلی کاربر بارگذاری شود.srcset عنصر <img> بارگذاری شود.بعدی: اجرای ویدیویی
اگرچه تصاویر ممکن است رایجترین نوع رسانه مورد استفاده در وب باشند، اما تنها رسانهای نیستند که باید در مورد عملکرد در نظر داشته باشید. ویدیو یکی دیگر از انواع رایج رسانه مورد استفاده در وب است و ملاحظات عملکرد خاص خود را دارد. در ماژول بعدی این دوره، برخی از تکنیکهای بهینهسازی ویدیوها و نحوه بارگذاری کارآمد آنها را بررسی کنید.