Изображения для сайта — знакомимся подробнее

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

Для нас, простых обывателей, формат изображений — это последние буковки после точки: .jpg, .png, .psd и т. д…. 

Форматы бывают растровые и векторные.

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

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

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

Основные растровые форматы (по алфавиту, не в порядке приоритета): BMP, GIF, ICO, JPEG, PSD, PNG, TGA, TIFF.

В этой заметке я рассмотрю только те форматы, которые используются на сайтах.

JPEG (JPG, Joint Photographic Experts Group)  — самый популярный растровый формат. Вам он знаком в первую очередь по фотографиям — они хранятся в этом формате. Он приспособлен для сжатия фотографий и картин с плавными переходами яркости и цвета. Картинки, сохраненные в этом формате, весят мало (по сравнению с изображениями с теми же размерами, но другого формата), поэтому он отлично подходит для сайтов. Однако, если вы попробуете сохранить текст или схемы (где используются контрастные цвета с резкими переходами) в формате JPEG, то заметите, что картинка становится нечеткой, как будто «грязной». Для сохранения таких изображений используются другие растровые форматы. 

PNG(Portable Network Graphics) —  спроектирован для замены устаревшего и более простого формата GIF, а также, в некоторой степени, для замены значительно более сложного формата TIFF. С 1996 года PNG был рекомендован в качестве полноправного сетевого формата. В целом можно сказать так: если вас не устраивает качество картинки в JPEG, используйте PNG. Вес файла PNG больше, но четкость изображения выше. Кроме того формат PNG поддерживает прозрачность, что незаменимо в веб-дизайне. 

GIF (Graphics Interchange Format)  — как уже было выше сказано, устаревший формат. Пожалуй, единственное его преимущество перед PNG — это анимация.

ICO (Windows icon) — растровый формат, разработанный корпорацией Microsoft для хранения значков файлов. Один файл формата ICO содержит несколько значков разного размера и цветности, чаще всего это квадратные изображения размерами 16х16, 32х32 и 48х48 пикселов. Картинки в таком формате используются для создания значка сайта (favicon). Например, открыв сайт, вы видите favicon на вкладке браузера. Сейчас браузеры поддерживаются favicon и других форматов.

Просмотрено (1134)