К основному контенту

Оптимизация изображений

Если размер изображений на странице можно уменьшить без особого ущерба качеству, то PageSpeed Insights предлагает оптимизировать их размер - "Оптимизируйте изображения".

Правильный формат и оптимальная степень сжатия изображений позволяет сократить их объем, что ускорит их загрузку.
Для уменьшения размера изображений можно использовать эффективные алгоритмы сжатия. Существуют инструменты, выполняющие дополнительное сжатие файлов JPEG и PNG без потерь и снижения качества:
  • для JPEG это MozJPEG (уменьшает время до начала отрисовки за счёт манипулирования уровнями сканирования), jpegtran или jpegoptim (доступно только для Linux, выполнять с параметром --strip-all)
  • для PNG Pingo, OptiPNG или PNGOUT
  • для GIF  Lossy GIF 
  • для SVG. SVGOMG

Gulp

Для пакетного сжатия изображений можно воспользоваться gulp плагином. Нужно предварительно установить nodejs и в папке из архива выполнить npm install.

В файле gulpfile.js можно найти все задачи. Например задача img-optim сжимает все изображения из директории ./src/img и сохраняет сжатые файлы в папку ./output/img

Файл urls.txt используется задачей screenshots, в нем находится список страниц для создания снимков экранов. 

Формат WebP

Для использования изображений в формате WebP необходимо использовать согласование содержания (англ. content negotiation) с помощью заголовков Accept, либо использовать дескриптор HTML5 - picture.

Пример использования разных форматов для одного изображения:
<picture> <source media="(min-width: 1024px)" srcset="opera-fullshot.webp" type="image/webp"> <source media="(min-width: 1024px)" srcset="opera-fullshot.jpg"> <source srcset="opera-closeup.webp" type="image/webp"> <img src="opera-closeup.jpg" alt="The Oslo Opera House"> </picture>
На устройствах с большим размером окна браузера (1024 px и более) будет использовано full-shot изображение. Для меньших устройств будет использовано close-up изображение. Будет отображаться изображение WebP в браузерах которые поддерживают этот формат, в остальных будет отображаться изображение в формате JPG.

Если мы не используем формат WebP, то атрибут srcset можно использовать прямо в дескрипторе img без использования picture:
<article>   <img srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_1400.jpg 1400w,                https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_700.jpg 700w,                https://s3-us-west-2.amazonaws.com/s.cdpn.io/298/wolf_20131015_003_400.jpg 400w"        sizes="(min-width: 700px) 700px, 100vw"        alt="A woman reading"> </article>

base64

Очень маленькие изображения, например favicon, можно вставлять на страницу в виде полного base64 кода.
See the Pen BdxJMY by George Wise (@ink-jet) on CodePen.
Даже если ссылка на favicon не указана в мета-тегах, браузер попытается загрузить его из корня сайта, а это замедлит загрузку страницы.

Такая техника может применяться и в CSS файлах:
.icon-foobar {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}
Нет смысла применять этот метод к большим изображением, даже к favicon большого размера.

Дополнительные материалы:

Комментарии

Отправить комментарий