Тип файла изображения (фото, график, схема, рисунок) сохраняются в определнных форматах файлов изображений. Формат (тип) файла - это информация, хранящаяся в файле в упорядоченном виде, на основе которой осуществляется отображение картинки (фото) в браузере пользователя.
Графические изображения могут быть растровыми или векторными.
Векторная и растровая графика
Векторная графика – отображает данные в виде графики на основе математического описания множества элементарных обьектов (точка, прямоугольник, линия, кривая, эллипс, окружность, многоугольник) из которых состоит изображения. Типы файлов CDR, AI, PDF, PSD. На веб сайтах возможно применение векторной графики через рисование обьектов в JavaScript или в стандарте HTML5 но эти способы пока мало распространены ввиду их трудоемкости.
Растровая графика – это хранение в файле информации о каждом пикселе изображения и в браузер пользователю выводится изображение попиксельно. Достоинство растровой графики в ее простоте и наглядности, есть возможность выводить изображения любой формы и цвета. Форматы файлов JPG, JPEG, PNG, GIF, WebP, TIFF, ICO, PCX, PICT, RAW. На веб сайтах возможно применение растровой графики в форматах JPG/JPEG, PNG, GIF.
Применение растровой графики на веб-сайте
JPG/JPEG – применяется для фото, многоцветных изображений с переходами цветов. Нет возможности прозрачного фона. Очень хорошо сжимается размер файла при уменьшении качества изображения.
PNG - применяется для фото, графиков, схем. Есть возможность прозрачного фона. Имеется возможность уменьшать количество цветов в файле что сокращает размер файла. Есть возможность анимации в файле.
GIF – применяется для графиков, схем, таблиц. Есть возможность прозрачного фона и анимации в файле. Имеется возможность уменьшать количество используемых цветов что сокращает размер файла. Не рекомендуется для фото, изображений с плавными переходами цветов так как получаются очень большие размеры файла.
WebP - тип файла для изображений и фото был представлен компанией Google в 2010 году. Назначение формата WebP - сохранение фото лучше чем JPG или PNG. То есть фото в браузере выглядит так же качественно как в JPEG и PNG, но файлы WebP меньше размером соответственно быстрее передаются по сети. WebP может сжимать изображения с потерями, так и без потерь. Минус - формат WebP несовместим с некоторыми браузерами.
Как выбрать формат изображения для сайта?
Вот несколько простых правил для выбора типа формата изображений
- нужен прозрачный фон - то берем формат png или gif;
- нужна фотография на прозрачном фоне – берем формат PNG;
- нужен график на сплошном фоне - то берем формат png или gif;
- фото - используем формат jpg.
Что не нужно делать с изображениями?
Не применять изображения в котором содержится текст тогда, когда текст можно написать в веб-странице.
Заключение
Сайт должен быстро загружаться, а использование изображений должно быть продумано. Веб-сайт содержащий большое количество картинок с текстом - это неудачный сайт, так как сильно замедляет просмотр пользователю.
Интересный момент: На веб-сайтах есть возможность применить векторную графику через рисование обьектов в JavaScript или в стандарте HTML5, но эти способы пока мало распространены ввиду их трудоемкости.