Создание: формат изображений JPEG

Оптимизация изображения в JPG

Предположим, что изображения в формате JPG для сайта готовы. Но выкладывать их на хостинг пока не следует, поскольку любому SEO-оптимизатору известно: если изображение не оптимизировано по размеру файла и закачивается долго - это раздражает как пользователей, так и поисковые системы. В этой статье рассматривается графическая оптимизация изображений в формате JPEG.

Графическая оптимизация изображений формата JPG

Графический формат JPEG хранит изображения c цветовой глубиной 24 бита на пиксел (True Color) и использует сжатие с потерей данных. У него не так уж много способов оптимизации для картинки, вернее сказать - лишь один: выбрать оптимальный коэффициент сжатия изображения. Для проведения подобной оптимизации изображений в джипег-формате нужен графический редактор, которые позволяют регулировать отношение "сжатие изображения"/"качество картинки" - например, Adobe Photoshop.

Настройки оптимизации изображений формата JPEG в Фотошопе.

После того, как необходимые действия с картинкой проведены, нужно ее сохранить в формате, удобном для показа с сайта. Для этого надо зайти в меню "Файл -> Сохранить для Web" и внимательно посмотреть на правую колонку. Именно там выбирается формат картинки (GIF, JPEG, PNG или BMP), а также параметры оптимизации изображения. Дальше все просто: выбирается формат *.jpg, выставляется качество (либо пятью градациями от низкого до максимального, либо плавно, от 0 до 100), и смотрится как на качество изображения на экране, так и на его размер в левом нижнем углу. Когда компромисс достигнут, остается нажать на кнопку "Сохранить" и задать имя графического файла.

Как определить, какое качество изображения JPG приемлемо?

Заметным на глаз критерием качества будут так называемые "дрожащие контуры", хорошо видимые в местах контрастных переходов, а также появление пятен в областях с плавными переходами. Тот коэффициент качества картинки, при котором эти искажения почти не видны, и будет оптимальным и приемлемым. Размер графического файла при такой оптимизации картинки будет минимальным и без заметной потери качества.

Опции JPEG, связанные с оптимизацией изображения

Во многих графических редакторах, и в том же фото-шопе, есть еще две дополнительные опции, которые связаны с графической оптимизацией JPG-изображения, основанные на технологии Image Ready. Их влияние весьма слабое, но на больших форматах картинок с помощью этих опций можно уменьшить размер файла с изображением JPEG до 10%. Это так называемая "прогрессивная развертка графики" и оптимизированный подбор цветов при сжатии.

Прогрессивная или постепенная развертка для изображения.

Еще один полезный способ оптимизации изображений - использование прогрессивной развертки. Это сказывается на размере файла с изображением в худшую сторону, но хорошо смотрится при загрузке файлом очень больших размеров. Разница вот в чем: при записи оптимизированных изображений в стандартном jpeg-формате их показ производится постепенно, горизонтальными линиями, и до получения всей картинки пользователь не может определить ее смысл. Если же грузится джипег-изображение, сохраненной в прогрессивном формате, то оно появляется сразу, но в очень грубой форме, а затем постепенно улучшается. Это позволяет посетителю сразу же оценить картинку и решить, нужна ли она ему. Прогрессивная развертка изображений поддерживается всеми браузерами, но не каждый графический редактор может оптимизировать изображения в таком формате. В Photo-Shop эта возможность скрывается за галочкой "Постепенно": если ее поставить, размер графического файла с изображением станет немного меньше, но отключится его прогрессивная развертка.

Оптимизация изображения JPEG с прогрессивной разверткой.

Оказывается, придуман метод оптимизации изображения с прогрессивной разверткой, который почти не увеличивает размер графического файла. В Фотошопе этот способ оптимизации картинок jpg-формата выставляется галочкой "Оптимизированное". При этом грубый прототип картинки строится особым образом, и не все браузеры его гарантированно поймут. Но ничего страшного! Не поймут - значит, будут выдавать изображение построчно, как обычно.

SEO-оптимизация изображения формата JPG. Способы оптимизации картинок JPEG

В завершении хочется добавить, что формат изображений JPEG ориентирован в основном на фотографии довольно-таки большого размера. Если требуется оптимизировать картинку небольшого объема (например, логотип), то всегда имеет преимущество формат GIF: графический файл получается меньшего размера, а сам рисунок, прошедший графическую оптимизацию - лучше по качеству.