Распространенные примеры типов изображений в Интернете включают Гифка, JPG, а также PNG. Файлы SVG. Эти разные форматы предлагают веб-дизайнерам различные варианты оптимизации визуальной привлекательности веб-сайта.
GIF изображения
Используйте файлы GIF для изображений с небольшим фиксированным количеством цветов. Файлы GIF всегда уменьшаются до 256 уникальных цветов. Алгоритм сжатия для файлов GIF менее сложен, чем для файлов JPG, но при использовании с плоскими цветными изображениями и текстом он дает очень небольшие размеры файлов.
Формат GIF не подходит для фотографических изображений или изображений с градиентными цветами. Поскольку формат GIF имеет ограниченное количество цветов, градиенты и фотографии будут иметь полосы и пиксели при сохранении в виде файла GIF.
JPG изображения
Используйте изображения JPG для фотографий и других изображений с миллионами цветов. Он использует сложный алгоритм сжатия, который позволяет создавать меньшую графику, теряя часть качества изображения. Это называется сжатием с потерями, потому что часть информации изображения теряется при сжатии изображения.
Формат JPG не подходит для изображений с текстом, крупных однотонных блоков и простых форм с четкими краями. Это связано с тем, что при сжатии изображения текст, цвет или линии могут размываться, в результате чего изображение будет не таким резким, как при сохранении в другом формате.
PNG изображения
Формат PNG был разработан как замена формата GIF, когда выяснилось, что изображения GIF будут облагаться лицензионным платежом. Графика PNG имеет лучшую степень сжатия, чем изображения в формате GIF, что приводит к уменьшению размера изображений по сравнению с тем же файлом, сохраненным в формате GIF. Файлы PNG предлагают альфа-прозрачность, что означает, что у вас могут быть области ваших изображений, которые либо полностью прозрачны, либо даже используют диапазон альфа-прозрачности. Например, тень использует ряд эффектов прозрачности и подходит для PNG (или вы можете просто закончить нас, используя вместо этого тени CSS).
Изображения PNG, как и GIF, плохо подходят для фотографий. Можно обойти проблему полосатости, которая влияет на фотографии, сохраненные в виде файлов GIF с использованием истинных цветов, но это может привести к очень большим изображениям. Изображения PNG также плохо поддерживаются старыми мобильными телефонами и обычными телефонами.
SVG изображения
SVG - это масштабируемая векторная графика. В отличие от растровых форматов JPG, GIF и PNG, в этих файлах используются векторы для создания очень маленьких файлов, которые можно визуализировать любого размера без потери качества при увеличении размера файла. Они созданы для иллюстраций, таких как значки и даже логотипы.
Подготовка изображений для доставки в Интернет
Независимо от того, какой формат изображения вы используете, убедитесь, что все изображения на этом сайте подготовлен к веб-доставке. Слишком большие изображения могут замедлить работу сайта и повлиять на общую производительность. Чтобы бороться с этим, эти изображения должны быть оптимизированы чтобы найти баланс между высоким качеством и наименьшим возможным размером файла на этом уровне качества.
Выбор правильного формата изображений - это часть битвы, но также убедитесь, что вы подготовили эти файлы, - это следующий шаг в этом важном процессе веб-доставки.