Оптимизация размера изображения. На чем будем тестировать. Оптимизируем растровые изображения

30.10.2019

Для того, чтобы ваш сайт посещало большое количество человек, уверен на 100%, что вы пишите классные и большие посты.

Затачиваете их под НЧ и СЧ запросы, покупаете внешние ссылки, одним слово применяете стандартные правила SEO.

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

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

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

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

Что я делал с картинками на сайте не правильно? ВСЕ! Такого понятия, как , я знать никогда не знал и если бы не случай, никогда и не узнал.

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

Зачастую имена имели якобы оптимизированные картинки: 3456.png или as12.jpg . Интересно, какое ключевое слово они в себе несли с таким названием?

Поля «ALT» и «TITLE», которые можно было заполнить при добавлении очередной картинки на сайт, так и оставались полями, которые можно было заполнить.

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

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

Для чего нужна оптимизация картинок

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

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

В качестве примера давайте введем в строку поиска запрос «компьютер» и посмотрим на выдачу самых популярных систем: Яндекса и Google.

Гугл повел себя немного по другому от Яндекса.

Как видите в выдаче Яндекса, вверху над всеми результатами появились очень привлекательные (вкусные) картинки, которые так и манят сделать по ним переход.

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

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

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

3) Контент — рулит! Не сможете без супер мощного и классного контента, сделать популярный и полезный сайт, приносящий .

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

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

5) Скорость загрузки страниц блога. В наше время скоростных модемов никто не будет ждать больше 5-ти секунд, пока загрузится необходимая страница. А если не сделать оптимизацию изображения, тогда такая страничка не сможет загрузиться и через 20 секунд.

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

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

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

3) Не размещайте картинки вес, у которых больше, чем 50 Кб — помните о посетителях, которые не будут тратить час драгоценного времени, пока загрузится страница.

4) Обязательно оптимизируйте логотип своего сайта или компании. Это немного сможет уберечь собственные картинки от воровства и будет играть роль рекламы домена.

5) Используйте атрибут «ALT» . В данном атрибуте прописывайте альтернативное описание изображения. Именно то, что там будет написано, увидят пользователи, если выключен показ рисунков в браузере.

В данный текст, стоит включить ключевое слово, так как атрибут «alt» учитывается при ранжировании страниц.

6) Используйте атрибут «TITLE» . В данном атрибуте прописывайте то, что увидят пользователи, если наведут курсор мыши на картинку. Немного изменив описание атрибута «alt» можно использовать его и в «title».

7) Не забывайте про «HEIGHT» и «WIDTH» . Данные атрибуты указывают высоту и ширину изображения. Чем больше мы дадим информации поисковикам о картинке, тем лучше это скажется на выдаче.

8) Откажитесь от употребления анимированных картинок, если не хотите чтобы поисковики посчитали их за баннеры и не учитывали при ранжировании.

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

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

10) Называйте изображения правильными именами. Если вы поместили изображение о ремонте компьютера, тогда и имя у такой картинки должно быть соответствующее типа «remont-kompyutera» , но ни в коем случае не «16-nu» или что-то подобное.

11) Думайте о формате. Google и Яндекс воспринимают рисунки формата png и jpg , как фотографии, а формат gif , как картинки (кнопки или элементы дизайна).

12) Оптимизируйте не только картинку на странице, но и саму страницу. Чем больше вес будет иметь страница, тем больше его будет иметь и картинка.

Вот шаблон правильной оптимизации изображений:
изображения. Ну а из поля «Размер» выбираем необходимый размер width и height .
Заключение
Теперь у вас не возникнет проблем, чтобы правильно сделать оптимизацию графики статей и шаблона на сайте.
Как только у меня появится немного больше свободного времени, я планирую оптимизировать картинки всех старых постов площадки.
Если есть, вопросы задавайте — помогу всем. Пока!

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

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

Итак, в сравнении участвуют три сервиса:

По каким критериям будем сравнивать:

Удобство пользования:
Наличие Drag-and-Drop.

Возможность массового добавления и сохранения изображений.

Поддержка изображений с названиями на русском языке.

Название изображения при сохранении.

Поддерживаемые форматы.

Максимальный размер изображений.

Дополнительные функции или недостатки.

Оффлайн клиенты, плагины и расширения.

Собственно, самое главное: на сколько удалось уменьшить вес изображения.

На чем будем тестировать:

Четыре JPG картинки весом в 9.43Мб, 3.93Мб, 54.3Кб и 24.9Кб.

Три PNG картинки весом в 8.18Мб, 4.6Мб и 592Кб.

Четыре PNG картинки с прозрачностью или с полупрозрачными областями весом в 1.08Мб, 0.98Мб, 311Кб и 21.4Кб.

Три PNG картинки с текстом весом в 728Кб, 82.8Кб и 21.3Кб.

Приступим!

1. Удобство использования.

Все три сервиса поддерживают Drag-and-Drop (то есть можно просто перетащить изображение в браузер), но JPEGMini (без регистрации) и Compressor не поддерживают массовой загрузки изображений. К тому же, сначала на этих сайтах, в отличии от TinyPNG, нужно нажать на ссылочку «Try it» и только затем заливать изображения. И перед каждым новым изображением старое нужно сохранить. TinyPNG же даёт возможность загрузить одновременно до 20 изображений, чтобы сохранить их придётся покликать по ссылкам «Download», но проблемы это не представляет, потому что ссылки находятся аккурат друг под другом.
Если же зарегистрироваться, то возможность массовой загрузки и сохранения появится и в JPEGMini.

После оптимизации изображений с названием на русском языке JPEGMini выдает на сохранение файл с кракозябрами и без расширения. То есть вам нужно написать нормальное название и добавить самому расширение.jpg или.png. Compressor же и вовсе после оптимизации не даёт сохранить картинку. С TinyPNG всё работает как надо.

После обработки TinyPNG выдаёт файл с оригинальным названием, JPEGMini добавляет в конце _mini, а Compressor — -compressor.

Иногда, почему-то, сравнение фотографий не отображается

Панда довольна!

2. Поддерживаемые форматы.

JPEGMini обрабатывает только jpg, TinyPNG работает как с jpg, так и с png, а Compressor умеет сжимать jpg, png, gif и svg.

3. Максимальный размер изображений.

Хоть на JPEGMini и не удалось найти упоминания максимального размера загружаемого файла, но методом тыка получилось выяснить, что он, как и у Compressor, составляет 10 мегабайт. У TinyPNG возможности чуть скромнее — 5 мегабайт.

4. Дополнительные функции или недостатки.

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

После обработки Compressor даёт возможность сохранить файл в Dropbox или Google Drive, TinyPNG — только в Dropbox, у JPEGMini такой возможности нет.

После пары обработанных фото JPEGMini требует ввода капчи.

После завершения сжатия изображений на странице TinyPNG можно узнать общий объём сэкономленного места.

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

5. Оффлайн клиенты, плагины и расширения.

Разработчики JPEGMini предлагают к сайту ещё и оффлайн версию для WIndows и MAC (если купить PRO-версию, то можно получить ещё и расширение для Adobe Lightroom), а также серверное решение для сайта.

Команда TinyPNG предлагает плагины на WordPress, Magento, Adobe Photoshop, а также доступ к API.

6. Ну и в конце давайте сравним всё это в таблице, а также посмотрим кто и сколько места смог сэкономить.
Сравнение результатов сжатия изображений
JPEGMini Compressor
JPG, 9.43Мб 5.11Мб — 4.9Мб
JPG, 3.93Мб 3.69Мб 2.76Мб 3.09Мб
JPG, 54.3Кб 42.7Кб 51.2Кб 35.6Кб
JPG, 24.9Кб 16.8Кб 24.9Кб 12.8Кб
PNG, 8.18Мб — — 2.6Мб
PNG, 4.6Мб — 1.32Мб 1.4Мб
PNG, 592Кб — 160Кб 165Кб
PNG с прозрачностью, 1.08Мб — 411Кб 203Кб
PNG с прозрачностью, 980Кб — 239Кб 262Кб
PNG с прозрачностью, 311Кб — 103Кб 42.2Кб
PNG с прозрачностью, 21.4Кб — 21.4Кб 362Кб
PNG с текстом, 728Кб — 319Кб 268Кб
PNG с текстом, 82.8Кб — 30Кб 19.4Кб
PNG с текстом, 21.3Кб — 18.3Кб 29.1Кб
Итак, что в итоге?

В плане удобства TinyPNG бесспорный лидер. Можно за раз сжимать до 20 фотографий и быстренько их сохранять. При этом данный сервис поддерживает кириллицу в имени и сохраняет файлы с таким же именем.

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

Добавить изображение на сайт с помощью редактора Wix не составляет никакого труда, но это еще не значит, что дело сделано. В этой статье мы расскажем вам, почему не стоит недооценивать важность оптимизации изображений для сайта. Оптимизация изображений – это не только хороший способ удостовериться, что ваши фотографии будут отлично смотреться на сайте, но и еще один инструмент для привлечения органического (и бесплатного) трафика из поисковых систем. Вот пять простых советов, которые помогут вам максимально оптимизировать изображения для вашего сайта:

1. Используйте правильный формат: в конце названия каждого файла пишется его формат. Вероятно, вы уже знаете, что наиболее распространенными форматами изображений в сети являются.png, .jpeg и.gif. Но знаете ли вы, что все эти форматы могут отображаться по-разному при загрузке на сайт? Выбирая формат файла, дизайнеры смотрят на яркость цветов, размер, информационную плотность и многое другое. Но совсем не обязательно быть дизайнером, чтобы уметь оптимизировать изображения. Вы можете значительно улучшить ваши снимки, прочитав о трех основных форматах изображения.

2. Выберите качество изображения: практически все современные редакторы позволяют сохранять изображения разного качества (плюс вы всегда можете использовать бесплатные инструменты типа Pixlr , если вам нужны дополнительные настройки). Вы удивитесь, но сохранять изображение в наилучшем качестве - не всегда хорошая идея. Фоновые изображения и картинки, которым не обязательно иметь большое разрешение, можно сохранять в качестве чуть выше среднего, чтобы уменьшить размер файла и увеличить скорость загрузки сайта.

3. откройте папку с фотографиями на вашем компьютере и посмотрите: сколько из них имеют непонятные имена вроде image1.jpg , 012794.gif или пикник-июнь-2012.png ? Сразу сообщаем, что для загружаемых на сайт файлов такие имена не подойдут. Самыми правильными названиями для изображений являются те категории, по которым их могут искать в поисковиках. Правильно назвать файл важно потому, что поисковые машины считывают их названия для выдачи в поисковых результатах. Лучше всего, чтобы названия точно описывали изображения, используя при этом минимум символов.

4. Используйте названия и описания: при загрузке изображения на сайт следует добавить к нему название и несколько слов в описание (Альт-текст). Этот текст служит информацией о вашем изображении для поисковых роботов и помогает им лучше понять, чему посвящен ваш сайт, а значит и улучшает ваши позиции в поисковой выдаче. Вот почему так важно правильно описывать изображения. В идеале описание изображения должно содержать ключевые слова вашего сайта и при этом действительно являться текстовым описанием изображения. В нашем Центре поддержки объясняют, как добавить текст к изображениям в редакторе Wix.

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

Полная инструкция по SEO-оптимизации изображений на сайте. Узнайте как правильно заполнять атрибуты Alt и Title у картинок для поисковой оптимизации сайта под Яндекс и Google. Почему SEO-оптимизированные изображения важны для повышения релевантности и представления сайта в поиске? Обо всем подробнее в данной статье.
Изображения, gif-анимации и прочая графика является таким же важным элементом контента, как и текст. Правильная оптимизация изображений способна не только упростить и ускорить работу вашего сайта, сделать его более доступным для посетителей с разного рода ограничениями, но и привлечь дополнительный трафик на сайт, сделать его более релевантным пользовательским запросам .
Почему SEO-оптимизация изображений важна?
Прежде всего, изображения - это точно такой же индексируемый поисковыми системами контент, как и текст. Этот контент используется в формировании расширенных сниппетов и, конечно же, участвует в представлении сайта в сервисах "Картинки" соответствующий поисковых систем.
К слову, сервис Яндекс.Картинки является вторым сервисом Яндекса по посещаемости после web-поиска. Он содержит в себе около 10 миллиардов документов и ежедневно предоставляет более чем 5 миллионам пользователей доступ к проиндексированным графическим материалам.
SEO-оптимизация изображений - это достаточна простая для понимания работа, которая поможет вашему сайту:
Повысить релевантность страниц поисковым запросам;
Привлечь трафик из сервисов поиска по картинкам;
Улучшить скорость загрузки страниц и ;
Стать более доступным для пользователей с техническими или физиологическими ограничениями.

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

	JPEGMini		Compressor
JPG, 9.43Мб	5.11Мб	—	4.9Мб
JPG, 3.93Мб	3.69Мб	2.76Мб	3.09Мб
JPG, 54.3Кб	42.7Кб	51.2Кб	35.6Кб
JPG, 24.9Кб	16.8Кб	24.9Кб	12.8Кб
PNG, 8.18Мб	—	—	2.6Мб
PNG, 4.6Мб	—	1.32Мб	1.4Мб
PNG, 592Кб	—	160Кб	165Кб
PNG с прозрачностью, 1.08Мб	—	411Кб	203Кб
PNG с прозрачностью, 980Кб	—	239Кб	262Кб
PNG с прозрачностью, 311Кб	—	103Кб	42.2Кб
PNG с прозрачностью, 21.4Кб	—	21.4Кб	362Кб
PNG с текстом, 728Кб	—	319Кб	268Кб
PNG с текстом, 82.8Кб	—	30Кб	19.4Кб
PNG с текстом, 21.3Кб	—	18.3Кб	29.1Кб

Как Яндекс и Google индексируют картинки?

Изображение в HTML-коде любого документа выглядит подобным образом:

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

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

Текст . Самым значимым сигналом для определения содержимого изображения является текст. Описание изображения и атрибуты очень важны, так как на основании их и ближайшего текста около картинки, микроразметки поисковый алгоритм понимает суть контента, и использует эти данные в дальнейшем для определения уникальности изображения и необходимости добавления его в выдачу.
Искажения . Поисковые системы давно научились определять разного рода кропы, ресайзы, вращения, искажения и модификации изображений. Данные манипуляции не помогут Вам повысить уникальность картинок, поэтому следует использовать данные приемы только в целях дизайна.
Пользовательская составляющая . При ранжировании изображений в выдаче учитываются пользовательские запросы и опыт взаимодействия с картинками. Алгоритм является самообучаемым и учитывает интерес пользователей, количество кликов и их поведение в отношении тех или иных документов. Другими словами, чем популярнее изображение, чем больше пользователей в сети им делятся и проявляют к нему интерес, тем выше вероятность что изображение не только попадет в выдачу, но и займет там более высокие позиции по соответствующим запросам.
Время . Время обнаружения изображения поисковым роботом не является решающим сигналом в определении оригинальности. Данный показатель учитывается, но является гораздо более слабым по отношению к тексту и пользовательским интересам.
Соответствие текста и изображения . Поисковые системы определяют содержание изображения на основе текста, далее сравнивают текст вашего изображения с текстом всех дублирующихся изображений в сети до определенной степени схожести. Далее на основе всех текстовых данных всех дубликатов определяются наиболее релевантные слова для конкретного изображения, и опираясь на наибольшее текстовое соответствие выборке определяется релевантный вариант ключевого запроса, наиболее часто встречающийся во всех дубликатах. Наибольшее соответствие этому запросу повышает вероятность попадания именно вашего изображения в выдачу.
Качество, размер . Вполне логично, что поисковые системы добавляют в выдачу наиболее качественные изображения с наибольшим размером. Однако, чтобы не создавать избыточной потери трафика для пользователей учитываются изображения в среднем до 4-6 мб.
Водяной знак . Наличие water mark не влияет на оценку изображения. Поисковые системы с высокой степенью точности умеют определять дубликаты даже при наличии водяных знаков.

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

Если вам интересно подробнее узнать о алгоритме работы поискового робота картинок Яндекс, советуем вам посмотреть данное видео:

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

Чек-лист: 10 пунктов SEO-оптимизации изображений

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

1. Формат изображений

Поисковая система Google поддерживает индексацию следующих форматов графики: JPEG, PNG, BMP, GIF, WebP и SVG. Яндекс индексирует JPEG, PNG и GIF. Соответствующие форматы представлены в фильтре на странице выдачи Картинок.

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

В web-е появляются новые поддерживаемые форматы, которые позволяют создавать более сжатые изображения без визуальной потери качества. Сюда относятся, например, JPEG-XR, FLIF, WebP и другие. На сегодняшний день не все браузеры поддерживают данные форматы, поэтому лучше всего свой выбор остановить на всем известной четверке:

JPG ;
PNG ;
GIF;
SVG — для элементов дизайна .

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

2. Качество изображения

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

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

3. Размер и вес изображений

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

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

Zoom картинок делается с помощью JavaScript, что может воспрепятствовать индексированию оригинала Яндексом. Но это не имеет значения, так как при условии уникальности меньшая версия изображения и так попадет в поиск из вашего сайта. Так что пользователи при поиске конкретного артикула в Картинках будут видеть изображение с url вашего сайта.

На информационных сайтах необходимо использовать то разрешение изображения, в котором оно будет представлено на сайте . Для дисплеев с ретиной или 4k разрешением при необходимости добавляйте изображения в размере 2x и настройте отображение разных вариантов картинки в зависимости от типа дисплея пользователя .

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

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

Изображение по запросу "факторы ранжирования Яндекс" в Google Картинках

В Яндексе изображение ведет непосредственно на страницу сайта и использует описание изображение из атрибута Alt.

Изображение по запросу "200 факторов ранжирования Яндекс" в Яндекс Картинках

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

5. Название изображения

Поисковые системы могут учитывать названия изображений в определении их релевантности. Поэтому старайтесь не использовать в именах файлов спецсимволы и случайно сгенерированные буквы наподобие Zsndfsl_wetw.jpg или 23485792345.png. Также не стоит использовать в названиях графики кириллицу и пробелы. Называйте изображения латинскими буквами с использованием дефисов или нижних подчеркиваний, например, iphone.jpg или lamborgini-diablo.png. Если в название необходимо добавить русское слово, используйте транслитерацию, например, kupalnik.jpg.

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

6. Атрибуты изображений Alt и Title

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

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

Правильное заполнение атрибута Alt может повысить релевантность страниц, а также самих изображений в выдаче Картинок. Атрибут является одним из самых сильных сигналов для поисковых систем в определении содержимого изображения. Alt должен содержать в себе точную и короткую информацию о изображении. Старайтесь делать альтернативный описание не более 50-60 символов.

Атрибут title - заголовок изображения. Он отображается как всплывающая подсказка при наведении курсора на картинку. Данный атрибут в отличие от Alt является необязательным в изображении. Его использование может дать пользователю дополнительную информацию о графическом контенте. Если в HTML-коде страницы изображение заключено в тег , т.е. является ссылкой, использовать атрибут title необходимо в теге .