В мире мгновенного удовлетворения потребностей, для предприятий очень важно, чтобы клиент получал удовольствие от быстро загружающегося сайта электронной коммерции. Исследования показывают, что если сайт электронной коммерции загружается медленнее, чем ожидалось, посетители с меньшей вероятностью совершат покупку. Часто главными виновниками медленной загрузки сайта являются большие, недостаточно оптимизированные изображения. Хотя качество изображений, безусловно, важно для создания великолепных фотографий товаров, оптимизация изображений – это настоящий секрет создания успешного интернет-магазина. Изучение методов оптимизации изображений может принести большие плоды – от сокращения времени загрузки сайта до усиления вашего бренда и привлечения покупателей, просматривающих изображения Google.
Что такое оптимизация изображений?
Оптимизация изображений – это максимальное уменьшение размера файлов изображений без потери качества, чтобы время загрузки страницы оставалось низким. Это также касается SEO изображений, то есть обеспечения высокого рейтинга ваших баннеров и изображений продуктов в Google и других поисковых системах. Оптимизация изображений означает обеспечение безупречного вида ваших изображений на настольных и мобильных компьютерах. И чтобы они не мешали работе сайта. Целью оптимизации изображений является создание высококачественных изображений с наименьшим размером файла. Здесь играют роль три основных элемента:
- Размер файла изображения (JPEG против PNG против WEBP-изображений)
- Уровень сжатия изображения
- Высота и ширина изображения
Найдя баланс между этими тремя параметрами, вы сможете уменьшить размер изображения и повысить производительность сайта.
Зачем мы оптимизируем изображения?
Изображения вносят наибольший вклад в общий размер страницы, из-за чего страницы загружаются медленнее. Данные HTTP Archive показывают, что неоптимизированные изображения составляют в среднем 75% от общего веса веб-страницы. Это может негативно сказаться на производительности вашего сайта. Оптимизация изображений помогает снизить вес веб-страницы и является основным принципом хорошего веб-дизайна для электронной коммерции, что приводит к следующим преимуществам:
Улучшенная скорость работы сайта
Оптимизация изображений для веб и мобильных устройств существует для того, чтобы веб-страницы загружались быстрее. Они создают лучший опыт просмотра для покупателей. Если скорость загрузки страницы задерживается всего на две секунды, показатель отказов может увеличиться на 103%. Скорость страницы – это скорость загрузки контента на вашей странице. Ее часто описывают как:
- Время загрузки страницы, или время, необходимое для отображения содержимого на вашей странице.
- Время до первого байта – количество миллисекунд, необходимое браузеру для получения первого байта информации от веб-сервера.
Google предположил, что скорость сайта является одним из сигналов, используемых его алгоритмом для ранжирования страниц. Исследование Moz показывает, что Google может специально измерять время до первого байта, когда рассматривает скорость страницы. Медленная страница означает, что поисковые системы проползают меньше страниц, что может негативно сказаться на индексации.
Улучшенный опыт просмотра веб-страниц
Скорость страницы очень важна для восприятия посетителя. Люди могут заметить задержку всего в 1/10 секунды. Все, что дольше этого, не кажется “мгновенным”. Задержки в одну секунду достаточно, чтобы прервать мыслительный процесс человека. BBC выяснила, что за каждую лишнюю секунду времени загрузки страницы 10% пользователей уходят. Страницы с более длительным временем загрузки, как правило, имеют более высокий показатель отказов и более низкое среднее время пребывания на странице. Сокращение времени загрузки страницы даже на одну секунду улучшит впечатления пользователей. Улучшенный пользовательский опыт и взаимодействие с вашим сайтом положительно влияют на рейтинг в поисковых системах, что может улучшить вовлеченность, конверсию и удержание клиентов.
Улучшенная производительность поиска
Оптимизированные изображения помогают как читателям, так и поисковым системам лучше понять ваш сайт и добиться того, чтобы ваш контент увидели в Интернете. Последние данные показывают, что изображения выдаются по 32% поисковых запросов в Google. Оптимизация изображений может помочь ранжировать ваши изображения в поиске изображений Google, что может привести больше трафика на ваш сайт и укрепить ваш бренд. Более того, визуальный поиск становится все более важным, о чем свидетельствует введение Google новой функции поиска, которая объединяет изображения и текст в один запрос. Около 62% потребителей поколения Z и миллениалов хотят визуального поиска больше, чем любой другой новой технологии.
Как оптимизировать изображения для веб
Используйте краткие и прямые названия изображений
Очень просто загружать изображения на свой сайт и сохранять имена файлов по умолчанию, которые присваивает фотоаппарат. Но когда речь идет о SEO изображений, важно использовать соответствующие ключевые слова, чтобы помочь вашей веб-странице занять место в поисковых системах. Создание описательных, богатых ключевыми словами имен файлов имеет решающее значение для оптимизации изображений. Поисковые системы просматривают не только текст на вашей веб-странице, но и имена файлов изображений. Возьмем, к примеру, это изображение.
Вы можете использовать общее имя, которое камера присвоила изображению (например, DCMIMAGE10.jpg). Однако гораздо лучше было бы назвать файл 2012-Ford-Mustang-LX-Red.jpg. Подумайте о том, как ваши клиенты ищут товары на вашем сайте. Какие шаблоны именования они используют при поиске? В приведенном выше примере покупатели автомобилей могут искать такие термины, как:
- 2012 Красный Ford Mustang LX
- Ford Mustang LX Red 2012
- Красный Ford Mustang LX 2012
Просмотрите аналитику вашего сайта, чтобы узнать, какие шаблоны ключевых слов используют ваши клиенты. Определите наиболее распространенные шаблоны именования, которые они используют, и примените эту формулу к процессу именования файлов изображений. Если вы не собираетесь ориентироваться на данные, просто убедитесь, что используете релевантные, полезные ключевые слова при именовании изображений (т.е. старайтесь быть описательными). Посмотрите этот вопрос-ответ от Moz, чтобы понять важность стратегического именования файлов изображений на вашем сайте. Это, безусловно, может улучшить SEO на странице, но также может помочь вашим страницам и изображениям занять более высокое место на страницах результатов поисковых систем (SERP).
Тщательно оптимизируйте атрибуты alt
Атрибуты Alt – это текстовая альтернатива изображениям, когда браузер не может правильно их отобразить. Они также используются для обеспечения веб-доступности. Даже когда изображение отображается, если навести на него курсор, вы увидите текст атрибута alt (в зависимости от настроек вашего браузера). Атрибут alt также добавляет SEO-ценность вашему сайту. Добавление соответствующих атрибутов alt, включающих ключевые слова, к изображениям на вашем сайте может помочь вам лучше ранжироваться в поисковых системах. На самом деле, использование атрибутов alt – это, вероятно, лучший способ для ваших продуктов электронной коммерции отображаться в поиске изображений и веб-поиска Google. Давайте посмотрим на исходный код атрибута alt.
Приоритетом номер один при оптимизации изображений является заполнение атрибута alt для каждого изображения продукта на вашем сайте. Вот несколько простых правил для атрибутов alt:
- Описывайте свои изображения простым языком, как и имена файлов изображений.
- Если вы продаете товары, имеющие номера моделей или серийные номера, используйте их в атрибутах alt.
- Не забивайте атрибуты alt ключевыми словами (например, alt=”ford mustang muscle car buy now cheap best price on sale”).
- Не используйте атрибуты alt для декоративных изображений. Поисковые системы могут наказать вас за чрезмерную оптимизацию.
Наконец, время от времени проводите проверку на вменяемость. Просмотрите исходный текст ваших веб-страниц и проверьте, правильно ли заполнены атрибуты alt. Вы будете удивлены тем, что упускаете, когда двигаетесь со скоростью предпринимательства.
Грамотно выбирайте размеры изображения и углы наклона изделия
Обычно принято показывать несколько ракурсов вашего продукта. Возвращаясь к примеру с Ford Mustang, вы не захотите показывать только один снимок автомобиля, особенно если вы пытаетесь его продать. В ваших интересах показать снимки:
- Интерьер
- Задняя часть (особенно воздушный спойлер)
- Обода
- Двигатель (в конце концов, это же “Мустанг”)
Лучший способ извлечь выгоду из этих дополнительных фотографий – заполнить атрибуты alt. Для этого нужно создать уникальные атрибуты alt для каждого снимка товара:
- 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> используя атрибут alt: alt=”2012 Ford Mustang LX Red Leather Interior Trim”.
- 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> используя атрибут alt: alt=”2012 Ford Mustang LX Red Rear View Air Spoiler”.
Главное здесь – добавить описание к базовому атрибуту alt, чтобы потенциальные поисковики попадали на ваш сайт. Если вы проделаете дополнительную работу, Google вознаградит вас поисковиками.
Небольшое предостережение относительно больших изображений
Возможно, вы захотите предоставить своим посетителям большие изображения. Это может повысить удобство пользования, но будьте осторожны и не переборщите. Что бы вы ни делали, не размещайте самое большое изображение на своей веб-странице и просто уменьшайте его размеры в исходном коде. Это увеличит время загрузки страницы из-за большего размера файла, связанного с изображением. Вместо этого используйте на странице изображение меньшего размера и предложите посетителям возможность просмотреть более крупное изображение во всплывающем окне или на отдельной странице. Совет: Узнайте, как сделать изображения товаров масштабируемыми в вашей теме с помощью jQuery image zoom.
Изменение размера изображений
Подумайте об этом:
- Почти 50% потребителей не будут ждать загрузки сайта электронной коммерции даже три секунды.
- Во всем мире среднее время загрузки страниц действительно увеличивается.
- Компания Amazon обнаружила, что если ее страницы будут замедляться всего на одну секунду, она потеряет 1,6 миллиарда долларов в год.
- Google использует время загрузки страницы в качестве фактора ранжирования в своем алгоритме.
Если у вас есть изображения, которые медленно “стекают” по экрану и загружаются более 15 секунд? Что ж, можете поцеловать потенциального клиента на прощание! Итак, что вы можете сделать? Когда клиент попадает на ваш сайт, загрузка может занять некоторое время, в зависимости от размера файлов. Чем больше размер файлов, тем дольше загружается веб-страница. (Примечание: если вы являетесь продавцом Shopify, ваша тема Shopify автоматически сжимает изображения, поэтому для вас это не должно быть проблемой). Если вы сможете уменьшить размер файлов изображений на вашей веб-странице и увеличить скорость загрузки страницы, меньше людей, посетивших ваш сайт, уйдут с него. Существует множество онлайн-инструментов, которые можно использовать для редактирования изображений. Например, Adobe предлагает бесплатное приложение для редактирования изображений для смартфонов и планшетов: Photoshop Express. Этот инструмент не обладает всеми возможностями настольной версии Adobe Photoshop, но он охватывает все основы редактирования изображений и не стоит ни копейки. Вот некоторые другие впечатляющие онлайн-инструменты для редактирования изображений:
- Эксперты назвали PicMonkey “ошеломляюще великолепным инструментом для редактирования фотографий”.
- PIXLR очень удобен в использовании и поставляется со 100% бесплатным приложением для вашего смартфона, так что вы можете редактировать на ходу.
- Canva – еще один достаточно продвинутый онлайн-редактор изображений.
Наконец, всегда есть GIMP. GIMP – это бесплатное программное приложение для редактирования изображений с открытым исходным кодом, которое можно запускать на Windows, Mac или Linux. Он может делать все то же, что и Photoshop, но, как правило, немного более громоздкий. Но для бесплатного приложения для редактирования изображений его не превзойти. Для изображений электронной коммерции хорошее эмпирическое правило – стараться, чтобы размер файла изображения не превышал 70 килобайт. Иногда это может быть трудно, особенно для больших изображений.
Выберите правильный формат изображения
Существует три распространенных типа файлов, которые используются для размещения изображений в Интернете: JPEG, GIF и PNG. Давайте рассмотрим эти три типа и то, как они влияют на одно и то же изображение:
JPEG (или .jpg) является де-факто стандартным типом файлов изображений для Интернета. Изображения JPEG могут быть значительно сжаты, что позволяет получить качественные изображения при небольшом размере файла. На изображении выше формат JPEG обеспечивает достойное качество при небольшом размере файла.
Изображения GIF (.gif) имеют более низкое качество, чем изображения JPEG, и используются для более простых изображений, таких как значки и декоративные изображения. GIF-изображения также поддерживают анимацию. Что касается оптимизации изображений, GIF отлично подходят для простых, незамысловатых изображений на веб-странице, включающих всего несколько цветов.
Изображения PNG становятся все более популярными в качестве альтернативы GIF. PNG поддерживают гораздо больше цветов, чем GIF, и они не ухудшаются со временем при повторном сохранении, как JPEG. Несмотря на то, что тип файлов PNG начинает использоваться все чаще, размеры файлов все еще могут быть намного больше, чем у изображений JPEG. Обратите внимание, что изображение PNG-24 более чем в три раза больше по размеру файла, чем PNG-8. Вот почему с PNG нужно быть очень осторожным. Вот экстремальный пример, где размер файла изображения поддерживается постоянным на уровне 24 килобайт для всех трех типов файлов:
Как вы можете видеть, JPEG здесь явный победитель. GIF и PNG ухудшают качество, чтобы остаться при том же малом размере файла. Вот несколько советов, которые следует помнить при выборе типов файлов:
- В большинстве случаев JPEG является лучшим форматом изображений для электронной коммерции. Они обеспечивают наилучшее качество изображения при наименьшем размере файла.
- Никогда не используйте GIF-файлы для больших изображений товаров. Размер файла будет очень большим, и нет хорошего способа уменьшить его. Используйте GIF только для миниатюр и декоративных изображений.
- PNG может быть хорошей альтернативой как JPEG, так и GIF. Если у вас есть возможность получить фотографии товара только в формате PNG, попробуйте использовать PNG-8, а не PNG-24. PNG отлично подходят в качестве простых декоративных изображений благодаря своему чрезвычайно малому размеру файла.
Большинство программ для редактирования изображений могут сохранять изображения в любом из рассмотренных выше форматов файлов.
Оптимизируйте свои миниатюры
Многие сайты электронной коммерции используют уменьшенные изображения, особенно на страницах категорий. Они быстро демонстрируют товары, не занимая много места.
Эскизы – это здорово, но будьте осторожны: они могут стать тихим убийцей. Жертва? Скорость загрузки вашей страницы. Эскизы обычно появляются в критические моменты процесса покупки. Если они мешают быстрой загрузке страниц категорий, вы можете потерять потенциального клиента. (Примечание: продавцам Shopify не нужно беспокоиться об оптимизации эскизов, так как мы позаботимся об этом за вас). Итак, что вы можете сделать?
- Делайте размеры файлов миниатюр как можно меньше. Возможно, здесь стоит отказаться от качества в пользу меньшего размера файла. Помните, что совокупное воздействие ваших миниатюр окажет огромное влияние на время загрузки страницы.
- Варьируйте текст атрибута alt, чтобы не дублировать текст, который вы используете для больших версий одного и того же изображения. Более того, сделайте текст alt совершенно другим. Последнее, чего вы хотите, это чтобы миниатюра была проиндексирована вместо более крупного изображения. Можно привести довод в пользу полного отсутствия текста alt.
Используйте карты сайта с изображениями
Если на вашем сайте используются галереи Javascript, всплывающие окна с изображениями или другие “яркие” способы улучшения общего впечатления от покупок, карта сайта изображений поможет привлечь внимание Google к вашим изображениям. Веб-краулеры не могут просматривать изображения, которые не указаны в исходном коде веб-страницы. Поэтому, чтобы сообщить поисковикам о неопознанных изображениях, вы должны указать их местоположение в карте сайта изображений. Вы можете вставить следующую строку в файл robots.txt, указав путь к вашей карте сайта:
Карта сайта: http://example.com/sitemap_location.xml
Или вы можете отправить карту сайта в Google с помощью Search Console. У Google есть множество рекомендаций по публикации изображений, которые могут помочь вашему сайту занять более высокое место в SERP. Кроме того, вы можете использовать карты сайта Google, чтобы предоставить Google больше информации об изображениях на вашем сайте, что поможет Google найти больше ваших изображений, чем если бы он делал это самостоятельно. Использование карт сайта не гарантирует, что ваши изображения будут проиндексированы Google, но это, безусловно, положительный шаг в направлении SEO изображений. В Google Webmaster Tools есть много рекомендаций по правильному оформлению карты сайта. Важно, чтобы вы добавили специальные теги для всех ваших изображений. Вы также можете создать отдельную карту сайта для размещения только изображений. Важно добавить всю необходимую информацию, используя специальные теги, в любую карту сайта, которую вы уже создали или будете создавать. Следуйте этим рекомендациям, которые Google предлагает использовать при создании карты сайта с информацией о изображениях.
Остерегайтесь декоративных изображений
На веб-сайтах часто используется целый ряд декоративных изображений, таких как фоновые изображения, кнопки и границы. Все, что не связано с продуктом, скорее всего, можно считать декоративным изображением. Хотя декоративные изображения могут придать эстетическую привлекательность веб-странице, они могут привести к большому размеру файла и замедлению загрузки. Поэтому, возможно, вам стоит присмотреться к декоративным изображениям, чтобы они не снижали способность вашего сайта превращать посетителей в покупателей. Вы должны проверить размеры файлов всех декоративных изображений на вашем сайте и использовать шаблон, который минимизирует размеры файлов. Вот несколько советов по уменьшению размеров файлов декоративных изображений:
- Для изображений, составляющих границы или простые узоры, делайте их в формате PNG-8 или GIF. Вы можете создавать хорошо выглядящие изображения размером всего в несколько сотен байт.
- Если возможно, используйте CSS для создания цветных областей вместо изображений. Используйте стилизацию CSS как можно чаще, чтобы заменить любые декоративные изображения.
- Внимательно посмотрите на большое фоновое изображение в стиле обоев. Это могут быть огромные файлы. Сократите их настолько, насколько это возможно без ухудшения качества изображения.
Чтобы уменьшить размер фонового изображения, можно воспользоваться одним приемом: вырезать середину фонового изображения и сделать ее ровным цветом или даже прозрачной. Это может значительно уменьшить размер файла.
Соблюдайте осторожность при использовании сетей доставки контента (CDN)
Продавцам Shopify не стоит беспокоиться об этом, поскольку мы являемся хостинговым решением, но другим следует обратить на это внимание. Сети доставки контента (CDN) – это лучшее место для размещения изображений и других медиафайлов. Они могут увеличить скорость загрузки страниц и помочь решить проблемы с пропускной способностью. Единственный недостаток – это обратные ссылки. Как вы, возможно, знаете, обратные ссылки очень важны для SEO, и чем больше у вас обратных ссылок, тем лучше ваш сайт в поисковых системах. Размещая свои изображения в CDN, вы, скорее всего, удаляете изображение со своего домена и помещаете его на домен CDN. Таким образом, когда кто-то ссылается на ваше изображение, он фактически ссылается на домен CDN. Поэтому не забывайте об этих лучших практиках:
- Если что-то “модно”, это не значит, что вы должны следовать за ним, как овечка. Сначала определите, действительно ли это лучший шаг для вашего бизнеса.
- Если ваш сайт ежемесячно выполняет тонны заказов, то CDN, скорее всего, будет хорошей идеей, поскольку она поможет решить проблемы с пропускной способностью.
- Если сейчас ваш сайт посещают только тысячи человек в день, то, скорее всего, ваш текущий хостинг справится с нагрузкой.
Существуют способы обойти проблемы SEO изображений, связанные с CDN, но сначала обязательно попросите профессионала помочь вам разработать стратегию действий.
Протестируйте свои изображения
Смысл оптимизации изображений заключается в том, чтобы помочь увеличить конечную прибыль. Мы уже говорили об уменьшении размера файлов и о том, как заставить поисковые системы индексировать ваши изображения, но как насчет тестирования изображений, чтобы увидеть, что конвертируется в большее количество клиентов?
- Проверьте количество изображений товаров на странице. Поскольку время загрузки является проблемой для некоторых нехостинговых сайтов электронной коммерции, вы можете обнаружить, что уменьшение количества изображений на странице увеличит количество переходов по ссылкам и продажи. Возможно также, что большое количество изображений на странице улучшит пользовательский опыт и приведет к увеличению продаж. Единственный способ узнать это – протестировать.
- Проверьте, какие ракурсы предпочитают ваши клиенты. Вы можете повысить лояльность клиентов, если будете предоставлять те ракурсы, которые хотят видеть ваши покупатели. Отличный способ выяснить это – опросить своих клиентов о том, что им больше всего понравилось при просмотре снимков вашей продукции. Опросы и беседы с клиентами – это вообще отличная привычка. Тем не менее, проверяйте, тестируя.
- Протестируйте, сколько объявлений о товарах должно быть на страницах категорий. Десять, 20, 100 товаров? Протестируйте количество продуктов на страницах категорий, чтобы понять, что лучше всего подходит для ваших клиентов.
AVADA SEO:Оптимизатор изображений
AVADA SEO:Image Optimizer является одним из лучших приложений в Shopify App Store. Оно имеет более 1100 отзывов и поддерживает рейтинг 4,9 из 5 звезд. Оно работает, чтобы сэкономить ваше время и усилия при оптимизации изображений для вашего магазина. Всего одним щелчком мыши вы можете поставить оптимизацию изображений на автопилот с помощью AVADA. Среди основных функций:
- Автоматические alt-теги к каждому изображению на странице продукта, странице коллекции и в сообщениях блога
- Высококачественное сжатие изображений для увеличения скорости загрузки
- Оптимизация структурированных метаданных Google одним щелчком мыши
- Интеграция Google Search Console для отслеживания показателей
- Генератор Sitemap, чтобы поисковые системы могли легко читать ваш сайт
TinyIMG SEO, скорость и оптимизатор изображений
TinyIMG SEO, Speed & Image Optimizer – еще один отличный инструмент оптимизации для владельцев магазинов Shopify. Он автоматически оптимизирует изображения и загружает их в ваш магазин. Вы можете в любое время восстановить исходное изображение и оптимизировать его вручную. TinyIMG также предлагает:
- Изменение размера изображения
- Способность исправлять технические проблемы SEO и скорости
- Перенаправление битых ссылок
- JSON LD
- Живая поддержка
- Автоматизированная оптимизация изображений
TinyPNG
TinyPNG – это самый популярный инструмент оптимизации изображений в Интернете. Он использует интеллектуальные методы сжатия с потерями для уменьшения размера файлов изображений для ваших веб-страниц (WEBP), JPEG и PNG файлов. Вы можете уменьшать изображения для ваших приложений или магазина, а также уменьшать анимированные изображения. API TinyPNG автоматически изменяет размер изображений для миниатюр, удаляя ненужные части и добавляя больше фона. Он доступен как плагин для WordPress, если вы используете свой сайт на WordPress.
Сохраните функциональность фотографий с помощью оптимизации изображений
Вы знаете несколько стратегий SEO для вывода фотографий товаров в результаты поиска изображений Google. Вы знаете, как в полной мере использовать атрибуты alt, и знаете разницу между типами файлов и когда следует выбирать каждый из них. Теперь пришло время перейти на свой сайт и начать оптимизацию изображений. Тем не менее, оптимизация изображений – сложная задача, и мы лишь поверхностно изучили ее, поэтому не стесняйтесь оставлять вопросы в комментариях ниже.
FAQ по оптимизации изображений
Что означает оптимизация изображений? Оптимизация изображений – это процесс придания изображениям идеального вида на настольных и мобильных компьютерах. Для уменьшения размера файла без потери качества изображения используется технология сжатия, например, с потерями и без потерь.
Каковы преимущества оптимизации изображений?
- Улучшение скорости работы сайта
- Создавайте лучшие возможности для просмотра веб-страниц
- Улучшение производительности поиска
Что такое методы оптимизации изображений?
1. Использование кратких и прямых названий изображений
2. Оптимизация атрибутов alt
3. Грамотный выбор размеров изображения и ракурсов изделия
4. Изменение размеров изображений
5. Выбор правильного формата изображения
6. Оптимизация эскизов
7. Использование карты сайта изображений
Какой лучший оптимизатор изображений? Если вы владелец магазина Shopify, AVADA SEO:Image Optimizer и TinyIMG SEO, Speed & Image Optimizer являются лучшими инструментами оптимизации изображений. TinyPNG – лучший оптимизатор изображений для публичного использования.
