Оптимизации изображений на сайте нужно уделять такое же большое внимание, как и оптимизации текстов.
Почему это важно?
Для поисковых роботов. Они считывают информацию о картинках, поэтому вы должны разместить ее так, чтобы машины могли ее правильно воспринимать.
- Для увеличения скорости загрузки страниц. Этот показатель является важным фактором ранжирования. К примеру, слишком большой вес изображений увеличивает время загрузки и может понизить ваш сайт в выдаче.
- Для дополнительного трафика. Правильное оформление изображений позволяет им высоко ранжироваться в поиске по картинкам, откуда приходит дополнительный трафик на сайт.
На курсе «Технический аудит сайта своими руками» мы на примерах покажем, как работать с изображениями на сайте, а про основные моменты, которые нужно учесть в оптимизации картинок, читайте в статье!
Давайте понятные названия картинкам
Название изображения должно соответствовать содержанию — при поиске картинок по запросу поисковики сканируют название загруженного файла. Если вы назвали назвали свое фото DSC4567.jpg, роботы никогда не поймут, что оно содержит. вместо этого указывайте буквенные названия. например, фото с дизайном ванной комнаты можно назвать Dizajn_vannoj_komnaty.jpg.
Делайте названия короткими
Опять же, помните, что названия мы создаем для роботов, а не для людей. Делайте их короткими и емкими и, по мере возможности, используйте в названии ключевые слова, по которым продвигаете страницу. Не используйте кириллицу— ее может не распознать Google, не все CMS ее поддерживают. А Яндекс умеет распознавать транслитерацию.
Заполняйте атрибуты title и alt
Текст, указанный в этих атрибутах, отображается при наведении курсора. Если картинка не загрузится, пользователь сможет хотя бы узнать ее содержание.
Используйте в атрибутах ключевые слова для пояснения содержания картинки роботам (не забываем о пользе для ранжирования). Рекомендуемый размер title – до 250 символов, alt – до 125 символов.
Правильно выбирайте формат
От выбранного формата зависит вес картинки. Тот самый показатель, который влияет на скорость загрузки самих изображений и страниц в целом.
- GIF – небольшой вес до 1 Мб, при сжатии качество сохраняется, доступна прозрачность и анимация, поддерживается всеми браузерами;
- JPEG – вес до 1 Мб, качество при сжатии теряется, прозрачности и анимации нет, поддерживается всеми браузерами;
- PNG – большой вес до 2 Мб, качество при сжатии сохраняется, анимации нет, прозрачность доступна, поддерживается всеми браузерами.
Еще несколько правил:
- для анимированных изображений подходит только GIF;
- если на картинке много мелких деталей, которые должны быть четко видны, выбирайте PNG;
- для обычных картинок, отображения картинок маленького размера в оптимальном качестве;
- для размещения больших изображений отдавайте предпочтение JPEG.
Сжимайте картинки с заботой о качестве
Чтобы страница с картинками грузилась быстрее, иногда нужно уменьшать вес изображений. При этом после сжатия картинка должна оставаться четкой.
Универсальная инструкция для сжатия без потери качества:
- выбрать формат JPEG;
- изменить размер изображения;
- снизить качество до 60-80 %.
При сжатии качество картинки может все же немного снизится. При правильной обработке разница в качестве при сжатии будет не видна. Используйте эти сервисы, чтобы потерю качества никто не заметил:
Можно изменить размер картинки в пикселях, чтобы уменьшить ее вес. Для этого вам пригодятся сервисы ниже:
После проделанных работ, измерьте скорость загрузки сайта. Отследить изменение этого показателя до и после сжатия картинок вам поможет Google PageSpeed Insights
Адаптируйте изображения к разным устройствам
Одинаковая картинка может по-разному отображаться на разных устройствах. Например, картинка одного размера помещается в экран на компьютере, на на экране смартфона видна только на половину или вообще занимает все пространство экрана. Думайте о кроссплатформенности.
Указывайте через атрибут srcset несколько вариантов одного изображения. Через запятую впишите названия своих изображений, указав тип отображения/размер экрана/ориентацию:
<img src="image.jpg" alt="image” srcset=“image.jpg 160w, image2.jpg 240w, image3.jpg 2x”>
Эта команда позволит браузеру автоматически выбирать подходящее изображение, когда страница с картинками будет открываться на том или ином устройстве.
Размещайте изображения на своем хостинге
Если на стороннем хостинге возникнут проблемы, картинка может отображаться неверно. Кроме того, картинка с другого сайта, вставленная по ссылке – это линк, который передает часть своего веса источнику.
Зачем нам помогать в продвижении другим ресурсам? Давайте думать о своем — максимально оптимизировать картинку и помещать ее на свой сайт.
В блоке «Работа с изображениями» на курсе «Технический аудит сайта своими руками» мы также разберем:
- Проверку атрибута ALT для изображений
- Проверку favicon на сайте
- SEO-оптимизацию логотипа
Да, оптимизация картинок — это всего лишь один раздел нашего обширного курса про технические составляющие SEO.
- Проводить анализ трафика;
- Работать с системами аналитики;
- Подключать сайты к справочникам;
- Понимать код сайта;
- Грамотно работать с коммерческими факторами продвижения.
Вот что вы узнаете все за 1 месяц онлайн-курса! Записывайтесь скорее — первое занятие начнется 15 февраля.