Выбор формата изображений
Зачастую общий размер изображений, которые подгружаются на веб-страницу, составляет больше половины веса всей страницы. Именно поэтому очень важно выбирать правильный формат изображений. Об этом и поговорим.
На самом деле, выбор заключается в том, чтобы отдать предпочтение одному из двух известных форматов: PNG и JPG. Давайте рассмотрим особенности каждого из них.
PNG
Крутой растровый формат, когда-то заменивший GIF. Особенности: • прозрачность. Если этот параметр важен, ваш выбор — однозначно PNG; • разнообразная палитра (8 и 24 бит). Позволит вам делать небольшие по цветовой гамме картинки еще и маленькими по размеру.
Когда лучше применять?
На деле PNG дает возможность показывать изображения с высокой точностью цветопередачи и без потери мельчайших деталей. С его помощью можно успешно отображать: • иконки; • малоцветные иллюстрации; • картинки с повышенными требованиями к четкости мелких деталей.
О палитрах PNG24 и PNG8
PNG24 обеспечивает максимальную глубину цветов — хорошее решение для многоцветных картинок. PNG8 характеризуется ограниченной палитрой от 1 бита (два цвета) до 8 бит (соответственно, 256 цветов). Что это значит на практике? А то, что вы получаете возможность существенно уменьшать размер файлов с небольшим количеством цветов.
Вот как можно выполнить преобразование PNG24 в PNG8:
pngnq -n 256 image.png
JPEG
Формат характеризуется максимально доступной палитрой, а в целях уменьшения размера можно применять специальный механизм сглаживания и сжатия.
Когда применять?
У JPEG есть сильная сторона, которая проявляется, если картинка содержит много цветов, а особые требования к мелким деталям отсутствуют. В результате можно успешно отображать: • фотографии; • скриншоты; • многоцветные иллюстрации.
Progressive JPEG
JPG поддерживает прогрессивный формат. К примеру, если пользователь откроет изображение в браузере, он поначалу увидит лишь общие очертания, но впоследствии детализация и качество максимально увеличатся. Такой нехитрый трюк оставит впечатление о том, что сайт загружается быстрее. Это важно, если скорость доступа в сеть понижена.
Как выполняется преобразование в progressive-формат:
Также можно использовать imagemagick:
Сглаживание
В JPEG есть возможность указывать уровень сжатия/сглаживания в процессе сохранении картинки. Да, качество снижается, но порой это проходит незаметно, в то время как экономия размера бывает весомой.
Используя значения в диапазоне 5-95, вы сможете получить разные уровни сжатия:
GIF
Когда существует PNG, использовать GIF имеет смысл лишь в одном случае: при наличии анимации. Это актуально, к примеру, для прелоадеров.
Рекомендации
Напоследок предлагаем перечень рекомендаций по работе с изображениями. Следование списку ниже позволит вам снизить итоговую нагрузку на веб-приложение: — убирайте белые края с изображений (лучше используйте отступы); — обращайте внимание на уровень JPEG-сглаживания (дефолтные значения часто завышены); — не забывайте про Progressive JPEG (появится впечатление, что сайт работает быстрее); — применяйте ограниченную PNG-палитру; — применяйте GIF лишь для анимаций; — оптимизируйте картинки, но не в ущерб качеству; — помните про технику CSS-спрайтов (полезно при объединении мелких иконок в единый файл); — не стоит сохранять текстовый документ в виде изображения; — уменьшенные копии картинок лучше, чем их уменьшение в HTML, но только в том случае, когда размер уменьшенной версии отличается больше чем наполовину.
По материалам блога https://highload.today/.
