Оптимизация графики

Анализ значимости изображений сайта и их сжатие

Оптимизация графики

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

Как это работает?

При создании и сжатии графики для сайтов используется три основных формата изображений. У каждого из этих форматов есть свои преимущества и недостатки, использовать только один из них на сайте вряд ли будет правильным.

  • Gif. Самый "взрослый" формат из используемых. Работает на благо интернета, с 1987 года. Использует всего 256 цветов. Позволяет создавать анимацию и поддерживает прозрачность, именно поэтому долгое время и был востребован в дизайне сайтов. В настоящее время используется все реже, так как технологии не стоят на месте, и найдено множество способов замены его возможностей. Отлично подходит для сжатия изображений состоящий из однородных заливок, включающих в себя малое количество цветов и создания простых анимационных иконок.
  • Jpeg. Крайне часто используемый растровый формат изображений. Родился в далеком 1991 году, идеально подходит для сжатия фотографических изображений содержащих в себе большое количество цветов и переходов. То есть если вам нужно разместить на странице фотографию с минимальными потерями в качестве и максимально возможным сжатием, jpeg подходит как нельзя лучше.
  • Png. Более "молодой" формат изображений, опубликованный в 1996 году. В основном родился с целью замены устаревшего gif, поддерживает прозрачности и полупрозрачности. Стал отличным вариантом для сжатия изображений включающих в себя текст, плавные градиентные заливки, схемы и чертежи. Полноценной заменой gif не стал, по причине отсутствия возможности сохранения анимации.
  • Человек часто не читает и не останавливает свое внимание на тексте, обычно он «сканирует» страницы. Зачастую обращает внимание на графические элементы. На основе такого поведения поисковые системы получили ряд критериев, по которым анализируют изображения. Они сводятся к улучшению качества контента в результатах поиска и удовлетворению запросов пользователя. Поэтому кроме наличия изображений на сайте, важно, чтобы картинки быстро загружались, были привлекательными, информативными и качественными.

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

    Что нужно знать?

    У каждого формата есть свои достоинства и недостатки. Векторный формат идеально подходит для изображений из простых геометрических фигур (например, логотипов, текста, значков и т. д.). Они остаются четкими при любом разрешении и масштабе, поэтому используйте этот формат для больших экранов и ресурсов, которые должны быть показаны в разных размерах.

    Однако векторные форматы не подходят для сложных изображений (например, для фотографий). SVG-разметки для описания всех фигур может стать слишком много, но полученное изображение все равно будет выглядеть нереалистично. В этом случае вам стоит использовать растровый формат изображений, например GIF, PNG, JPEG или новые форматы JPEG-XR и WebP.

    Качество растровых изображений зависит от разрешения и масштаба: при увеличении оно становится размытым и распадается на пиксели. В результате вам может понадобиться сохранить несколько версий растрового изображения в разных разрешениях.

    Что в итоге?

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

    Несмотря на то, что формат WebP появился в 2010, он все еще очень новый формат, который не так известен, как JPG и PNG. Тем не менее, веб у этого формата в крови: он был специально спроектирован для интернета. WebP – формат изображений с открытым исходным кодом, разработанный Google. Ключевые особенности: «WebP – современный формат изображений в интернете, обеспечивающий превосходное сжатие как с потерями, так и без потерь качества.

    Задайте свой вопрос

    Задайте свой вопрос

    Если у вас остались вопросы, вы можете: