Как сделать сайт

Оптимизация картинок онлайн: 10 Критически важных советов

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

Оптимизация картинок онлайн

Большие, недостаточно оптимизированные изображения замедляют скорость загрузки сайта и уводят людей с вашего интернет-магазина. Исследования показывают, что если на сайте картинки загружается медленнее, чем ожидалось, то более 45% посетителей признают, что они с меньшей вероятностью совершат покупку.

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

Вы когда-нибудь задавали себе эти вопросы?: 

  • Почему я не могу найти свои изображения в Гугл картинках?
  • Стоит ли мне прописывать атрибуты alt?
  • Какая разница между форматами JPEG, GIF и PNG? И какой из них мне стоит использовать?

Что такое оптимизация изображений?

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

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

  • Размер файла изображения (JPEG, PNG или WEBP);
  • Уровень сжатия;
  • Высота и ширина изображения;
оптимизация картинок для сайта

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

Оптимизация картинок для сайта: Зачем мы это делаем?

Изображения вносят наибольший вклад в общий размер страницы, что замедляет загрузку страниц. Данные из HTTP-архива показывают, что не оптимизированные изображения составляют в среднем 75% от общего веса веб-страницы. Это может отрицательно сказаться на производительности вашего сайта.

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

Повышение скорость веб-сайта

Оптимизация изображений предназначена для ускорения загрузки веб-страниц. Они создают лучший опыт просмотра для покупателей. Если скорость загрузки страницы составляет всего две секунды, показатель отказов может увеличиться на 103%.

Скорость страницы — это скорость загрузки содержимого на вашей странице. Его часто описывают так:

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

Google предположил, что скорость сайта является одним из сигналов, используемых его алгоритмом для ранжирования страниц. Исследование Moz показало, что Google может специально измерять время до первого байта, когда учитывает скорость страницы. Медленная страница означает, что поисковые системы сканируют меньше страниц с их бюджетом сканирования, что может негативно повлиять на ваше индексирование.

Оптимизация картинок онлайн: Лучший опыт просмотра

Скорость страницы важна для впечатлений посетителей. Люди могут обнаружить задержки до 1/10 секунды. Все, что длиннее, не кажется «мгновенным». Задержки в одну секунду достаточно, чтобы прервать мыслительный процесс человека.

BBC обнаружила, что за каждую дополнительную секунду времени загрузки, со страницы уходят 10% пользователей. 

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

Улучшена производительность поиска

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

Более того, визуальный поиск становится все более важным. Около 62% потребителей поколения Z и миллениалов хотят визуального поиска больше, чем любую другую новую технологию.

Теперь давайте рассмотрим несколько техник, которые помогут оптимизировать картинки на вашем сайте:

Оптимизация картинок для сайта: Краткие и прямые названия

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

Давайте для примера возьмем данное изображение:

оптимизация картинок для сайта онлайн

Читайте также: Как научиться делать сайты с нуля: 10 Советов

Конечно можно использовать название по умолчанию FGVGD11.jpg. Но лучше его переименовать и назвать изображение Tesla-Model-3-Red.jpg. 

Просто поставьте себя на место вашего клиента и задайте себе вопрос: «А какие ключевые слова они используют для поиска вашего продукта?». Также воспользуйтесь такими сервисами, как Yandex Wordstat или Google Keyword Planner. Они помогут вам найти ключевые слова. Их вы сможете использовать для названия ваших изображений.

SEO оптимизация картинок: Добавьте атрибуты alt

Атрибут alt предоставляет альтернативную информацию для изображения, если пользователь по какой-либо причине не может его просмотреть. Например, из-за медленного соединения, ошибки в атрибуте src или если пользователь использует программу чтения с экрана.

Если навести мышку на изображение, то вы можете увидеть текст атрибута alt. Конечно тут все будет зависеть от настроек вашего браузера.

Атрибуты alt также поднимают ценность вашего веб-ресурса в глазах поисковиков. И добавление в атрибуты alt ключевых слов, может повысить рейтинг вашего сайта. Кроме того, их добавление, это один из лучших способов добавить изображение вашего продукта в Гугл картинки.

Основные правила для атрибутов alt:

  • Охарактеризуйте ваши картинки простыми словами. Точно так же как вы делали с их названиями; 
  • Если у ваших товаров есть серийные номера или маркировки, то обязательно используйте их в атрибутах alt;
  • Не используйте слишком длинные ключевики. Например, alt = «купить форд мустанг по лучшей цене дешево сейчас»;
  • Периодически проверяйте у всех ли картинок на вашем сайте прописаны атрибуты alt. Для этого просто просмотрите исходный код ваших веб-страниц.
сео оптимизация картинок

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

Выбирайте соответствующие размеры для картинок и ракурсы

Как правило, на сайтах принято показывать продукт с разных сторон. Давайте опять вернемся к примеру с Tesla, вряд ли вы будете показывать один снимок. Тем более если это касается продажи автомобиля. Скорее всего вы еще сделаете изображения:

  • Салона;
  • Колес;
  • Вид спереди;
  • Вид сзади и тд.

И самое лучшее что вы можете сделать, это заполнить для каждого из изображений атрибуты alt. Для этого используйте для них уникальные названия. Например, tesla-model-3-inside, tesla-model-3-back и тд.

Используйте оптимальные размеры изображений

При изменении размера ваших картинок, стоит учитывать что:

  • Более 50% посетителей сайта не ждут более 3 секунд загрузки страницы;
  • Время загрузки один из основных факторов ранжирования поисковых систем;
  • Если изображения долго грузится, то нужно это исправлять.

Как это исправить?

В общем все достаточно просто, вам нужно уменьшить размер изображения. Один из самых простых способов — использовать команду «Сохранить для интернета» в Adobe Photoshop. Кроме того, вы также можете использовать специальные онлайн сервисы. Но о них мы будем говорить дальше.

Использование правильных форматов изображений

Пожалуй самые распространенные типы файлов изображений это: JPEG, GIF и PNG.

JPEG (или .jpg) — часто используемый и стандартный тип файлов изображений. JPEG изображения можно сильно сжать и получить картинку с небольшим размером без потери качества. Таким образом, вы получаете легкую картинку для вашего сайта, которая выглядит качественно.

GIF (.gif) — это изображения с более низким качеством. Как правило, его используют для более простых изображений. Кроме того, данный формат поддерживает анимацию. Gif отлично подойдет в тех случаях, когда нужна картинка, которая содержит не более 2 цветов.

PNG еще один популярный формат, их стали использовать намного чаще чем GIF. Поскольку PNG поддерживают намного больше цветов, чем GIF. Также при повторном сохранении их качество не ухудшается в отличие от JPEG. Однако при этом изображения в формате PNG весят намного больше чем в JPEG.

правильные форматы изображений

Внимание! При использовании изображений в формате PNG нужно быть осторожным. И лучше использовать формат PNG-8, так как он в 3 раза легче чем PNG-24.

Оптимизируйте свои миниатюрные изображения

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

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

Как исправить?

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

Использование Sitemap для картинок 

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

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

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

Будьте осторожны с декоративными изображениями

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

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

Вот несколько советов по уменьшению размеров файлов ваших декоративных изображений:

  • Для различных узоров, разделителей используйте форматы PNG-8 или GIF; 
  • По возможности используйте CSS вместо изображений.
Будьте осторожны при использовании (CDN)

Сеть доставки контента (CDN) — это географически распределенная сеть серверов и их центров обработки данных, которые помогают в распространении контента среди пользователей с минимальной задержкой.

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

Однако, у этого способа есть существенный недостаток — это обратные ссылки. И чем больше вы будете пользоваться данным способом, тем больше будет обратных ссылок с вашего сайта. Как вы знаете обратные ссылки играют важную роль для SEO. И чем больше ссылок, тем лучше для вашего сайта. Но когда с вашего сайта много ссылок на другой ресурс, то это наоборот снижает рейтинг вашего сайта в пользу другого.

Читайте также: Где купить хостинг и домен для вашего сайта дешево

Оптимизация картинок онлайн: Тестируйте

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

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

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

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

Оптимизация картинок для сайта онлайн: Лучшие сервисы

Оптимизация картинок онлайн: Сервис TinyPNG

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

https://tinypng.com

TinyIMG SEO & Image Optimizer

TinyIMG SEO & Image Optimizer — еще один отличный инструмент оптимизации, который подойдет для владельцев магазинов Shopify. Он автоматически оптимизирует изображения и загружает их в ваш магазин.

Bulk Resize

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

https://bulkresizephotos.com

Оптимизация картинок онлайн: Birme

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

https://www.birme.net

Сервис Iloveimg

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

сервис имг

http://Iloveimg.com

Читайте также: Обучение СММ: 50 Лучших курсов с 0 до профи

PicgHost

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

https://www.picghost.com

Оптимизация картинок для сайта онлайн: Optimizilla

Еще один сервис у которого есть русскоязычный интерфейс. Тут за раз вы можете обработать до 20 фотографий в формате JPEG, PNG или GIF. Данный сервис также достаточно просто использовать.

сервис оптимизилла

https://imagecompressor.com

Заключение

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

изображение ноутбука
Бесплатный курс по созданию и продвижению сайтов с нуля

Хотите научиться создавать сайты их продвигать и на них зарабатывать? Тогда жмите кнопку получить доступ!

Основатель проекта Biz Pravda, интернет-маркетолог. Специалист в создании сайтов, контекстной рекламе и таргетированной рекламы.

7 комментариев

  • Валерий

    О, спасибо. Классная статья, сам имею сайт, поэтому оптимизация картинок — важный фактор в развитии сайта!

  • Александр

    Полезная статья. Никогда не помешает прочитать её несколько раз. Сам иногда забываю на каких ресурсах оптимизировать картинки/фотки.

  • Лина

    Очень интересная статья!Нужная информация для всех, кто работает над сайтами! Спасибо.

  • Светлана

    Информативная статья и подробная. У меня вопрос: если декоративные элементы встроены в тему, есть возможность уменьшить их вес?

    • Евгений Исаев

      Скорее всего эти элементы реализованы с помощью CSS, то есть уже оптимизированы

  • Елена

    Спасибо автору добавила в закладки, есть свой сайт, и эта тема актуальна для меня как никогда

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *