Использование форматов JPG, GIF, PNG и SVG для Интернета

Существует несколько форматов изображений, которые можно использовать на веб-страницах. Некоторыми распространенными примерами являются GIF, JPG и PNG. Файлы SVG также обычно используются на веб-сайтах сегодня, предоставляя веб-дизайнерам еще один вариант для онлайн-изображений.

GIF изображения

Используйте GIF-файлы для изображений с небольшим фиксированным количеством цветов. GIF-файлы всегда уменьшены до 256 уникальных цветов. Алгоритм сжатия для файлов GIF менее сложен, чем для файлов JPG, но при использовании с плоскими цветными изображениями и текстом он создает файлы очень маленьких размеров.

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

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

JPG изображения

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

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

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

PNG изображения

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

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

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

SVG Images

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

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

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

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

Оригинальная статья Дженнифер Кирнин. Под редакцией Джереми Жирар.

Ссылка на основную публикацию