Какой формат выбрать для размещения на сайте изображений зависит прежде всего от того какие изображения используются и какие существуют требования. Форматы JPG GIF и PNG используются в web в разной степени, чаще всего применяются JPG и PNG, GIF в настоящее время только для анимации, он практически вытеснен PNG.
Форматы JPG GIF и PNG. Какой лучше использовать и для чего
На веб-сайтах изображения в основном используются двух форматов JPG и PNG. Рассмотрим их и определим плюсы, минусы и оправданность применения
JPG — максимально хорошо передает цветовые оттенки. При этом плохо масштабируется и не поддерживает прозрачность. Использовать лучше для фотографий и скриншотов.
PNG — не отличается очень хорошей передачей текста, но поддерживает прозрачность (alpha-transparency) и не приводит к потере качества при изменении размера изображения. Использовать лучше для логотипов, иконок схем, графиков и т.п.
PNG растровый формат, это означает, что он хоть и лучше сохраняет качество при масштабировании, но его потеря все таки происходит. При использовании вектора потери бы не было.
GIF — формат существующий с 1987 года и сейчас фактически не использующийся. Необходимость в нем есть только тогда когда нужна анимация
Форматы или цветовые палитры PNG-8 и PNG-24
Есть 2 подформата PNG с разной битностью: PNG-8 и PNG-24. Первый представляет собой замену GIF, второй поддерживает многоцветность и имеет приемлемую цветопередачу (если речь идет не о фотографиях высокой четкости).
- PNG-8 практически идентичен GIF (с индексированной палитрой цветов и их количестве до 256). В 1 бите может храниться информация о двух цветах, в 8 — о 256. Это максимум для формата.
- PNG-24 — используется для растровых изображений и приближается к JPG, хотя уступает ему в случае с цветными фотографиями
Преобразовать изображение в другой формат
Делать это полезно прежде всего для уменьшения размера файлов. Если используется 2 цвета — нет смысле иметь палитру, позволяющую 16 777 216 сочетаний (для 24 битного изображения). Оптимизированные изображения при большом их количестве могут очень заметно увеличить скорость работы сайта.
Чтобы выполнить преобразование можно использовать convert из пакета imagemagick
convert file.png -depth 2 file.png
Ключем -depth указывается желаемая глубина файла, который получается на выходе.
Есть и другая утилита, преобразование с использованием которой дает лучшие результаты — pngquant
pngquant
--quality=0-80 file.png
Такая команда автоматически преобразует file.png подобрав нужную битность, которая обеспечит 80% качество аналогичного изображения в формате JPG.
Читайте также про оптимизацию PNG и JPG