8 методов оптимизации загрузки изображений, позволяющие минимизировать как трафик, используемый для загрузки картинок в Интернет, так и использование ЦП для отображения фотографий.
1. Используйте CSS, чтобы задать "плавающие" размеры изображения, не забывая об атрибутах высоты и ширины в HTML, так вы получите правильное соотношение сторон при первом рендеринге.
2. Используйте content-visibility: auto;
(Об этом напишу отдельную статью)
3. Если это возможно, используйте формат изображения AVIF
4. Используйте синтаксис class="img-responsive" (Bootstrap 3) или class="img-fluid" (Bootstrap 4) для оптимизации изображений на мобильных устройствах.
5. Используйте заданное время жизни изображений в кэше браузера, чтобы снизить нагрузку на сервер. Вот примерное содержимое файла .htaccess :
<IfModule mod_expires.c>
ExpiresActive On
# Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year"
# Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year"
# Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year"
# CSS, JavaScript ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month"
# Others ExpiresByType application/pdf "access plus 1 month" ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>
6. Используйте loading="lazy" для загрузки изображения по мере прокрутки страницы.
<img src="image.jpg" alt="..." loading="lazy">
7. Используйте decoding = "async"
8. Используйте встроенный CSS / SVG для плавной загрузки фото.