Мы здесь

Москва

119017, г. Москва, Малый Толмачевский пер., д.4 стр.1, офис 34

Звоните: Пн–Пт, с 9 до 18

+7 (495) 215-54-99

отправить заявку
Главная » Статьи о создании сайтов » Зачем и как сжимать картинки на сайте?
Зачем и как сжимать картинки на сайте?
Просмотры: 447
Публикация: 23 Июля 2018
Прочтение ~ 12 мин.
Сложность: Продвинутый

Зачем и как сжимать картинки на сайте?

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

Почему так важна оптимизация картинок

Изображения — важнейшая часть любой веб-страницы. Часто у пользователя нет времени для вдумчивого чтения: перед тем, как ознакомиться с текстом подробнее, он бегло просматривает страницу, пытаясь составить предварительное впечатление. Первое, что бросается в глаза — картинки.

Графические элементы нравятся не только пользователям, но и поисковым роботам. После того, как в SERP Google появился расширенный сниппет, при помощи изображений стало проще попасть в топ выдачи. Если картинка демонстрируется вместе со ссылкой, на сайт будет переходить больше людей по сравнению с конкурентами. Использование графических элементов увеличивает видимость и узнаваемость веб-ресурса.

Пользователи оценивают изображения исходя из таких параметров:

  • скорость загрузки;
  • качество;
  • соответствие тематике;
  • информативность.

С точки зрения SEO важны и технические параметры изображений. То, что для нас выглядит как обычная веб-страница, на самом деле — набор из HTML-разметки и CSS-кода, скриптов JS, файлов изображений и видео. Каждый из компонентов занимает физическое место на сервере, имеет определенный вес. Чем больше вес компонента, тем больше места для него необходимо, и тем дольше будет загружаться страница.

Изображения — один из самых «тяжелых», с точки зрения веса, компонентов. Оптимизация картинок приводит к существенному уменьшению суммарного веса сайта — до 80%.

Что такое оптимизация изображения? Это такой вид обработки, который приводит к снижению веса за счет незначительного ухудшения качества. В процессе оптимизации удаляют метаданные, информацию о дате и месте съемки, наименовании устройства — то, что не нужно рядовому пользователю, но при этом влияет на «вес» картинки. Также существуют специальные программы, которые помогут сжать изображение без ущерба его восприятию. алгоритмы анализируют, какие графические элементы можно удалить без значительного ущерба визуальному восприятию изображения.

Оптимизация изображений дает следующие результаты:

  • ускоряет загрузку сайта;
  • улучшает поведенческие факторы;
  • экономит место на сервере;
  • снижает нагрузку на сервер;
  • увеличивает конверсию страниц;
  • улучшает позиции сайта в поисковой выдаче.

Насколько нужно сжимать картинки? Считается, что для нормальной работы сайта вес графических элементов не должен превышать 500 Кб. Еще лучше, если он будет порядка 100 Кб: страница будет быстро загружаться даже при низкой скорости подключения к интернету. Фото весом 1 Мб и более сильно отягощают сайт, приводя к потере части пользователей.

Какими должны быть картинки

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

Поисковые роботы распознают форматы JPEG, GIF, PNG, BMP, WebP, SVG. Рекомендованы следующие из них:

  • JPEG — стандарт для фото;
  • PNG — для графики;
  • SVG — для векторов.

WebP и JPEG-XR — новые форматы с малым весом. Недостаток их в том, что пока их распознают только некоторые веб-браузеры. С форматом WebP работает Opera, Chrome, Android, с JPEG-XR — Internet Explorer и Microsoft Edge.

Краулеры (роботы) Яндекса распознают форматы WebP, JPEG, GIF и PNG. Но важен не только формат. Если графический элемент загружается на веб-страницу не вручную, а с помощью скрипта, робот Яндекса его не заметит.

Качество графических элементов должно устраивать и пользователя, и краулера Яндекса или Google. Следует найти баланс — оптимальное соотношение между весом и количеством визуальной информации. Изображение должно быть информативным, четким, но не слишком «тяжелым».

Картинка также считается некачественной, если она:

  • не соответствует описанию;
  • находится возле текста, не имеющего к ней отношения.

Если это возможно, откажитесь от стандартных стоковых фото: большинство из них не несет никакого смысла. Картинка на сайте должна выполнять роль иллюстрации — то есть дополнять текст, служить примером или пояснением, передавать эмоции. Для этой цели подойдут собственные фотографии, инфографика, схемы и диаграммы.

Размер графического элемента — то, что в первую очередь влияет на скорость загрузки страницы и, следовательно, на позиции в поисковой выдаче. Поэтому с крупными картинками следует быть аккуратнее. Создавайте картинки в том размере, в котором планируете их размещать, не более. В CSS можно сразу указать параметры изображения: так браузеру будет проще сканировать контент.

Не забудьте про пользователей с дисплеями Retina, которые применяются на всех современных девайсах Apple: технология обеспечивает высокое разрешение и детализацию, поэтому более требовательна к качеству изображений. Чтобы избежать потери качества у этой категории пользователей, используйте графические элементы в размере 2х.

Качество изображений можно проверить следующими инструментами

  • Frog SEO Spider. Позволяет узнать вес каждого изображения и найти картинки без alt.
  • PageSpeed Insights. В блоке «Настройте подходящий размер изображений» выпадает раскрывающийся список с проблемными изображениями, имеющими неоптимальный размер.
  • Netpeak Spider. Подходит для массового поиска битых изображений на сайте.
  • PageSpeed Insights — онлайн-инструмент, который также анализирует размер и качество изображений.

PageSpeed Insights подходит для проверки изображений не только на десктопной версии сайта, но и на мобильной.

Сервис Pingdom позволяет увидеть, какой процент от общего веса страницы занимают изображения:

Также обратите внимание на интересную методику, предложенную Google PageSpeed Insights. Ее суть — создание нескольких версий каждого изображения, чтобы браузер в каждом отдельном случае в зависимости от типа устройства пользователя и личных настроек выбирал и показывал оптимальный вариант картинки. Однако эта технология не идеальна — при ее использовании увеличивается расход места на серверах и возникает необходимость в написании дополнительного HTML-кода.

Еще один полезный лайфхак — Lazy loading («ленивая загрузка» изображений). В этом случае картинки загружаются на устройстве пользователя не синхронно с остальным содержимым, а по мере необходимости — например когда посетитель скроллит страницу на смартфоне или кликает на интересующее его изображение. Также возможна фоновая загрузка графического контента, когда пользователь загрузил тяжелый документ (чертеж, схему и прочее) и оставил его открытым.

Ленивая загрузка функционирует на технологии AJAX (Asynchronous JavaScript and XML), поддерживает формат IMG и встроенные фреймы (iFrame), поскольку в них предусмотрен указывающий на источник атрибут src.

Изображения нужно правильно привязать к сайту. Что это значит? Файлы должны храниться на том же домене или одном из поддоменов вашего сайта. В противном случае пользователи, которые пользуются поиском по картинкам, не увидят ваш сайт. Они будут перенаправлены на адрес того веб-ресурса, на котором хранится контент.

Как уменьшить вес изображения без потерь

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

Онлайн-сервис Kraken

Работает с основными форматами изображений — JPEG, PNG, GIF. Он позволяет:

  • оптимизировать один или несколько файлов;
  • сжимать картинки без снижения качества и с потерями;
  • уменьшать вес файлов до 80%.

Кроме автоматического сжатия, есть также режим ручной тонкой настройки: пользователь самостоятельно выбирает, какую информацию следует удалить. Предусмотрены плагины для WordPress и Magento, функция изменения размера изображений, API для веб-ресурсов.

Веб-интерфейс Kraken имеет платную и бесплатную версии. В бесплатной ограничен размер файлов, которые подвергаются обработке: они должны быть не более 1 Мб. В платной — до 16 Мб.

Kraken подходит для оптимизации изображений, размещенных на веб-ресурсе. Для этого нужно ввести адрес сайта, и веб-интерфейс сформирует архив с оптимизированными изображениями.

Онлайн-сервис Compressor

Бесплатный онлайн-сервис, поддерживающий работу с 4 форматами изображений — JPEG, PNG, GIF, SVG. Работает с файлами, исходный вес которых не превышает 10 Мб.

Доступные варианты сжатия зависят от формата изображения:

  • JPEG, PNG — сжатие с потерей качества и без потери;
  • GIF, SVG — сжатие только с потерей качества.

Сервис оптимизирует изображения, уменьшая их вес до 90%. Из недостатков —невозможность массовой загрузки файлов.

TinyPNG

Сервисы для быстрой обработки изображений в соответствующих форматах. Условно бесплатны: без пополнения счета можно оптимизировать до 20 файлов весом до 5 Мб. Сжатие — с потерей качества. Разница с изначальным весом изображения может достигать 70%.

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

Онлайн-сервис Optimizilla

Работает с двумя популярными форматами — JPEG и PNG. Сжимает картинки без ухудшения качества и с потерями, при этом невооруженным глазом заметить изменения трудно. Перед внесением изменений можно воспользоваться предпросмотром и установить тонкие настройки.

Сервис позволяет обработать до 20 изображений за раз. Есть ограничения на хранение результата — его можно скачать только в течение часа.

JPEGmini: онлайн-сервис и ПО

Онлайн-сервис имеет минималистичный интерфейс и ограниченный набор функций. Здесь можно обработать изображения весом до 10 Мб, уменьшив размер до 80%. Для массового сжатия изображений необходимо пройти процедуру регистрации.

Особенности:

  • обработка только одного формата — JPEG;
  • функция предпросмотра;
  • тонкая настройка качества;
  • скачивание готовых файлов только в течение часа.

Десктопная версия — платная. За 99 долларов вы получаете возможность одновременно обрабатывать любое количество файлов, в том числе весом до 128 Мб, и высокую скорость сжатия.

ImageOptim — программа для Mac, позволяющая оптимизировать фотографии в популярных форматах — JPEG, SVG, GIF и PNG. Отличается простотой и удобством интерфейса:

  • по умолчанию сжимает файлы без потерь;
  • способна обрабатывать несколько файлов одновременно;
  • повышает безопасность публикуемого контента.

Принцип работы программного обеспечения состоит в удалении метаданных (информации о камере, местоположении съемки), за счет чего вес графики становится меньше.

Программы FileOptimizer, pngquant, Online interface — аналоги ImageOptim для ОС Windows. Работают по тому же принципу: удаляют лишнюю информацию, уменьшая вес изображений. Оптимизация происходит без потерь.

Утилита Gzip предназначена для восстановления и сжатия разных файлов, включая популярный формат JPEG. Происходит это следующим образом. Допустим, пользователь хочет открыть страницу весом 100 Кб. В режиме реального времени она проходит процедуру сжатия на сервере, в этом виде передается в браузер, который распаковывает страницу и демонстрирует пользователю. Данную технологию поддерживают все существующие в настоящий момент браузеры.

PageSpeed — модуль, работающий на Nginx и Apache. Он сжимает информацию на уровне сервера. Модуль удобно использовать как вместе с другими инструментами Google, так и отдельно.

Как еще оптимизировать изображения на странице

Чтобы картинка нравилась краулерам, она должна соответствовать ряду требований.

Название изображения должно быть информативным: это позволяет поисковой системе узнать его содержание.

Используйте только латинские буквы, цифры и нижнее подчеркивание. Лучше, если это будет не абстрактный набор символов, а слова: вместо 232hjkjjkt.jpg — green_apple.jpg.

Можете использовать в названиях картинок максимально релевантные ключевые слова. Например, если у вас есть страница с информацией о телефоне Samsung Galaxy, то изображение может называться Samsung_Galaxy_photo.jpg.

Если на сайте есть несколько схожих по смыслу картинок, разместите их в одной папке. Это будет удобно с практической точки зрения: при необходимости будет легко найти нужный файл. Используйте разумное количество директорий — например, объедините файлы с фотографиями смартфонов одного производителя в папке example.com/images/samsung/smartphones.jpg

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

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

Используйте внешние анкорные ссылки: они также учитываются при ранжировании. Важно, чтобы текст анкора соответствовал содержанию изображения.

К примеру, вы создаете ссылку на страницу с фото ленивых котиков. Анкор к ней стоит так и назвать: «Фото ленивых котиков».

Alt — метатег, который описывает то, что изображено на картинке. Он выполняет несколько функций:

  • Слабовидящие пользователи смогут узнать, что находится на картинке, при помощи скринридера: специальная программа озвучит эту информацию.
  • При низкой скорости загрузки пользователь сначала увидит текст, поясняющий, что изображено на картинке.
  • Поисковые роботы смогут правильно проиндексировать изображение. Эта информация будет использована при поиске изображений, соответствующих запросу пользователя.

Описание должно быть информативным, кратким, по возможности — содержащим релевантные ключевые запросы. Как правило, его размер ограничен 125 символами.

Избегайте переспама: не используйте однокоренные слова в одном описании.

На сайте есть основная карта? Отлично, добавьте к ней карту изображений. Действуйте следующим образом:

  1. Внутри общей карты sitemap.xml разместите два файла: один — стандартная карта, например, sitemap-pages.xml, второй — карта изображений sitemap-images.xml.
  2. В файл robots.txt для бота Яндекса пропишите только строку для карты со страницами сайта. А для бота Гугл — строку для общей карты sitemap.xml.

Если предпочитаете продвижение только в Google, то все еще проще: достаточно создать общую карту и карту изображений. В файле robots.txt прописывается общая карта.

Микроразметка изображений в Schema.org выполняется с помощью ImageObject — это специальные теги к графическим элементам. Они помогают поисковым роботам распознавать картинки и отображать их соответствующим образом.

Изображения должны быть не только качественными, но и уникальными. Поисковые системы умеют распознавать уникальность и текста, и картинок, так как стремятся показывать пользователям более разнообразную информацию.

Для продвижения в Яндекс удобно использовать сервис Tineye. Он определит, было ли уже размещено изображение, где и в каком формате.

Для продвижения в Google можно воспользоваться поиском по картинкам. Если в выдаче нет такого же точно изображения — только похожие, оно считается уникальным. Если картинка не уникальна, в правой части экрана будут размещены копии разного размера.

Где искать картинки

Идеальный вариант — создавать графические элементы самому: привлекать дизайнеров, художников, фотографов. Если бюджет ограничен, можно найти бесплатные картинки, но они должны быть легальными.

Простой и доступный способ — воспользоваться поисковой выдачей. Но не все картинки, которые попадут в выдачу, можно использовать без ограничений.

Действуйте так: нажмите «Инструменты» → «Права использования» → «Коммерческая и другие лицензии».

Выдача существенно уменьшится, но зато изображения можно будет использовать без каких-либо санкций.

Фотобанки и фотостоки — прекрасный источник бесплатных фотографий, который нужно использовать с умом. Но убедитесь, что найденное изображение разрешено использовать в коммерческих целях.

Не ограничивайтесь найденными файлами: их можно менять в любом фоторедакторе. Для быстрой обработки изображений удобно использовать сервис Canva: у него есть и онлайн-версия, и мобильное приложение. Сервис позволяет изменить параметры яркости, добавить графические элементы, рамки, надписи. Canva условно бесплатна: после внесения оплаты количество доступных функций увеличится, но можно довольствоваться и бесплатным функционалом.

На площадке можно найти немало интересного и оригинального контента. Более того, пользователи часто дают права на его распространение, так что это абсолютно легально.

Для поиска картинок установите плагин Reddit Enhancement Suite, откройте страницу и найдите нужный раздел (на английском). Используйте сортировку — например, «Топ за все время», и выбирайте изображения в полном размере.

Что важно запомнить

От первого впечатления зависит, останется ли пользователь на вашем сайте. Каждая страница должна выглядеть привлекательно и при этом быстро загружаться. Решить эту задачу можно при помощи правильного подбора и размещения изображений, а также эффективной оптимизации.

За картинки не обязательно платить: если потратить немного времени, вы легко найдете достаточное количество на бесплатных ресурсах. Для сжатия изображений можно использовать множество инструментов и способов, включая удобные онлайн-сервисы.

Качественные графические элементы понравятся не только пользователям, но и роботам Яндекс и Google, что улучшит позиции вашего сайта в поисковых системах.

237
https://blog.aventon.ru/szhatie-kartinok-na-saite

Ваш вопрос или комментарий

Авентон https://aventon.ru/img/logo.png
Малый Толмачевский пер., д.4 стр.1, офис 34 119017 Москва, Россия
+74952155499, web@aventon.ru