Оптимизация графики для веба: самое важное / Хабр

Автор электронной книги — Эдди Османи, один из руководителей разработки Google Chrome

Cжатие изображений всегда должно быть автоматизировано

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

Большинство CDN (например, Akamai) и сторонних решений вроде Cloudinary, imgix, Fastly Image Optimizer, Instart Logic SmartVision и ImageOptim API предлагают комплексные автоматизированные решения для оптимизации изображений.

На чтение статей и настройку конфигурации вы потратите время, которое дороже оплаты их услуг (у Cloudinary есть бесплатный тариф). Но если всё-таки не хотите отдавать работу на аутсорсинг по соображениям стоимости или из-за дополнительной latency, то выбирайте приведённые выше варианты с открытым исходным кодом. Проекты Imageflow или Thumbor предлагают альтернативу на собственном хостинге.

Все должны эффективно сжимать изображения

Как минимум, используйте ImageOptim. Он значительно уменьшает размер при сохранении визуального качества. Есть версии под Windows и Linux.

Более тщательный подход: прогоняйте JPEG-файлы через MozJPEG (для веб-контента приемлемо качество q=80 или ниже) и рассмотрите поддержку Progressive JPEG. Файлы PNG пропускайте через pngquant, а SVG — через SVGO. Явно укажите очистку от метаданных (--strip для pngquant), чтобы избежать раздутия файлов. Вместо сумасшедших гигантских анимированных GIF отдавайте пользователям видео H.264 (или WebM для Chrome, Firefox и Opera)! Если не можете себе это позволить, то хотя бы используйте Giflossy. Когда есть возможность потратить пару циклов CPU, а вам нужно изображение лучшего качества и вы готовы смириться с длительным временем кодирования, то попробуйте Guetzli.

Некоторые браузеры анонсируют поддержку графических форматов через заголовок Accept.

Это можно использовать при выборе формата для выдачи: например, формат WebP для браузеров на основе Blink, таких как Chrome, и вариант JPEG/PNG для других браузеров.

Сжатие всегда можно улучшить. Есть инструменты для генерации и выдачи srcset. В браузерах на основе Blink выбор ресурсов автоматизируется с помощью client-hints — и вы сэкономите трафик на пользователях, которые указали в браузере опцию «экономия данных» через подсказку Save-Data.

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

Графика остаётся главной причиной ожирения веб-страниц

Изображения составляют огромную долю интернет-трафика. Согласно HTTP Archive, 60% объёма веб-страниц — это графика в форматах JPEG, PNG и GIF. По состоянию на июль 2017 года изображения составляли 1,7 МБ на средней веб-странице объёмом 3,0 МБ.

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

Исследование Soasta/Google от 2016 года показало, что иллюстрации — это второй предиктор кон

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

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

Не грузите полный размер

Нет смысла загружать на сайт картинку полного размера, чтобы потом её уменьшать.

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

Изображение должно иметь такой размер, с каким оно будет выводиться на странице. Если вам в статье нужна фотография размером 200х200 пикселей, то вариант загрузить её на сайт размером 2000х2000 пикселей и просто уменьшить — не самый оптимальный. Лучше сразу грузите её на сервер размером 200х200 пикселей.

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

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

Я захожу на страницу статьи, кликаю по тексту правой кнопкой мыши и выбираю «Исследовать элемент». У пользователей MacOS этот пункт меню называется «Показать программный код страницы».

Теперь у нас появляется вот такая вставка с кодом:

Чтобы узнать параметры определённого элемента на сайте, мы должны выбрать вот этот инструмент выделения в левом углу страницы.

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

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

5 лучших сервисов для сжатия картинки без потери качества

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

Tinypng

Сайт, которым пользуюсь лично я, называется Tinypng. Он совершенно бесплатный. Работает просто: загружаете картинки, а сервис ужимает их в среднем на 60-80% без потери качества. 

Kraken. io

Следующий сервис, который даже популярнее, чем Tinypng, — это Kraken. Тут можно сжимать сразу несколько изображений, загружая ZIP архив или пользуясь импортом из Google диска или с Dropbox.

Compressor.io

Compressor.io — ещё один отличный сервис для сжатия изображений. Возможность массовой загрузки файлов тут отсутствует. Изображения уменьшаются в среднем на 60-80% без потери качества.

Imagecompressor.com

Сервис Imagecompressor.com отличается возможностью регулирования качества изображения. Происходит это обычным ползунком. На сервис можно за раз закинуть до 20 изображений.

Jpeg-optimizer.com

И последний, но не менее важный — Jpeg-optimizer.com. Дизайн может и не самый современный, зато со своими функциями сервис справляется на отлично. Он позволяет точно выставить уровень сжатия. Рекомендую для веб-страниц выставлять значение 80 в пункте «Compress Image».

Помимо сжатия тут можно ещё и сразу изменить размер изображения.

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

Лучшие плагины для оптимизации изображений в WordPress

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

EWWW Image Optimizer

EWWW Image Optimizer считается одним из лучших плагинов для оптимизации картинок. Он позволяет сделать разовое сжатие всех файлов (например, когда вы только установили плагин на сайт), а также выбирать картинки, которые оптимизироваться не будут. Это будет полезно, например, для сайтов с тематикой фотографии, когда важно не ухудшать качество снимков. Но в целом оптической разницы вы не заметите, зато сайт будет загружаться быстрее.

WP Smush

WPMU DEV предлагает сразу несколько плагинов для ускорения сайта. И WP Smush — часть этой группы. Он занимается сжатием изображений пачками либо в момент их загрузки на сайт. Есть платная и бесплатная версии, в бесплатной можно обрабатывать не более 50 изображений подряд. Поддерживаемые для оптимизации форматы: JPEG, PNG и GIF.

Optimus

Вот такой робот Optimus уменьшает размер изображений на 70%. Но у него есть ограничение — 100 kB. Он работает как с исходными изображениями, так и с только загружающимися на сайт. 

TinyPNG

Бесплатный онлайн-сервис TinyPNG, о котором мы говорили выше, можно установить и в качестве плагина. Он сжимает файлы только форматов JPEG и PNG.

Short Pixel

Главное отличие плагина Short Pixel — возможность обработки PDF-файлов и совместимость с WooCommerce. В остальном он выполняет все те же функции, что и предыдущие сервисы.

Установите себе какой-то из этих плагинов для оптимизации изображений, и это уже ускорит работу вашего сайта.

Настройка lazy loading изображений

Есть ещё один способ ускорения сайтов при помощи оптимизации изображений. Это настройка отложенной или ленивой (lazy) загрузки. Такую функцию использует очень много сайтов. 

Её работа заключается в том, что изображения грузятся не сразу вместе с открытием страницы, а по мере надобности: например, при скроллинге, при клике или в фоновом режиме.

Когда стоит настраивать отложенную загрузку? 

• Если у вас на сайте много изображений.
• Когда картинки — основной контент.
• Когда сайт грузится очень медленно.
• Процент посетителей с мобильных устройств больше 50.

Когда не стоит настраивать отложенную загрузку? Если с изображений идёт хороший трафик. В остальных же случаях это пойдёт сайту только на пользу.

Как сделать отложенную загрузку изображений?

Для этого используется атрибут loading, он задаёт условия загрузки. Он устанавливается как для фотографий с тегом img, так и для медиа с тегом iframe.

Для отложенной загрузки (когда картинка грузится по мере необходимости) мы ставим параметр lazy:

<img src=»image.png» loading=»lazy» alt=»timeweb»>

Вот вы и узнали, как правильно оптимизировать картинки. Теперь они точно не заставят ваш сайт оставаться позади быстрых соперников! Пользуйтесь советами из статьи и ускоряйте свой ресурс. Удачи!

как выйти в топ поиска по картинкам

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

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

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

1.  Используйте качественные и релевантные изображения

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

Ваш Кэп.

Это правда. Релевантность картинок — один из самых важных факторов для поисковых систем. Убедитесь, что иллюстрации соответствуют теме статьи. 

Размещайте изображения рядом с текстом, который они иллюстрируют. 

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

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

Качественная картинка иллюстрирует и дополняет заголовок новости

У изображения должна быть цель 

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

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

Здесь показан конечный результат

А здесь — процесс работы 

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

настройками интерфейса сервиса. 

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

Иллюстрации на абстрактные темы (например, SEO или личностный рост) трудно сделать действительно релевантными. Однако тут стоит хотя бы избегать растиражированных стоковых изображений и пользоваться всеми другими доступными способами оптимизации.

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

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

2. Используйте оригинальные изображения по возможности

Для SEO также важно, чтобы изображения были оригинальными, а не скопированными с чужих сайтов. Поисковики ценят оригинальный, уникальный контент — и изображения в этом плане не исключение. 

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

Как проверить картинку на оригинальность

TinyEye — бесплатный сервис для проверки уникальности картинки

Здесь можно загрузить изображение или указать ссылку на него. Сервис проверит его и выдаст 0 результатов, если изображение уникальное:

Если же картинка уже используется на каких-либо сайтах, то TinyEye покажет список этих сайтов:

Например, загрузите фотографию в Яндекс.Картинках. Если в индексе поисковика ее нет, то вы увидите такое:

Если картинка есть в индексе, то Яндекс это покажет:

Не используйте изображения, защищенные авторским правом

В Рунете не слишком-то уважают авторские права на фотографии и пока еще можно (закрыв глаза, наступив на собственную совесть и найдя серьезное оправдание) пренебрегать правами на изображения. Но все же не надо так делать — правообладатель может обнаружить копию и порядком испортить вам жизнь. Да и вообще — надо уважать и сохранять авторские права. 

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

Подробнее о типах лицензий на изображения.

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

В Google Картинках вбейте поисковый запрос, а затем выберите Инструменты > Право на использование > С лицензией на использование (или С лицензией на использование и изменение).

Поиск картинок с открытой лицензией для коммерческого использования

О поиске бесплатных картинок можно почитать в справке Google.

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

Картинки с фотостоков можно улучшить

Картинку можно сделать более интересной и привлекательной с помощью несложной обработки и оформления.

Например, вот такая картинка:

…обретает новую жизнь в блоге Максима Ильяхова с его фирменной оранжевой рамкой.

Для такого оформления необязательно быть мастером Фотошопа. Достаточно онлайн-сервисов, таких как Canva или Crello. 

3. Названия файлов важны: замените «DSC1234.jpg» на понятное название

Чтобы выдать в ответ на запрос пользователя релевантную картинку, поисковые роботы используют все доступные текстовые элементы. 

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

Правильно

shokoladnyj_tort_s_kremom.jpg

Неправильно

DSC4980.jpg

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

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

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

Хорошее название файла. Робот просканирует его и «поймет», что изображено на картинке

Такое название не дает никакой полезной информации поисковому роботу

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

Оптимизация фото для интернет-магазина

Если у вас интернет-магазин и вы размещаете много фотографий товаров, можно пойти еще дальше.  

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

Подумайте о том, как пользователи ищут товары на вашем сайте. Какие шаблоны названий они используют при поиске? Люди, которые ищут эйр максы, могут вбивать поисковый запрос по-разному:

• кроссовки Nike air max мужские,

• мужские кроссовки air max Nike,

• мужские Nike air max,

• найки эйр макс

• и так далее.

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

Пропишите правила переименования картинок для контент-менеджера, если хотите оптимизировать их для продвижения интернет-магазина.

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

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

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

Нет правильного или идеального формата для изображений. Все зависит от типа картинки и как вы планируете ее использовать.Чаще всего используются такие форматы: JPEG, PNG, GIF. Их поддерживают все браузеры и поисковые системы. Реже — SVG и WebP.

Вот несколько рекомендаций:

• Для интернет-магазинов оптимальный вариант — JPEG. Этот формат дает лучшее качество при наименьшем размере файла. Также рекомендуется использовать JPEG для больших фотографий или иллюстраций.

• PNG используйте, если нужно сохранить прозрачность фона. Остальные форматы не поддерживают эту возможность. Иногда PNG выигрывает у JPEG и по весу файла.

• Для логотипов и иконок используйте векторный SVG. С помощью CSS или JavaScript вы можете управлять картинками в формате SVG. Например, менять их размер без потери качества. 

Вместо JPEG и PNG можно использовать малоизвестный формат WebP. Этот формат сохраняет высокое качество при еще меньших размерах файла. Конвертировать фотографию в WebP можно с помощью Squoosh. Правда, есть нюанс — формат WebP не поддерживается браузером Safari.

5. Сжимайте изображения в меру: картинка не должна сильно терять в качестве

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

Можно пойти двумя путями: 

1. Уменьшить вес файлов изображений на сайте.

2. Оптимизировать способ отображения картинки — показывать превью.

Насколько большими должны быть файлы изображений?

Для интернет-магазинов, где на одной странице размещаются десятки (а то и сотни) изображений товаров, оптимальный размер изображения — до 70 КБ. Иллюстрации в статьях либо в других разделах сайтов (не каталоге) могут быть тяжелее, но не стоит заходить далеко и вывешивать картинки весом в десятки мегабайт.

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

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

Вес изображения можно уменьшить при экспорте картинки в Фотошопе (Файл > Экспортировать > Сохранить для Web), просто снизив качество.

Что здесь можно сделать:

• Выбрать JPEG-формат.

• Немного снизить качество (до 60-80%).

• Изменить размеры изображения.

Для примера, картинка в формате PNG-8 и размером 3000х3000 пикселей занимает 2,18 Мб:

Неоптимизированная фотография

Сохраняем ее в JPEG, снижаем качество до 80%, а также уменьшаем размеры до 1500х1500 пикселей. Вес после оптимизации — 250,2 Кб.

Вес оптимизированной фотографии почти в 9 раз меньше

Сервисы для сжатия картинок

Если вы не мастер Фотошопа (и не купили лицензионную версию), можно воспользоваться одним из сервисов для сжатия картинок.

JpegMini — позволяет уменьшать вес картинок до 80%.

ImageOptim — десктопная программа для Mac. Позволяет оптимизировать картинки без потери качества. Программа удаляет из файла картинки метаданные: местоположение GPS, серийный номер камеры, данные о снимке и т.д. Работает с форматами JPEG, SVG , GIF и PNG. 

Compressor — бесплатный онлайн-сервис. Может сжимать до 90%. Правда, в сервис нельзя загружать картинки весом более 10 Мб. 

TinyPNG и TinyJPG — онлайн-сервисы для сжатия PNG и JPEG-изображений. Бесплатно можно одновременно загружать до 20 файлов весом до 5 Мб каждый. Степень сжатия — более 70%.

Compressjpeg — сервис для пакетной загрузки и оптимизации изображений (до 20 файлов одновременно).

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

После оптимизации изображений проверьте скорость загрузки страницы с помощью Google PageSpeed Insights.  

Повышаем скорость загрузки за счет превью

Используйте уменьшенный вариант изображения (превью) для отображения по умолчанию. Просмотр изображения в полном размере — по клику на картинке. 

Уменьшенная версия изображения в карточке товара, размер — 245х245 пикселей. Вес файла — 6,5 Кб.

Изображение можно посмотреть в большем размере — 500х500 пикселей. Вес этого файла — 26,1 Кб.

Особенно важно оптимизировать вес картинок для просмотра с мобильных устройств. Количество мобильного трафика уже превышает десктопный, и поисковые системы в первую очередь проверяют, оптимизирован ли сайт под мобайл. «Тяжелые» картинки = низкая скорость загрузки сайта на смартфонах. Это негативно может сказаться на ранжировании страницы в мобильной выдаче. 

Помните: каждая лишняя секунда загрузки обходится вам потерями трафика.

6. Загружайте на сайт изображения точно по размеру

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

К примеру, вы загрузили картинку в размере 2500х1500 пикселей, а на странице она должна отображаться в размере 250х150 пикселей. Несмотря на то, что фактически показывается картинка небольшого размера, для ее отображения большое изображение должно загрузиться полностью. Если таких картинок на странице несколько — это может существенно повлиять на скорость загрузки. 

Что с этим делать? 

Создавайте изображения в том размере, в котором они должны отображаться на сайте. Размер можно изменить в Фотошопе. Выберите Изображение > Размер изображения:

Укажите нужное значение пикселей. Измените только одно значение (например, ширину). Значение высоты автоматически подстроится, сохраняя пропорции. 

Изменение размеров позволяет в 130 раз уменьшить вес файла с картинкой

Если не можете использовать Фотошоп, можно воспользоваться онлайн редакторами (например, PIXLR) или сервисами по обработке картинок. Например, ресайз картинок от Slide.ly позволяет подогнать иллюстрацию под форматы соцсетей или произвольный размер.

Пример

В карточках новостей картинки отображаются в уменьшенном виде. Смотрим код — изображение меньшего размера:

На странице новости отображается полноразмерная картинка большего разрешения:

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

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

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

Например, вы разместили фото в разрешении 800х400 пикселей:

• Один пользователь зайдет на сайт со смартфона, и фотография будет смотреться нормально.  

• Другой пользователь использует iMac с retina-дисплеем. На таком дисплее картинка будет отображаться с существенной визуальной потерей качества. 

Что можно сделать: загрузите несколько вариантов исходного изображения (в разных размерах) и показывайте для экранов с разным разрешением картинки соответствующих размеров. 

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

Вот так выглядит html-код:

     sizes=»(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px»
     src=»example-800w.jpg» alt=»адаптивная страница»>

А так это реализовано у Лайфхакера, например:

В исходном коде страницы указаны ссылки на картинки разного размера для адаптации под различные устройства

8. Заполните атрибуты title и alt

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

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

При наведении курсора на картинку всплывает текст из атрибута title

Вот так выглядит код, в котором заданы атрибуты title и alt:

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

Если браузер по какой-то причине не может загрузить или отрисовать картинку — он покажет текст, который указан в этом атрибуте. 

Картинка не грузится, но, по-крайней мере, можно понять о чем она

Нужно обязательно добавлять альтернативное описание картинки:

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

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

• Альтернативное описание может служить как анкор для внутренней ссылки, если изображение — это ссылка на другую страницу сайта.

Вот несколько простых правил для атрибутов alt:

• Заполняйте атрибуты alt для каждого изображения (особенно это касается фотографий товаров). 

• Описание должно быть коротким, написано простым языком. 

• Если вы продаете товары с номерами моделей или серийными номерами, используйте их в атрибутах alt.

• Размещайте в alt только те ключевые слова, которые относятся к изображению.

• Избегайте переспама. 

Хороший пример того, как правильно заполнять атрибут alt, приводит Google в справке для вебмастеров:

9. Создайте Sitemap-файл для изображений

Чтобы убедиться, что поисковые роботы проиндексируют все изображения на страницах сайта, следует указать их в Sitemap-файле. 

Это поможет поисковым роботам найти те изображения, которые иначе они бы не обнаружили (например, если изображения загружаются с помощью JavaScript). 

Для картинок можно создать отдельный XML-файл или обновить существующую карту сайта.

В Sitemap-файле для изображений (в отличие от обычных XML-файлов) можно указывать URL с других доменов. Это позволяет использовать CDN (Content Delivery Network — сеть доставки контента) для размещения графических файлов.

Пример кода: 

http://www.sitemaps.org/schemas/sitemap/0.9″

xmlns:image=»https://www.yandex.ru/schemas/sitemap-image/1.1″>

 

    http://example.com/primer.html

   

      http://example.com/image.png

      Карелия

   

   

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

Подробнее о Sitemap-файлах для изображений: справка Google, справка Яндекс.

Для сайтов на WordPress есть специальный плагин Google XML Sitemap for Images, который автоматически создает Sitemap-файл для всех изображений, которые вы загружаете на сайт. 

10. Добавьте подписи к изображениям 

Подпись — это текст, сопровождающий изображение на странице. Например, так:

Так выглядят подписи к картинкам. Кстати, то, что вы сейчас читаете — тоже подпись

Почему важно добавлять подписи? Потому что люди обращают на них внимание при быстром сканировании страницы.

Подписи под изображениями читаются в среднем на 300% чаще, чем основной текст, поэтому отсутствие их или неправильное использование означает упущение возможности привлечь огромное количество потенциальных читателей (KissMetrics, 2012).

Что можно сделать в подписи:

• написать о том, что изображено на картинке или фотографии, особенно если это неочевидно или пояснение важно для статьи в целом,

• разместить дополнительную полезную информацию,

• добавить ключевое слово.

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

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

Пример уточняющей подписи в статье о карте сайта

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

Специальный класс для картинок с подписью

11. Используйте микроразметку Open Graph и Twitter Card 

Микроразметки Open Graph и Twitter Cards нужны для того, чтобы настроить внешний вид поста в социальных сетях при репосте статьи с сайта. 

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

И когда пользователи захотят поделиться статьей у себя в соцсетях:

• такой пост будет выглядеть привлекательно;

• подтянется нужная картинка с правильными размерами;

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

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

Open Graph

Разметка Open Graph — разработка Facebook. Кроме Facebook, ее также используют несколько других соцсетей: ВКонтакте, Google+, Twitter, LinkedIn, Pinterest.

Вот как выглядит пост в Фейсбуке, если мы размещаем ссылку на статью с разметкой Open Graph:

А так — если на странице нет микроразметки:

Код микроразметки Open Graph для изображений выглядит так:

Микроразметка Open Graph в исходном коде страницы

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

А еще у нас есть подробная статья о разметке Open Graph. 

Twitter Cards

Twitter Cards отвечает за внешний вид постов в Твиттере. Если этой разметки нет, Твиттер использует Open Graph.

Так выглядит код с разметкой Twitter Cards:

Микроразметка Twitter Cards в исходном коде страницы

Подробнее о микроразметке Twitter Cards — в руководстве Твиттера.

Как добавить

Для сайтов на WordPress микроразметку можно добавлять автоматически с помощью плагинов Yoast SEO или All In One Seo Pack.

Также есть плагины и для других CMS:

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

12. Структурированные данные Schema.org — для лучшего отображения

Free Image Optimizer — сжатие и изменение размера фотографий

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

Оптимизировать сейчас

Оптимизация

Качество: — Выберите — Минимальный размер файлаОчень маленький размер файлаМалый размер файла Нормальное Высокое качество Наилучшее качество *

Скачать бесплатно!

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

Зачем мне скачивать?

• Это супер быстро!
• Сжимайте изображения сразу!
• Это абсолютно бесплатно!
• Больше причин…

От создателей Image Optimizer

Учить больше

Как оптимизировать изображения и фотографии для Интернета (без потери качества)

Какое внимание вы уделяете оптимизации изображений в вашем магазине?

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

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

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

Только видео соответствует мощности изображения в этом отношении.

И вы используете свои фотографии везде:

• На страницах ваших продуктов.
• На страницах вашей категории.
• На вашей домашней странице.
• В твоей брошенной корзине сообщений.
• В вашем блоге.
• В ваших социальных сетях.
• Для вашей рекламы в Facebook.
• Для вашей ленты Google Покупок.

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

Что такое Google Speed ​​Update?

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

В январе 2018 года компания объявила, что алгоритмы мобильного поиска начнут учитывать скорость загрузки страниц с июля 2018 года.

Это называется обновлением скорости.

И есть 2 вещи, которые замедляют скорость загрузки страницы:

1. Слишком много javascript часто вызвано слишком большим количеством приложений и недостаточно встроенным на ваш сайт.
2. Слишком большие изображения, не оптимизированные для размера экрана.

Меньше приложений. Больше продаж.Только на BigCommerce

«Мы недавно перевели платформу с Shopify Plus на BigCommerce. Я не могу объяснить, насколько я зол на то, что в течение нескольких месяцев мы платили Shopify многие тысячи долларов за функциональность, которая входит в стандартную комплектацию BigCommerce!

Как только мы решили отказаться от Shopify, мы буквально потратили три дня на BigCommerce, устанавливая шаблон, настраивая, а затем завершая полный импорт продукта.

Отзывы, которые я получил от людей, с которыми я уже поделился сайтом, гласили: «Он загружается намного быстрее! Мобильный опыт стал намного лучше! »

— Ричард Эйб, Монро и Кент

Протестируйте свои данные в BigCommerce

Платформы, такие как BigCommerce, решают эту проблему:

1. Расширение функциональности платформы. В среднем магазины BigCommerce используют 2-5 приложений. На других платформах SaaS среднее значение +15.
2. Автоматическая оптимизация всех изображений для скорости загрузки страницы на любом устройстве. BigCommerce сотрудничает с Akamai, лидером в области оптимизации изображений в Интернете, чтобы автоматически оптимизировать все изображения для всех клиентов — без дополнительных усилий или затрат с их стороны.

Минус технический долг. Подробнее Продажи

«Решение о переходе на сеть Akamai Image Manager стало стимулом для наших продавцов, позволив им сократить время загрузки сайта и повысить общую производительность мобильных сайтов.

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

— Фрэнк Морралл, президент VisionCourse Media, агентства онлайн-маркетинга и дизайна и партнера BigCommerce.

Правда об оптимизации изображений, скорости и прибылях

Да, изображения являются одним из, если не самым важным активом для вашего интернет-магазина.

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

Почему?

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

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

Но с чего начать?

Мы вам поможем.

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

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

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

1. Первое впечатление важно.

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

На самом деле, в исследовании 2017 года, проведенном по заказу BigCommerce и Square, американские интернет-покупатели назвали дополнительную фотографию продукта как вещь №1, которую они хотят получить от онлайн-брендов.

Комплексное исследование покупательских привычек современных потребителей

Поскольку электронная коммерция растет на 23% в год, используйте это исследование, чтобы узнать, как сделать онлайн-продажи и личные продажи более удобными (и зарабатывать больше $$$!)

Получить данные сейчас

2.Картинка стоит 1000 слов.

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

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

Действительно, в том же исследовании, проведенном BigCommerce и Square, почти половина респондентов (49%) назвали невозможность потрогать, почувствовать или попробовать продукт как один из наименее любимых аспектов онлайн-покупок.

Это был второй наиболее ненавистный аспект онлайн-покупок в исследовании.

3. Мобильная связь берет верх.

По мере того, как мобильные покупки становятся все более распространенными, изображения будут становиться все более важными — о чем свидетельствует шаг Google Speed ​​Update.

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

Как вы думаете, покупатель сначала прочитает каждое описание или посмотрит фото?

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

4. Изображения могут навредить вашему сайту.

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

• Ваши изображения загружаются медленно?
• Вы не добавляли метаописание?
• Люди подпрыгивают, как только приземляются там?

Вы никогда не попадете на страницу 1 с таким поведением.

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

Оптимизация изображений и фотографий: краткое руководство

Первый шаг к оптимизации фотографии вашего продукта (или любого изображения на вашем сайте) — это сначала начать с отличных фотографий. А если вам нужна помощь в поиске профессиональных изображений для использования на вашем веб-сайте, ознакомьтесь с этим исчерпывающим ресурсом: «Более 35 сайтов для получения бесплатных изображений для коммерческого использования».

Но после этого большая часть процесса оптимизации остается за кадром.

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

Они не видят, что вы делаете, в конце концов, но вы получите более высокий рейтинг в поиске, что означает:

Добавьте к этому мощность и настраиваемость SEO вашего сайта (то есть полный контроль URL-адресов по всем направлениям), и вы выиграете в Google.

Давайте посмотрим, как это сделать, независимо от того, на какой платформе вы находитесь.

Автоматическая оптимизация изображений и полный контроль SEO

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

• Без дополнительных затрат.
• Не тратьте время зря.

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

Перенесите данные прямо сейчас и убедитесь сами, воспользовавшись 15-дневной бесплатной пробной версией.

Протестируйте платформу, которой вы управляете.

1. Начните с хороших фотографий.

Хорошая фотография для электронной коммерции начинается с правильного снимка.

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

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

Убедитесь, что у вас правильные настройки.

Настройка фотографии в электронной коммерции не должна быть дорогостоящей, но если вы только начинаете, есть несколько вещей, в которые вы должны инвестировать, чтобы делать качественные фотографии:

1. Бытовая цифровая зеркальная камера или смартфон. Большинство современных смартфонов имеют камеру, которой более чем достаточно для съемки стандартных фотографий продукта. Использование смартфона также дает вам доступ к сотням приложений для фотографий.
2. Источник света. Наличие источника света помогает обеспечить равномерное освещение вашего изображения и существенно повлияет на качество ваших фотографий. Если вы только начинаете, вам будет проще работать с естественным источником света. В этом случае использование заполняющего света поможет вам устранить тени на вашем изображении.
3. Белая зачистка. Развертка поможет равномерно распределить освещение по изображению и упростит последующее редактирование фотографий. Это может быть что угодно, от белого листа до рулонов бумаги.
4. Устойчивая поверхность. Если вы делаете несколько фотографий, наличие устойчивой поверхности позволяет легко размещать изображения в одном месте.
5. Штатив для камеры. Точно так же наличие штатива для камеры гарантирует, что вы всегда сможете получать фотографии с одинаковым расположением.Это также позволяет легко перенастроить ваши продукты без необходимости одновременно манипулировать камерой.

2. Продемонстрируйте свою продукцию под разными углами.

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

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

Например, в интернет-магазине одежды Olive Ave они используют различные снимки, чтобы продемонстрировать свой продукт.

Это можно сделать и без моделей. Взгляните на этот пример от KAOS.

Различные фотографии могут помочь продемонстрировать разные аспекты.

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

3.Используйте белый фон для ваших продуктов.

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

Белый фон является стандартным почти для каждого интернет-магазина, и для этого есть несколько очень веских причин:

1. Ваши товары будут отображаться на белом фоне
2. Ваши изображения будут выглядеть одинаково на страницах коллекции
3. Это спасет вас деньги и время на редактирование
4. Вы можете легко повторно использовать или заменить фон на любой из ваших фотографий.
5. Торговым площадкам, таким как Google Shopping и Amazon, теперь требуется белый фон.

Использование изображений на белом фоне позволяет легко сравнивать товары.Источник: jenis.

Вы можете использовать такое программное обеспечение, как Photoshop или Pixlr, чтобы вручную заменить фон фотографий вашего продукта белым фоном, или позволить сервисам, таким как Pixc, сделать эту работу за вас.

4. Сохраняйте изображения с правильными размерами.

Обращение внимания на размер вашего изображения имеет решающее значение, если вы не пользуетесь BigCommerce.

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

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

В вашем iPhone будет что-то вроде 12-мегапиксельной камеры, что означает, что фотографии, которые он делает, состоят из двенадцати миллионов пикселей. Фотографии, сделанные камерой 12 МП, будут иметь размер 3000 x 4000 пикселей.

Для фотографии в электронной коммерции этот размер не нужен. Например, в BigCommerce оптимальный размер фотографий вашего продукта составляет 1028 на 1028 пикселей, в то время как остальные фотографии должны быть меньше 1000 пикселей с обеих сторон.

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

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

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

Изображения можно уменьшать до различных размеров. Источник: Martha Stewart Cafe Shop

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

Сервисы, такие как Pixlr, Canva и Image Resizer, могут помочь вам с базовыми потребностями в редактировании и изменении размера.

Более быстрые кассы. Меньше развития.

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

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

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

Ваш магазин BigCommerce поддерживает три различных формата изображений: JPG / JPEG, GIF или PNG. У каждого из них есть свои преимущества и недостатки.

• Файлы GIF имеют меньшее качество, но также и размер файла. Если вам нужно создать изображение специально для небольших значков или миниатюр, вы, вероятно, захотите использовать GIF. Это также единственный доступный формат, который поддерживает анимацию (хотя следите за APNG). Однако по мере увеличения размера изображения GIF-файлы становятся менее эффективными при обработке цветов.
• Файлы PNG поддерживают более широкий диапазон цветов, а также единственный формат, поддерживающий прозрачный фон. Однако все это происходит за счет большего размера файла. Если вам нужно отредактировать фотографию несколько раз, вы захотите экспортировать ее как файл PNG.
• Изображения JPEG являются наиболее распространенным форматом, используемым в цифровых камерах и в Интернете. Они поддерживают широкий диапазон цветов, но настройки сжатия JPEG позволяют найти баланс между качеством изображения и размером файла.

JPEGS предлагает хороший баланс между размером файла и качеством, тогда как GIFS предлагает небольшой размер файла для более сложных изображений. Источник изображения: Brook Lark

6. Поэкспериментируйте с настройками качества.

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

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

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

Результат использования высокого, среднего и низкого сжатия JPEG. Источник изображения: Alex Jones

Когда не использовать JPEG.

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

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

Не в BigCommerce? Сжимайте изображения с помощью этого бесплатного инструмента.

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

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

Для всех остальных… давайте начнем здесь:

Если вы не знакомы с единицей данных Byte, каждый байт равен 1024 предыдущему.

Итак, чтобы уточнить:

1024 байта (b) = 1 килобайт (кб). 1024 Килобайт = 1 мегабайт (МБ). 1024 МБ = 1 гигабайт (ГБ)

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

Типичный размер файла фотографии iPhone 7 составляет около 3 МБ, что соответствует 3072 КБ или более чем 30-кратному оптимальному размеру изображения!

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

Большинство инструментов для редактирования изображений позволяют настраивать уровень сжатия файлов JPEG.

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

TinyJPG — одна из таких бесплатных услуг — бесплатный оптимизатор изображений — и принимает изображения как в формате JPG, так и в формате PNG.

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

TinyJPG показывает вам исходное изображение в сравнении с оптимизированным изображением.

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

Оптимизация изображений в поисковых системах 101

Изображения — фантастический источник органического контента, который может помочь вам повысить рейтинг в Google.

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

1. Используйте информативные имена файлов.

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

Имя файла по умолчанию, которое исходит от вашей камеры и выглядит как строка чисел, никак не описывает, о чем на самом деле фотография.

При именовании изображений опишите содержание фотографии и используйте тире вместо пробелов. BigCommerce не допускает пробелов в именах файлов изображений.

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

2. Включите соответствующий альтернативный текст.

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

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

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

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

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

3. Обеспечьте контекст вокруг изображения.

Контент, который окружает ваше изображение, также важен.

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

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

Здесь я обновил описание продукта, включив в него все свои ключевые слова: художественный принт, штриховой рисунок, счастливая женщина. Я также добавил дополнительный контент и детали в целях брендинга.

4. Используйте изображения для улучшения восприятия.

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

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

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

Уловка торговли: используйте открытый график, чтобы показывать правильное изображение в социальных сетях

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

Источник: Kelty

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

Вот где это можно сделать в бэкэнде BigCommerce для каждого отдельного продукта.

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

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

Контрольный список для оптимизации изображения продукта

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

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

Итак, применяете ли вы эти передовые методы, когда дело касается изображений ваших продуктов?

Вот контрольный список, чтобы убедиться, что вы делаете это в 100% случаев.

1. Настройтесь на успех.

• Прежде всего, установите камеру на штатив (или на любую твердую и устойчивую поверхность), чтобы избежать дрожания камеры.
• Затем убедитесь, что вы снимаете при достаточном освещении , чтобы осветить и ваш продукт, и все пространство для фотосъемки.Вы можете сделать это, используя несколько источников света (подойдут вспышки, стробоскопы и даже обычные настольные лампы), но самый простой способ — использовать естественное освещение.
• Используйте солнце как источник непрямого света. Сделайте снимок возле окна и, если оно слишком яркое, рассеивайте свет белыми одеялами, листами или бумагой. Освещение вашего продукта на этапе съемки позволит получить более качественную фотографию, а также сэкономит вам много времени на редактирование.
• Рассмотрите возможность съемки на белом фоне. На настройку уходит немного больше времени, но потом легче удалить фон, если вы захотите это сделать, и это поможет с калибровкой баланса белого вашей камеры. Кроме того, белый цвет отражает свет, тогда как более темные цвета поглощают его, поэтому ваш продукт, естественно, получится красиво осветленным и контрастным.

2. Сделайте несколько фотографий.

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

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

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

3. Сделайте снимки в контексте.

Затем продайте свой продукт с помощью некоторых контекстных фотографий продукта.

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

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

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

4. Очистите готовые фотографии.

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

Хорошая идея — удалить фон и позволить вашим продуктам говорить за вас.

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

Оптимизация изображений 101 — Оптимизация изображений в блогах для SEO

Из этой статьи вы узнаете ВСЕ, что вам нужно знать об оптимизации изображений для SEO.

На самом деле, я использую то же самое руководство для оптимизации изображений в моих сообщениях в блоге…

… чтобы сделать идеальное SEO на странице для моих сообщений в блоге.
… для ранжирования моих изображений в поиске изображений Google.
… и для привлечения трафика с помощью моих изображений.

Итак, если вы хотите сделать это и для своего блога, вы попали в нужное место.

Давайте нырнем.

Полное руководство по оптимизации изображений для SEO:

---

Зачем нужно оптимизировать изображения?

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

Преимущества оптимизации изображения:

• Сайты для обмена фотографиями, такие как Pinterest, могут привлечь огромное количество трафика.
• Фотографии отображаются в поисковых системах, и, поскольку в разделе изображений конкуренция намного меньше, вы можете легко повысить рейтинг своего изображения с помощью надлежащей оптимизации.
• Повышает показатель отказов вашего блога и увеличивает SEO-оценку вашей статьи.
• Если вы создаете собственные изображения, вы также можете получать обратные ссылки, когда некоторые другие блоги используют ваше изображение в своих статьях и дают вам ссылку на источник / кредит.

---

Поиск подходящих изображений для блога

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

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

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

Существуют такие сайты, как FreeDigitalPhotos, MorgueFile, Pixabay и т. Д., Которые предоставляют бесплатные стоковые фотографии, а также такие сайты, как ShutterStock, где вы можете получить высококачественные и профессиональные изображения, заплатив несколько долларов.

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

Было бы еще лучше, если бы вы могли создавать собственные изображения для своего блога.