Формат JPEG

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

Первый формат —JPEG. Этот формат хорошо подходит для фотографий и картин и плохо подходит для схем, чертежей, текста и графики.

При сохранении изображения в формат JPEG можно задавать уровень качества. Это позволяет добиваться снижения веса файла при достаточно хорошем качестве изображения.

Однако, если установить уровень качества слишком низким, то появятся артефакты.

JPEG не поддерживает прозрачность, поэтому изображение в формате JPEG — это всегда прямоугольник. Можно имитировать прозрачность, если в графическом редакторе задать изображению такой же цвет фона, как и у контейнера фотографии.

Используйте JPEG для размещения фото с наилучшим соотношением «размер файла»/«качество».

Формат PNG-8

На самом деле, форматPNGодин. А PNG-8 и PNG-24 это его подтипы, а также режимы сохранения в Photoshop. Мы не будем глубоко вдаваться в детали, а разберем типовые особенности.

PNG-8 по характеристикам схож с форматом GIF. Он хорошо подходит для схем, чертежей, графиков и текста, а также изображений, где мало цветов. Максимальное количество цветов — 256.

PNG-8, как и GIF, поддерживает прозрачность. Это означает, что пиксель либо полностью прозрачный, либо полностью непрозрачный.

Если нужно сделать изображение с прозрачностью, то лучше задавать обводку такую же, как цвет фона. В фотошопе при сохранении обводка называется «Mate». Без обводки картинка будет выглядеть «обкусанной». Если фон неоднородный (градиент, 3 блок в мини-браузере), то PNG-8 с обводкой будет смотреться плохо.

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

Формат PNG-24

PNG-24 — отличнейший формат. Он хорошо подходит и для схем-чертежей-графиков-текста, и для сложных многоцветных изображений, т.к. поддерживает практически неограниченное количество цветов.

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

Самый главный плюс PNG-24 — это полноценная поддержка полупрозрачности, которой нет ни в одном другом формате. Поэтому в веб-разработке при вёрстке сложных фонов, графических элементов со сложными тенями и так далее альтернативы PNG-24 просто нет.

Давным-давно в IE была проблема с поддержкой полупрозрачных PNG, но в более поздних версиях IE (8+), таких проблем нет.

Сравните котика-PNG-8 с обводкой из предыдущего задания и котика-PNG-24 из этого задания. Особенно то, как выглядят их края на желтом блоке и блоке с градиентом.

Некоторые верстальщики перестают использовать PNG-8 и используют только PNG-24.

Формат GIF

Наверное, единственная причина использовать GIF заключается в том, что он поддерживает анимированные изображения.

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

Спрайты

Спрайт — это одно большое изображение, в котором содержится много маленьких, как бы карта изображений. Вот живойпример(эта же картинка выведена на тёмном фоне внизу мини-браузера), который мы будем использовать в задании.

Спрайты используются, чтобы снизить количество запросов на сервер. Каждая маленькая картинка — это отдельный запрос, а чем меньше запросов, тем лучше. Поэтому маленькие картинки «склеивают» в одну большую.

Части спрайта отображают в элементах с небольшими размерами. Такому элементу задают картинку-спрайт в качестве фона и смещают её таким образом, чтобы была видна нужная её часть.

В спрайты обычно объединяют иконки и различные мелкие декоративные изображения. Кстати, есть сервисы для быстрого создания спрайтов и генерации CSS-кода для них, например,SpritePad.