Сегодня совершенно невозможно себе представить какой-либо веб-сайт без изображений! Графические элементы могут составлять едва ли не 100% контента развлекательных ресурсов, поэтому их оптимальное размещение и будет являться темой данной статьи.
Не секрет, что в настоящее время придумано уже большое количество графических форматов, предназначенных для различных целей. И чем лучше веб-мастер понимает эти цели, тем более оптимально он сможет использовать сильные стороны каждого формата.
Наибольшую популярность имеют форматы JPEG и PNG (GIF). Здесь намеренно объединены форматы GIF и PNG в один класс, чтобы показать их общее свойство в отличае от формата JPEG, а именно индексированные цвета и поддержка альфа-канала.
Вы можете прочитать подробнее с помощью чего быстро сжимать изображения, а пока разберёмся с особенностями форматов и для каких целей какой формат будет предпочтительнее.
Формат JPEG
Формат JPEG отлично подходит для цифровых фотографий. Основным критерием сжатия здесь является уровень компрессии (Compression), задаваемый в %. На примерах сжатия одного и того же изображения можно увидеть, что повышение уровня компрессии вызывает появление на изображениях так называемых «артефактов» — посторонних включений, «квадратиков» и т.д.
Лучше всего данный формат подходит для сжатия естественных фотографий.
Формат PNG/GIF
Оба эти алгоритма используют индексированные цвета и, соответственно, лучше сжимают изображения, в которых количество различных цветов минимально. Например, различные схемы, графики, условные знаки, флаги и т.д. Индексированные цвета можно объяснить значением палитры. Допустим, наше изображение нарисовано в графическом редакторе Paint всего четырьмя цветами — чёрным, белым, красным и синим. Такое изображение прекрасно должно сжаться алгоритмами GIF/PNG (причём, оказывается есть разница как ориентировано изображение). Основным критерием здесь служит количество цветов в палитре — чем меньше цветов, тем сильнее сожмётся. Если уменьшать количество цветов, то изображение начнёт выцветать и будет происходить замена цвета.Кроме того, данный формат поддерживает альфа-канал (прозрачность), поэтому можно создать изображение с прозрачным фоном. Причем надо заметить, что алгоритм PNG (PNG24) является более современным, чем GIF и рекомендуется отдавать приоритет ему, правда у GIF есть одно преимущество — возможность создавать анимацию.
Цифровые форматы
Данные форматы являются растровыми (точечными), существуют также и векторные форматы, которые значительно отличаются по своей структуре от растровых. Если в растровых форматах контуры изображений задаются точечно, то в векторых фигуры описываются формулами, что может значительно уменьшить занимаемое место. Например, если нужно нарисовать круг, то в точечном формате будет обозначен каждый пиксел изображения определённым образом. И чем больше круг, тем больше информации нужно закодировать. А в векторном формате будет указываться функция круга, координаты центра и радиус круга — всего лишь пара числовых значений!
Резюме
- Фотографии — JPEG
- Знаки, чертежи, схемы — PNG
- Анимация — GIF