Изображения привлекают посетителей на сайт, облегчают восприятие ими информации. Без картинок качество контента заметно снижается. Однако их использование связано с определенными сложностями: красивые картинки очень «тяжелые». А из-за этого ухудшается скорость загрузки интернет-страниц. Но снижение веса файлов с изображениями чревато потерей качества картинки. О том, как найти золотую середину в решении этой непростой, но очень важной задачи, какие технологии позволят добиться оптимального результата, мы расскажем в этой статье.
Какие форматы используют для создания сайта
Наиболее популярными форматами изображений для web-дизайна являются растровые JPG, JPEG, GIF, PNG. Технология предполагает использование пикселей, в которых хранится информация о цвете и прозрачности. Но растровые картинки при масштабировании заметно теряют в качестве.
Также дизайнеры активно используют векторные форматы, например, SVG. В таком случае информация об изображении хранится в математической конструкции, позволяющей преобразовывать данные о местоположении контрольных точек и соединяющих их линиях в единое целое, получая полноценные картинки. При увеличении векторных рисунков качество сохраняется на исходном уровне. Но и эти картинки перед загрузкой на сайт необходимо дорабатывать.
Оптимальный формат для небольших элементов (иконок)
GIF всегда использовался для получения:
- веб-изображений;
- анимированной графики для последующего внедрения на рекламные баннеры;
- e-mail-изображений;
- мемов.
Формат обеспечивает прозрачность и идеален для небольших иконок. Но надеяться на четкость изображения или возможность послойного редактирования не стоит.
SVG позволяет масштабировать картинку, сохраняя ее качество. Формат воспринимается почти всеми браузерами, любыми устройствами и стандартным текстовым редактором. При помощи SVG создают иконки, значки, мелкую векторную графику.
Формат для баннеров
Для баннеров рекомендуется использовать:
- CDR (CorelDRAW), который может содержать одновременно и векторную, и растровую графику;
- EPS, в котором чаще всего создают векторные изображения;
- растровый TIFF, обеспечивающий высококачественную графику.
Формат прочих изображений
JPEG идеален для загрузки в онлайн рисунков, графики и фотографий. Исходные файлы легко сжимаются. Но JPEG не предполагает послойное редактирование и не используется там, где требуется прозрачность. Аналогичными достоинствами и недостатками обладает и JPG, на долю которого приходится 3% всех изображений в сети. Но последний, в отличие от JPEG, совместим со старыми операционными системами. В остальном оба эти формата аналогичны.
PSD является универсальным инструментом. Здесь допускается послойное редактирование. В PSD возможно сочетание слоев, содержащих растровые и векторные изображения. При помощи этого формата можно даже сделать простенькую анимацию или короткий видеоклип.
Что такое формат WebP
WebP появился в 2010 г. в результате изысканий сотрудников Google. Формат использует принципиально новую технологию сжатия. В результате после обработки ухудшаются такие показатели как детализация и структура, но сохраняется четкость границ. По степени сжатия WebP превосходят PNG на 26%, а JPEG на 25-34%. Также формат от Google поддерживает прозрачность (альфа-канал).
Основная проблема WebP заключается в том, что его поддерживают только 3 браузера: Google Chrome, Opera и Firefox. Остальные веб-обозреватели этот формат не воспринимают. Но данный факт нельзя считать серьезным препятствием для дальнейшего распространения WebP, ведь на долю таких утилит приходится не более 20% аудитории.
С другой стороны, те, кто работают на конструкторе Tilda знают, что он автоматически конвертирует все изображения в WebP. Значит, зона влияния формата медленно, но верно расширяется.
Почему формат PNG для сайта — это зло
PNG обладает массой неоспоримых преимуществ. Он позволяет сжимать изображения без потери качества даже после многократного редактирования. Формат адекватно воспринимается любыми браузерами и устройствами.
С учетом богатства цветовой гаммы и прозрачности PNG подразделяется на 8- и 24-битную версии. Первая поддерживает 256 цветов, а последняя – 16 млн. Естественно 24-битная версия более востребована За счет альфа-прозрачности ее используют для создания:
- комбинированных изображений с объектами разной степени прозрачности;
- анимированных кнопок;
- иконок;
- css-спрайтов.
Но при всех своих достоинствах формат ограничен в применении:
- не все браузеры его поддерживают;
- есть проблемы с полноцветными изображениями;
- в одном файле нельзя сохранить несколько рисунков.
Но намного важнее то, что файлы PNG очень тяжелые. Из-за этого снижается скорость загрузки страниц, а это является одним из факторов, влияющих на ранжирование сайта.
Рекомендации и выводы
Все форматы хороши по-своему. Создавая сайт, необходимо учитывать его особенности. И уже исходя из этого выбирать способ оптимизации изображений. Наилучший результат достигается, в том числе, за счет разумного сочетания различных форматов.