Kako optimizovati učitavanje slika na veb stranici?

1. Сжимање: Користите алате за оптимизацију величине слика без губитка квалитета (нпр. TinyPNG, Compressor.io).
2. Формати: Изаберите модерне формате као што су WebP или AVIF, који пружају боље сжимање у поређењу са JPEG и PNG. За старе прегледаче користите <picture> или атрибут srcset као fallback.
3. Lazy Loading: Одложите учитавање слика ван видљивог подручја док не буду потребне. Користите loading="lazy" или JavaScript библиотеке.
4. Респонзивне слике: Обезбедите различите верзије слика за различите величине екрана и резолуције користећи <picture> или атрибуте srcset/sizes.
5. CDN (Content Delivery Network): Хостујте слике на CDN-у ради брже испоруке садржаја корисницима из најближе локације.
6. Кеширање: Подесите одговарајуће заглавља кеша на серверу како би прегледач могао да чува слике и учита их из локалне кеш меморије при поновним посетама.
7. Placeholder/Blurhash: Прикажите нискоквалитетни "placeholder" или генерисани Blurhash док се пуна слика учитава.

Пример коришћења loading="lazy":

<img src="image.jpg" alt="Опис слике" loading="lazy">

Пример коришћења <picture> за различите формате:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Опис слике">
</picture>