عملکرد تصویر

تصاویر اغلب سنگین ترین و رایج ترین منبع در وب هستند. در نتیجه، بهینه سازی تصاویر می تواند عملکرد وب سایت شما را به میزان قابل توجهی بهبود بخشد. در بیشتر موارد، بهینه سازی تصاویر به معنای کاهش زمان شبکه با ارسال بایت های کمتر است، اما می توانید با ارائه تصاویری که اندازه مناسبی برای دستگاه کاربر دارند، میزان بایت های ارسال شده به کاربر را نیز بهینه کنید.

تصاویر را می توان با استفاده از عناصر <img> یا <picture> یا ویژگی background-image CSS به یک صفحه اضافه کرد.

اندازه تصویر

اولین بهینه سازی که می توانید در مورد استفاده از منابع تصویر انجام دهید، نمایش تصویر در اندازه صحیح است - در این مورد، اصطلاح اندازه به ابعاد یک تصویر اشاره دارد. بدون در نظر گرفتن هیچ متغیر دیگری، تصویری که در یک محفظه 500 پیکسل در 500 پیکسل نمایش داده می شود، اندازه بهینه 500 پیکسل در 500 پیکسل خواهد بود. به عنوان مثال، استفاده از یک تصویر مربع 1000 پیکسلی به این معنی است که تصویر دو برابر اندازه مورد نیاز است.

با این حال، متغیرهای زیادی در انتخاب اندازه مناسب تصویر دخیل هستند، که کار انتخاب اندازه تصویر مناسب در هر مورد را بسیار پیچیده می‌کند. در سال 2010، زمانی که آیفون 4 عرضه شد، وضوح صفحه نمایش (640x960) دو برابر آیفون 3 (320x480) بود. با این حال، اندازه فیزیکی صفحه نمایش آیفون 4 تقریباً مشابه آیفون 3 باقی مانده است.

نمایش همه چیز با وضوح بالاتر، متن و تصاویر را به طور قابل توجهی کوچکتر می کرد - به طور دقیق، نیمی از اندازه قبلی آنها. در عوض، 1 پیکسل به 2 پیکسل دستگاه تبدیل شد. این نسبت پیکسل دستگاه (DPR) نامیده می شود. آیفون 4 - و بسیاری از مدل های آیفون که پس از آن عرضه شدند - دارای DPR 2 بودند.

با بررسی مجدد مثال قبلی، اگر دستگاه دارای DPR 2 باشد و تصویر در محفظه 500 پیکسل در 500 پیکسل نمایش داده شود، در این صورت یک تصویر مربعی 1000 پیکسلی (که به آن اندازه ذاتی گفته می شود) اکنون اندازه بهینه است. به طور مشابه، اگر دستگاه دارای DPR 3 باشد، یک تصویر مربع 1500 پیکسل اندازه بهینه خواهد بود.

srcset

عنصر <img> از ویژگی srcset پشتیبانی می‌کند، که به شما امکان می‌دهد فهرستی از منابع تصویری ممکن که مرورگر ممکن است استفاده کند را مشخص کنید. هر منبع تصویر مشخص شده باید URL تصویر و یک توصیفگر عرض یا تراکم پیکسلی داشته باشد.

<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 قبلی از توصیفگر تراکم پیکسلی استفاده می‌کند تا به مرورگر اشاره کند که image-500.png در دستگاه‌هایی با DPR 1، image-1000.jpg در دستگاه‌های با DPR 2 و image-1500.jpg در دستگاه‌هایی با DPR استفاده کند. DPR 3.

در حالی که همه اینها ممکن است به نظر بریده و خشک به نظر برسد، 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 ارزیابی می‌کند و - در این مورد - به آن دستور داده می‌شود که اگر عرض نمای دستگاه از 768 پیکسل بیشتر شود، تصویر با عرض 500 پیکسل نمایش داده می‌شود. در دستگاه‌های کوچک‌تر، تصویر با 100vw یا عرض کامل نمای پورت نمایش داده می‌شود.

سپس مرورگر می تواند این اطلاعات را با لیست منابع تصویر srcset ترکیب کند تا تصویر بهینه را پیدا کند. به عنوان مثال، اگر کاربر در یک دستگاه تلفن همراه با عرض صفحه نمایش 320 پیکسل با DPR 3 باشد، تصویر با 320 CSS pixels x 3 DPR = 960 device pixels نمایش داده می شود. در این مثال، نزدیکترین اندازه تصویر image-1000.jpg است که دارای عرض ذاتی 1000 پیکسل ( 1000w ) است.

فرمت های فایل

مرورگرها از چندین فرمت فایل تصویری مختلف پشتیبانی می کنند. فرمت‌های تصویر مدرن مانند WebP و AVIF ممکن است فشرده‌سازی بهتری نسبت به PNG یا JPEG داشته باشند، که حجم فایل تصویر شما را کوچک‌تر می‌کند و در نتیجه زمان کمتری برای دانلود می‌گیرد. با ارائه تصاویر در قالب‌های مدرن، می‌توانید زمان بارگذاری منبع را کاهش دهید ، که ممکن است منجر به کاهش بزرگترین رنگ محتوایی (LCP) شود.

WebP فرمتی است که به طور گسترده ای پشتیبانی می شود که در تمام مرورگرهای مدرن کار می کند. WebP اغلب فشرده‌سازی بهتری نسبت به JPEG، PNG یا GIF دارد و فشرده‌سازی با اتلاف و بدون تلفات را ارائه می‌دهد. WebP همچنین از شفافیت کانال آلفا حتی در هنگام استفاده از فشرده‌سازی با اتلاف پشتیبانی می‌کند - ویژگی‌ای که کدک JPEG ارائه نمی‌کند.

AVIF یک فرمت تصویر جدیدتر است، و در حالی که به اندازه WebP پشتیبانی نمی‌شود، از پشتیبانی قابل قبولی در مرورگرها برخوردار است. AVIF از فشرده‌سازی با اتلاف و بدون تلفات پشتیبانی می‌کند و آزمایش‌ها در برخی موارد در مقایسه با JPEG، بیش از ۵۰ درصد صرفه‌جویی را نشان داده‌اند. AVIF همچنین ویژگی های Wide Color Gamut (WCG) و High Dynamic Range (HDR) را ارائه می دهد.

فشرده سازی

در مورد تصاویر، دو نوع فشرده سازی وجود دارد:

1. فشرده سازی از دست رفته
2. فشرده سازی بدون اتلاف

فشرده سازی اتلاف با کاهش دقت تصویر از طریق کوانتیزه کردن کار می کند و اطلاعات رنگ اضافی ممکن است با استفاده از نمونه برداری رنگی نادیده گرفته شود. فشرده‌سازی با اتلاف در تصاویر با چگالی بالا با نویز و رنگ‌های زیاد، معمولاً عکس‌ها یا تصاویر با محتوای مشابه، مؤثرتر است. این به این دلیل است که مصنوعات تولید شده توسط فشرده سازی با اتلاف کمتر در چنین تصاویر دقیقی مورد توجه قرار می گیرند. با این حال، فشرده‌سازی با اتلاف ممکن است با تصاویری که دارای لبه‌های تیز هستند، مانند هنر خط، جزئیات واضح یا متن، کمتر مؤثر باشد. فشرده سازی از دست رفته را می توان روی تصاویر 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>

وقتی از عنصر(های) <source> در عنصر <picture> استفاده می‌کنید، می‌توانید از تصاویر AVIF و WebP پشتیبانی کنید، اما اگر مرورگر از فرمت‌های مدرن پشتیبانی نمی‌کند، به فرمت‌های تصویر قدیمی سازگارتر بازگردید. با این رویکرد، مرورگر اولین عنصر <source> مشخص شده را انتخاب می کند که مطابقت دارد. اگر بتواند تصویر را در آن فرمت ارائه دهد، از آن تصویر استفاده می کند. در غیر این صورت، مرورگر به عنصر <source> مشخص شده بعدی می رود. در قطعه HTML قبلی، قالب AVIF بر قالب WebP اولویت دارد و اگر AVIF یا WebP پشتیبانی نشود، به فرمت JPEG باز می گردد.

یک عنصر <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 بزرگتر یا مساوی 1.5 از اولین عنصر <source> استفاده می کند. عنصر <source> به مرورگر می‌گوید که در دستگاه‌هایی با دریچه دید وسیع‌تر از 768 پیکسل، تصویر انتخاب‌شده با عرض 500 پیکسل نمایش داده می‌شود. در دستگاه‌های کوچک‌تر، این کل عرض درگاه دید را اشغال می‌کند. با ترکیب ویژگی های media و srcset ، می توانید کنترل دقیق تری بر روی تصویری که باید استفاده کنید داشته باشید.

این در جدول زیر نشان داده شده است، که در آن چندین عرض و نسبت پیکسل دستگاه ارزیابی شده است:

دستگاه‌هایی با DPR 1 image-500.jpg را دانلود می‌کنند، از جمله اکثر کاربران دسک‌تاپ—که تصویر را با اندازه خارجی 500 پیکسل در عرض مشاهده می‌کنند. از سوی دیگر، کاربران تلفن همراه با DPR 3 یک image-1500.jpg — همان تصویری که در دستگاه های دسکتاپ با DPR 3 استفاده می شود.

<picture>
  <source
    media="(min-width: 560px) 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 بالا شامل شود:

با این پرس و جو اضافی، می توانید مشاهده کنید که image-1000-sm.jpg و image-1500-sm.jpg در نمای کوچک نمایش داده می شوند. این اطلاعات اضافی به شما امکان می‌دهد تصاویر را بیشتر فشرده کنید، زیرا مصنوعات فشرده‌سازی در آن اندازه و چگالی زیاد قابل مشاهده نیستند، در حالی که کیفیت تصویر را در دستگاه‌های رومیزی به خطر نمی‌اندازند.

از طرف دیگر، با تنظیم ویژگی‌های srcset و media ، می‌توانید از نمایش تصاویر بزرگ در ویوپورت‌های کوچک اجتناب کنید:

<picture>
  <source
    media="(min-width: 560px)"
    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 قبلی، توصیفگرهای عرض به نفع توصیفگرهای نسبت پیکسل دستگاه حذف شده اند. تصاویر ارائه شده در دستگاه تلفن همراه به /image-500.jpg یا /image-1000.jpg محدود می شوند، حتی در دستگاه هایی با DPR 3.

چگونه پیچیدگی را مدیریت کنیم

هنگام کار با تصاویر واکنش گرا، می توانید خود را با تغییرات اندازه و فرمت های مختلف برای هر تصویر بیابید. در مثال قبل، از تغییرات برای هر اندازه استفاده می شود، اما 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 به مرورگر می‌گوید که تصویر را تا زمانی که در (یا نزدیک) درگاه نمایش قرار نگیرد، دانلود نکند. این باعث صرفه جویی در پهنای باند می شود و به مرورگر اجازه می دهد منابع مورد نیاز خود را برای ارائه محتوای مهمی که از قبل در viewport وجود دارد، اولویت بندی کند.

decoding

ویژگی decoding به مرورگر می گوید که چگونه تصویر را رمزگشایی کند. مقدار async به مرورگر می‌گوید که تصویر را می‌توان به صورت ناهمزمان رمزگشایی کرد و احتمالاً زمان ارائه محتوای دیگر را بهبود می‌بخشد. مقدار sync به مرورگر می گوید که تصویر باید همزمان با محتوای دیگر ارائه شود. مقدار پیش‌فرض auto به مرورگر اجازه می‌دهد تصمیم بگیرد چه چیزی برای کاربر بهتر است.

دموهای تصویری

دانش خود را تست کنید

بعدی: عملکرد ویدیو

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