Материал просмотрен 115 раз(а)

Думаю, этот вопрос рано или поздно встаёт перед любым веб-мастером, так или иначе причастным к созданию веб-сайтов. Проводя вёрстку, создавая контент мы так или иначе работаем с изображениями, от объёма которых зависит многое – скорость загрузки в браузере, занимаемое место на хостинге, объем занимаемый резервными копиями и так далее.

Я не буду глубоко вдаваться в технические детали, скажу лишь, что на сегодняшний день оптимальными считаю два формата – PNG и JPG, применять которые лучше каждый в своём случае.

Где лучше применять формат PNG

PNG-формат изображений лучше всего применять там же, где до этого применялся GIF. Несмотря на то, что PNG сжимает без потерь качества даже полноцветные изображения, оптимальнее его использовать на ограниченном количестве цветов (схемы, диаграммы, графики), одним словом, чем больше одноцветных участков и меньше цветов, тем лучше.

Где лучше применять формат JPEG

JPEG – сжатие с потерями. И чем выше степень сжатия, тем значительнее будут “артефакты” изображения. Этот формат лучше всего подходит для полноцветных фотографий, с большим количеством “пятен” и оттенков.

Пример:

obmotki_hdd

Очевидно, что лучше всего подойдёт формат PNG (монохромное изображение – белые-чёрные цвета), большие участки одинакового цвета.

Для сжатия изображений я с недавних пор начал использовать бесплатную программку RIOT – Radical Image Optimization Tool. Откроем картинку в этой программе:

Артефакты

Обратите внимание на следующие факты:

  • Исходное изображение JPEG, размер 45 Кбайт.
  • Справа – результирующее изображение при 63% качестве, вес уже 16 Кбайт.
  • Вокруг букв появляются артефакты – издержки сжатия JPEG.

Выберем формат сжатия PNG (внизу кнопки), зададим 3 цвета и увидим, что не только значительно уменьшился размер, но и пропали изначальные артефакты вокруг букв (как на исходном изображении).

PNG

При этом можно легко заметить, что используя PNG на фотографиях (а не рисунках) мы получим проигрыш в качестве и объёме, поэтому нужно подходить к вопросу хранения картинок с умом, выбирая для различных изображений разные форматы. Надеюсь, стало немного понятнее.

Кстати, программа поддерживает пакетное сжатие – можно скормить целую папку с однотипными картинками.

А для оптимизации уже закачанных картинок на веб-сайте я использовал консольные аналоги. Писал об этом здесь.