Существует ряд форматов изображений, которые можно использовать на веб-страницах. Некоторые общие примеры - 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
SVG означает масштабируемую векторную графику. В отличие от растровых форматов, найденных в JPG, GIF и PNG, эти файлы используют векторы для создания очень маленьких файлов, которые можно отображать на любом размере без потери качества увеличения размера файла. Они созданы для иллюстраций, таких как значки и даже логотипы.
Подготовка изображений для веб-доставки
Независимо от того, какой формат изображения вы используете, и ваш веб-сайт обязательно использует несколько разных форматов на всех своих страницах, вам необходимо убедиться, что все изображения на этом сайте подготовлены для веб-доставки. Слишком большие изображения могут привести к медленному запуску сайта и влиянию общей производительности. Чтобы бороться с этим, эти изображения должны быть оптимизированы, чтобы найти баланс между высоким качеством и минимальным размером файла, доступным на этом уровне качества.
Выбор правильного формата изображений является частью битвы, но также убедитесь, что вы подготовили эти файлы, это следующий шаг в этом важном процессе веб-доставки.
Оригинальная статья Дженнифер Кырнин. Под редакцией Джереми Жирарда.
