[Хд] logo

Выбор формата картинок

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

PNG

PNG формат

PNG очень крутой формат, который заменил GIF. Особенности формата:

  • Прозрачность. Если нужна прозрачность, сразу выбирайте этот формат.
  • Разная палитра (8 и 24 бит). Позволяет делать небольшие по цветовой гамме картинки маленькими по размеру.

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

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

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

Палитры PNG24 и PNG8

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

Преобразовать PNG24 в PNG8 можно используя pngnq:

pngnq -n 256 image.png

# Преобразуем в PNG8

JPEG

JPG формат

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

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

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

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

Progressive JPEG

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

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

jpegtran -progressive -outfile image.jpg image.jpg

# изменит формат картинки на progressive

Либо imagemagick:

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

# изменит формат картинки на progressive

Проверить использование формата Progressive можно этим инструментом.

Сглаживание

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

jpegtran -quality 80 -outfile optimized.image.jpg image.jpg 

# Используйте значения от 5 до 95 для получения различного уровня сжатия

GIF

Нет смысла использовать GIF формат, т.к. существует PNG. Один случай, когда Вы захотите GIF — это наличие анимации. Может использоваться, например, для прелоадеров.

Общие рекомендации

В качестве самого важного — Чеклист по работе с картинками в Web.

  read in english
[Хд]

Подписывайтесь на отборные материалы по продвинутой разработке

Google Email

Esc, чтобы подписаться позже