Какой формат изображения выбрать

Выбираем оптимальный формат изображений

Вообще размер картинок, которые помещены на странице составляет более 50% от веса всей страницы. Очень Важно подобрать правильный формат для используемых изображений контента. Их всего два и ,

потому выбор не так уж сложен.

PNG - это очень классный формат, который пришел на замену GIF-формата.

Особенности формата PNG:

• Прозрачность
• Разная палитра (8 и 24 бит)

Когда его применять?

PNG позволяет показывать картинки без потери мельчайших деталей с точной передачей цвета. Это делает формат удобным для: 

• иконок
• малоцветных иллюстраций
• изображений, в которых требуется большая четкость мелких деталей 

Разница между PNG24 и PNG8

Формат PNG24 использует максимальную глубину цветов. Такой тип подойдет для многоцветных картинок. PNG8 позволяет использовать ограниченную палитру от 1 бита (2 цвета) до 8 бит (256 цветов). Это может значительно сократить размер файлов с малым количеством цветов на картинке.

JPEG - Когда использовать?

Этот формат использует максимально доступную палитру. Для уменьшения размера используется специальный механизм сжатия и сглаживания.

Сильная сторона формата JPEG проявляется когда изображение содержит множество цветов и не нет особых требований к мелким деталям. Это идеально подходит для:

• фотографий
• скриншотов
• многоцветных иллюстраций;

JPG поддерживает прогрессивный формат. Когда человек открывает такую картинку в браузере, он сначала увидит общие очертания, а потом детализация и качество повысится до максимального. Это составит впечатление о более быстрой загрузке сайта. Особенно важно использование progressive формата для случаев с низкой скоростью доступа в Интернет у посетителей.

Преобразование в progressive формат можно выполнить так:

jpegtran -progressive -outfile image.jpg image.jpg

Либо imagemagick:

convert -interlace Plane input-file.jpg output-file.jpg

Сглаживание

JPEG позволяет указать уровень сжатия/сглаживания при сохранении изображения. Это снижает качество. Но иногда снижения качества незаметно, зато экономия размера может получиться довольно большой. Для изменения сжатия используйте утилиту jpegtran:

jpegtran -quality 80 -outfile optimized.image.jpg image.jpg
Используйте значения от 5 до 95 для получения различного уровня сжатия