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

Содержание

Как оптимизировать картинки для сайта: 4 способа

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

Первая сторона оптимизации – скорость загрузки

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

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

Хорошо, так как оптимизировать картинки прямо сейчаc? Здесь я предлагаю 2 способа:

Уменьшить размеры изображений до таких, которые необходимы для вставки в статью

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Сжать изображение. Это позволит незначительно потерять в качестве, зато вес картинки уменьшиться на 30-70%!

Размеры изображений

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

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

Многие идут еще дальше – они вставляют в текст совсем небольшие картинки – 200-300 пикселей в ширину, но при этом кликабельные. То есть в тексте отображаются только миниатюры изображений, а при клике они раскрываются в полном размере. Есть много плагинов для того же WordPress, которые позволяют это сделать. Например, Lightbox.

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

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

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

Сжатие картинок

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

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

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

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

Таким образом, появление картинок на web-странице может превратиться в вечность. Конечно, ситуацию нельзя оставлять так.

Пример сжатия картинки

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

Как видите, в оригинале это аж полтора мегабайта, что очень много для web-страницы. Нам для размещения в статье как раз подойдет разрешение 640 на 420. Как видим, изначально размер уже 147 килобайт, что в 10 раз меньше. Но все равно это по-прежнему достаточно немало, поэтому мы попробуем еще немного уменьшить картинку с помощью сжатия.

Ну а как, собственно, сжать фото? Тут я вижу два варианта:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Воспользоваться одним из онлайн-сервисов для этой цели. Найти вы их сможете самостоятельно, просто вбив в поиск что-то вроде “сжать фото онлайн”.

Открыть картинку в фотошопе. Нажать Файл – Сохранить для Web и задать нужные настройки.

Вот так это выглядит в фотошопе:

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

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

То есть для каждого изображения нужно смотреть индивидуально, как оно будет выглядеть при сжатии и выставлять тот или иной уровень качества. Например, для скриншотов, где очень важно что-то разглядеть, лучше не выставлять качество на столь низкий уровень, как 40. Лучше установить 60-80. Также не забудьте указать правильный формат изображения – jpeg.

Как сжать png изображения

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

Таким образом удавалось добиться снижения веса png-изображений в 2-3 раза без существенных изменений в качестве.

Спрайты или как оптимизировать запросы к серверу

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

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

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

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

Вторая сторона оптимизации – подписи к картинкам

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

Кроме title у изображений также есть атрибут alt, который вызывает еще больше споров, чем первый атрибут. Для начала необходимо разобраться, для чего они нужны. Title – это всплывающая подсказка, которая появляется при наведении на изображение. Alt – альтернативный текст, который будет показан только в том случае, если у пользователя будет отключен показ графики.

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

Так есть ли какая-то польза от заполнения alt и title? Можно сказать, что она определенно есть, но не такая большая, как думают некоторые (заполняй alt и попадешь в топ). Подробнее о том, как заполнять эти атрибуты я писал в прошлых статьях о них.

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

webformyself.com

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

Видео о том, как оптимизировать изображения для сайта. Под оптимизацией можно понимать две вещи:

Сжатие.
Вписывание дополнительных ключей.

Сначала мы поговорим о сжатии, а в конце про поисковую оптимизацию (таймкод).

Для чего сжимать картинки

Сжимать изображения нужно для того, чтобы они меньше весили. Чем меньше весят все файлы на странице, тем быстрее она загружается. Лет 10 назад было оптимально, чтобы страница весила не более 50 кб. Сейчас даже одно изображение может весить несколько мегабайт, поэтому назвать какой-то более-менее точный вес нельзя.

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

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

Как оптимизировать изображения

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

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

У меня уже открыт Photoshop и изображение, которое я хочу сжать. Я захожу в меню файл и нажимаю кнопку «Сохранить как». Далее я выбираю место сохранения и формат jpg.

В следующем окне появляется ползунок с качеством от 0 до 12. Выбираем насколько нужно сжать изображение. Тут же можно увидеть, сколько оно будет весить. Нажимаем «Ок».

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

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

Ещё на этом примере видно, почему не стоит переводить изображение в другой формат. Исходный скриншот был в png, а чтобы сжать я перевёл его в jpg. Скриншот сделан с помощью Joxy в статье про 5 частых жалоб от клиентов интернет-магазинов.

Если изображений много, можно использовать приложение MassImageCompressor. Открываем его. Указываем папку, формат, качество и разрешение. Можно разу увидеть, как сильно изменится картинка. Дальше нужно нажать «Compress all» и программа сожмёт все файлы в выбранной папке.

Поисковая оптимизация изображений

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

Если вы верстаете статьи на html, то нужно добавить два атрибута: alt и title. Выглядеть код будет вот так:

В WordPress и других движках, это делается при добавлении изображения. Нужно выбрать файл и заполнить поля «Заголовок» и «Атрибут alt».

kak-optimizirovat-izobrazheniya-dlya-sayta

texterra.ru

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

Полная инструкция по SEO-оптимизации изображений на сайте. Узнайте как правильно заполнять атрибуты Alt и Title у картинок для поисковой оптимизации сайта под Яндекс и Google. Почему SEO-оптимизированные изображения важны для повышения релевантности и представления сайта в поиске? Обо всем подробнее в данной статье.

Содержание статьи

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

Почему SEO-оптимизация изображений важна?

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

К слову, сервис Яндекс.Картинки является вторым сервисом Яндекса по посещаемости после web-поиска. Он содержит в себе около 10 миллиардов документов и ежедневно предоставляет более чем 5 миллионам пользователей доступ к проиндексированным графическим материалам.

SEO-оптимизация изображений — это достаточна простая для понимания работа, которая поможет вашему сайту:

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

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

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

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

<img src="https://naked-seo.ru/wp-content/uploads/2018/09/images-seo-optimization.jpg" alt="SEO-оптимизация изображений" title="SEO-оптимизация изображений и картинок для сайта">

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

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

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

4. Содержание изображения

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

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

Изображение по запросу «факторы ранжирования Яндекс» в Google Картинках
В Яндексе изображение ведет непосредственно на страницу сайта и использует описание изображение из атрибута Alt.
Изображение по запросу «200 факторов ранжирования Яндекс» в Яндекс Картинках
Основное изображение не является оригинальным и было взято из интернета с последующей графической обработкой и добавлением подписи на темном фоне, однако, как вы видите, оно участвует в выдаче картинок и может привлекать дополнительный трафик на сайт при высоком соответствии пользовательских запросов семантическому окружению изображения.
5. Название изображения
Поисковые системы могут учитывать названия изображений в определении их релевантности. Поэтому старайтесь не использовать в именах файлов спецсимволы и случайно сгенерированные буквы наподобие Zsndfsl_wetw.jpg или 23485792345.png. Также не стоит использовать в названиях графики кириллицу и пробелы. Называйте изображения латинскими буквами с использованием дефисов или нижних подчеркиваний, например, iphone.jpg или lamborgini-diablo.png. Если в название необходимо добавить русское слово, используйте транслитерацию, например, kupalnik.jpg.
Указывайте в названии файлов максимально релевантный текст содержимому изображения.
Правильное название изображения с использование транслита
Человекопонятные названия файлов удобны для пользователей, если они захотят поделиться ссылкой на ваше изображение или сохранить его локально на свой компьютер. При этом если вы описываете конкретные товарные модели в интервент-магазине, лучше указывать артикул или модель изображения, например, iphone-x.jpg или puhovik-wm180501.jpg.
6. Атрибуты изображений Alt и Title
Alt — атрибут изображения, который содержит альтернативное текстовое описание. Содержимое атрибута Alt отображается вместо изображения, если при его загрузке возникла ошибка. Выглядит это следующим образом:
Кроме того, содержимое тега Alt используется устройствами воспроизведения для людей с ограниченными возможностями, например, глухих или глухонемых. Пустое содержимое атрибута Alt не передаст данной категории людей никакой информации о ваших изображениях.
Правильное заполнение атрибута Alt может повысить релевантность страниц, а также самих изображений в выдаче Картинок. Атрибут является одним из самых сильных сигналов для поисковых систем в определении содержимого изображения. Alt должен содержать в себе точную и короткую информацию о изображении. Старайтесь делать альтернативный описание не более 50-60 символов.
Атрибут title — заголовок изображения. Он отображается как всплывающая подсказка при наведении курсора на картинку. Данный атрибут в отличие от Alt является необязательным в изображении. Его использование может дать пользователю дополнительную информацию о графическом контенте. Если в HTML-коде страницы изображение заключено в тег <a>, т.е. является ссылкой, использовать атрибут title необходимо в теге <a>.
7. Sitemap.xml и robots.txt для изображений
Для того, чтобы поисковые системы могли индексировать изображения, им должен быть предоставлен доступ к соответствующим директориям, в которых эти изображения располагаются. Если изображения вашего сайта не попадают в Картинки поисковиков, проверьте ваш файл robots.txt на предмет закрытия от индексации директивой Disallow папок с изображениями.
В дополнение к основной карте сайта Google рекомендует добавлять карту изображений sitemap-image.xml. Ее синтаксис выглядит подобным образом:
xml карта изображений Google
Поисковые системы индексируют изображения и без отдельной xml карты, но именно Google может это делать более эффективно при ее наличии.
Если вы планируете создать sitemap-image.xml, то укажите два разных пути к карте сайта для разных User-agent Яндекс и Google. В файле robots.txt пропишите для User-agent: Yandex ссылку на основную карту сайта, а для User-agent: Googlebot ссылку на карту сайта, которая будет содержать в себе ссылки на основную карту сайта со страницами и карту сайта с изображениями.
Например:
User-agent: Googlebot
Sitemap: https://naked-seo.ru/sitemap-google.xml
User-agent: Yandex
Sitemap: https://naked-seo.ru/sitemap.xml
8. Микроразметка
Данные из микроразметке могут использоваться поисковыми системами для определения релевантности изображений поисковым запросам. Добавьте данные ImageObject для изображений на вашем сайте. Использование микроразметки SchemaOrg позволит не только повысить видимость вашего сайта в сервисах поиска по Картинкам поисковых систем, но и улучшит отображение сайта при шэринге в социальных сетях, позволит повысить его шансы на получение расширенных сниппетов.
Документация по внедрению микроразметки http://schema.org/ImageObject
9. Уникальность
Уникальность является одним из самых значимых критериев попадания картинки в выдачу сервисов поисковых систем. Поисковики любят не только уникальные тексты, но и графику, и стараются представлять пользователям максимально разнообразную выдачу без дублирующихся материалов.
Приобрести уникальные изображения вы можете в фотобанках, которые специализируются на продаже графического контента, либо создать изображения самостоятельно, отредактировав бесплатные изображения в интернете с помощью графических редакторов.
Проверить уникальность картинки вы можете с помощью сервисов Яндекса и Google «поиск по картинке», либо с помощью сервиса Tineye.
10. Контекст использования
Помните, мы писали ранее, что поисковые системы определяют релевантность изображения на основе семантики всех дубликатов? Пришло время сделать небольшое исключение. Семантика вашего изображения, выбивающаяся из общей семантики всех дубликатов также может попасть в выдачу с картинками при условии высокой пользовательской активности. Чем популярнее в целом будет ваш контент, чем больше пользователей его будут читать, делиться им, тем выше вероятность использования ваших изображений в выдаче Яндекс и Google картинок.
Инструменты для оптимизации изображений
Оптимизация и сжатие изображений позволит вам значительно ускорить работу вашего сайта. Это положительно скажется на поведенческих факторах ранжирования и повысит позиции вашего сайта в выдаче. Вот несколько сервисов, которые помогут вам оптимизировать изображения без визуальной потери качества:
1. TinyPNG. Простой и бесплатный инструмент, который позволяет оптимизировать изображения в форматах jpg и png без потери качества. Сжатие уменьшает размер изображения до 90%. На TinyPNG можно одновременно загрузить до 20 изображений, максимальный вес которых может быть не более 5 мб. Для более расширенных возможностей предусмотрена платная версия.
2. Compressor. Схожий сервис с высокой степенью сжатия изображений, который поддерживает 4 графических формата: JPEG, PNG, GIF, SVG. Позволяет сжимать анимацию и SVG типом компрессии Lossy, jpg и png типом компрессии losseless, экономя до 90% места в ваших медиапапках.
3. Jpegmini. JPEGmini-это технология оптимизации фотографий, которая уменьшает размер файла фотографий JPEG до 5 раз, сохраняя при этом разрешение и качество исходных фотографий. Сервис позволяет сжимать только JPEG изображения.
4. ImageOptim. Онлайн-сервис и локальная утилита для работы на MacOS. ImageOptim поддерживает 4 самых популярных web-формата изображений: JPEG, SVG , GIF и PNG. Помимо сжатия самих изображений сервис удаляет мета-данные о изображениях: координаты GPS, серийный номер камеры, авторов и т.д. Эти данные порой добавляют графике излишний вес.
5. Kraken.io. Это надежный, сверхбыстрый оптимизатор изображений и компрессор с лучшими в своем классе алгоритмами, который поддерживает пакетную обработку фотографий, в том числе, по url-адресу сайта, но только на платной версии. В бесплатной версии доступно сжатие JPEG, SVG , GIF и PNG форматов с возможной детализацией параметров.
Как искать картинки в интернете для сайта?
Поиск Google и Яндекс. Самый простой и распространенный способ поиска картинок — это выдача поисковых систем. Google позволяет отфильтровать изображения с лицензией на использование, чтобы в дальнейшем избежать проблем с авторскими правами. Минусом данного метода поиска является высокая степень дублирования материалов. В выдаче поисковых систем по картинкам сложно найти малоиспользуемую в сети графику.
Платные Фотобанки. Depositphoto, Shutterstock и другие фотобанки предоставляют возможность вебмастерам приобретать графические материалы на платной основе. Данные материалы могут быть ранее куплены другими компаниями или оптимизаторами, поэтому часть из них уже можно найти в сети. Минусом является достаточно высокая стоимость контента.
Pexels. Сервис предоставляет высококачественные и полностью бесплатные стоковые фотографии под собственной лицензией. Все фотографии отлично размечены тегами и разбиты по тематическим категориям, что делает их поиск простым и удобным. Библиотека графического хостинга включает в себя несколько сотен тысяч изображений, и каждый день пополняется новыми материалами.
Unsplash. Сервис содержит более 550 000 бесплатных фотографий высокого разрешения и предоставляет абсолютно бесплатный доступ к ним. Все фотографии, опубликованные на Unsplash, могут быть использованы бесплатно как в коммерческих, так и некоммерческих целях.
Stocksnap. Все фотографии используются в рамках творческих объединений — СС0. Эта лицензия позволяет загружать, копировать, изменять и распространять фотографии, даже в коммерческих целях без всяких разрешений. Stocksnap имеет удобную навигацию, категорийность изображений. Не самый большой графический хостинг, однако, в нем можно найти много редко используемых материалов.
Burst. Еще одна платформа с удобным поиском и рубрикацией высококачественных и трендовых изображений с возможностью бесплатного использования в коммерческих и некоммерческих целях. Относительно небольшой графический хостинг, включает в себя мене 100 000 изображений. Однако их качество привлекает многих вебмастеров.
Reshot. Еще один хостинг графики, предоставляющий возможность бесплатного использования и преобразования контента. Содержит множество уникальных и высококачественных материалов, однако, не отличается удобной систематизацией контента. Поиск изображений возможен только по форме на сайте.
Pixabay. Содержит фото, иллюстрации, векторную графику и видео, в том числе, в 4k разрешении с возможностью бесплатного использования и редактирования. Позволяет отсортировать изображения по фотографам, альбомной ориентации, категории, размеру и преобладающей цветовой гамме. Содержит более 800 000 картинок.
Выводы
Итого, для эффективной SEO-оптимизации изображений необходимо:
Использовать индексируемые поисковыми системами форматы фалов;
Размещать на сайте сжатые изображения без визуальной потери качества в соответствие с тем разрешением, в котором они представлены на сайте;
Добавлять на сайт уникальные или переработанные графические материалы;
Прорабатывать атрибуты, описания и текст вокруг изображений;
Называть файлы в соответствие с содержимым картинок;
Добавить sitemap-image.xml на сайт для Google;
Внедрить на сайт микроразметку SchemaOrg;
Открывать для индексации медиафайлы в robots.txt;
Использовать бесплатные стоки картинок и инструменты по их оптимизации.
При создании и использовании изображений необходимо помнить, что, в первую очередь, контент вашего сайта предназначен для пользователей. И если ваш контент будет нравиться им, с высокой долей вероятности поисковые системы его тоже оценят!
Подписывайтесь на блог, делитесь статьей в социальных сетях, задавайте свои вопросы в комментариях и делитесь своим мнение по поводу SEO-оптимизации изображений.
Поделитесь статьей в социальных сетях:
naked-seo.ru
10 сервисов оптимизации изображений онлайн
При помощи онлайн сервиса можно произвести оптимизацию изображений онлайн для уменьшения размера изображений. Оптимизация изображений необходима для сайта, потому что изображения имеют очень большой размер, это существенно влияет на скорость загрузки сайта.
Оптимизация изображений для web нужна не только администраторам сайтов, но и обычным пользователям, так как и они загружают изображения на сайты, например, в социальных сетях. В большинстве случаев, сжатые изображения выглядят на сайтах как оригинальные (несжатые), отличия почти не заметны.
Перед загрузкой на сайт, изображения необходимо оптимизировать (сжать). Изображение низкого качества, при высоком уровне сжатия, имеют гораздо меньший размер. Низкий уровень сжатия приведет к большему размеру файла, но у него будет более высокое качество изображения.
Сжатие бывает разного качества: сжатие без потерь и сжатие с потерями. При проведении оптимизации изображения постарайтесь сохранить оптимальное соотношение между качеством и размером файла.
Далее читайте обзор 10 онлайн сервисов для сжатия изображений в форматах JPEG (JPG) и PNG, которые отличаются по своим функциональным возможностям.
TinyPNG
Онлайн сервис TinyPNG служит для оптимизации (сжатия) изображений в форматах PNG и JPG. Сервис имеет две идентичные страницы по разным адресам: tinypng.com и tinyjpg.com.
Откройте страницу TinyPNG, перетащите в специальную форму изображения в форматах .pnf и .jpg (можно загрузить файлы обеих форматов одновременно) со своего компьютера.
Особенности онлайн сервиса TinyPNG:
Поддержка форматов JPG и PNG
Загрузка на сервис до 20 изображений
Размер одного файла не более 5 MB
После обработки, в окне сервиса отобразится процент сжатия и общий размер сжатых графических файлов.
При помощи ссылки «download» загрузите на компьютер готовое изображение. Обработанные изображения можно сохранить в облачное хранилище Dropbox (кнопка «Save to Dropbox»), или скачать на компьютер сразу все изображения (кнопка «Download all»). Сохраненные файлы имеют оригинальное название.
Я использую этот сервис для оптимизации изображений, которые я добавляю на свой сайт. Вначале я обрабатываю картинки в программе Photoshop: изменяю размер (соотношение сторон) изображений, оптимизирую для web, сохраняю файлы в форматах «.jpeg» и «.png».
Далее я дополнительно сжимаю изображения на сервисе TinyPNG (TinyJPG), затем скачиваю на компьютер изображения наиболее меньшего размера в форматах JPEG или PNG.
JPEGmini онлайн
JPEGmini — онлайн сервис для сжатия графических файлов в формате JPEG. В JPEGmini есть одноименные программы для компьютера, в статье мы рассмотрим работу онлайн сервиса.
В окне сервиса нажмите на кнопку «Press to Upload Photos» для добавления фотографии, или перетащите изображение в специальную форму. Сервис имеет лаконичный интерфейс, нет никаких настроек.
После завершения обработки в JPEGmini, в окне сервиса отображается оригинальный размер файла, размер файла после сжатия, степень компрессии (у разных файлов разное сжатие). Поддерживается преобразование файла размером до 10 MB.
Без регистрации на сервисе сжимаются одиночные изображения, после регистрации появится возможность для групповой загрузки фотографий. Изображения можно загрузить в Web альбом, а затем скачать оттуда в архиве.
Optimizilla
Онлайн сервис Optimizilla.com предназначен для сжатия файлов графических форматов JPEG и PNG. Сервис Optimizilla имеет версию на русском языке.
Особенности сервиса Optimizilla com:
Загрузка до 20 изображений
Хранение сжатого файла на сервисе в течение 1 часа
Загрузите файлы на сервис при помощи кнопки «Загрузить» или перетащите файлы с компьютера в специальную форму. После обработки, на миниатюре изображения отобразится степень компрессии (сжатия) в процентах. Сжатое изображение можно скачать на компьютер, нажав на «скачать» на картинке изображения, или при помощи кнопки «Скачать все».
На сервисе Optimizilla можно изменить качество сжимаемой фотографии. После завершения преобразования, показано качество по умолчанию для данного изображения. Перемещая курсор по шкале качества, можно изменить качество обработанного файла, улучшая или ухудшая качество, выбрав наиболее подходящее.
Online Image Optimizer
Сервис Online Image Optimizer работает на сайте tools.dynamicdrive.com. Онлайн сервис предназначен для сжатия файлов форматов GIF, JPG, и PNG.
Online Image Optimizer имеет следующие возможности:
Предельный размер загружаемого файла — 2.86 MB
Преобразование файлов между форматами JPG, PNG, GIF
Обработки файлов проходит в три этапа:
Вставьте ссылку на URL адрес файла в поле «Enter the url of an image» для загрузки файла из интернета или загрузите файл с компьютера при помощи кнопки «Обзор…».
Выберите формат для преобразования файла в поле «convert to:». По умолчанию файл сохранится в том же формате. Для конвертирования выберите один из поддерживаемых форматов: PNG, JPG, GIF.
Для запуска обработки нажмите на кнопку «optimize».
После обработки, на странице сервиса откроется несколько изображений с разной степенью сжатия. Выберите нужное изображение, кликните по нему правой кнопкой мыши, в контекстном меню выберите соответствующий пункт для сохранения изображения на свой компьютер.
Compressor.io
Онлайн сервис Compressor.io для уменьшения размера изображений с поддержкой нескольких графических форматов.
Особенности сервиса Compressor io:
Поддержка форматов: JPEG, PNG, GIF, SVG
2 типа компрессии: lossy (с потерями) и lossless (без потерь, только для JPEG и PNG файлов)
Поддержка изображений до 10 MB
Вначале выберите тип компрессии: lossy или lossless. Далее перетащите изображение в специальную форму, или выберите файл с компьютера при помощи кнопки «select file».
После завершения оптимизации изображения, в окне сервиса отобразится изображение, оригинальный размер, сжатый размер, размер сжатия в процентах.
Сжатую фотографию можно скачать на компьютер, или сохранить в облачных хранилищах Dropbox или Google Диск.
JPEG Optimizer
На сайте jpeg-optimizer.com работает онлайн сервис JPEG Optimizer. Поддерживаются файлы в формате JPEG.
Преобразование файлов проходит в 4 этапа:
Нажмите на кнопку «Выберите файл», выберите фотографию с компьютера, который вы хотите оптимизировать.
Выберите уровень сжатия между значениями 0-99, который вы хотите применить к изображению. Уровень сжатия по умолчанию равен 65.
Если вы хотите изменить размер изображения, выберите новую ширину изображения, размер изображения пропорционально измениться.
Нажмите кнопку «Optimize Photo», чтобы получить новое изображение.
После завершения обработки, откроется изображение, под ним вы увидите характеристики файла. Для сохранения, кликните по изображению, выберите сохранение на компьютер.
Web Resizer
Web Resizer — бесплатный онлайн инструмент изменения размера фотографий. Сервис Web Resizer обладает расширенными возможностями:
Поддержка файлов до 10 MB
Обрезка изображения, отступ в изображении
Выбор размера, качества, поворот изображения, изменение резкости
Изменение оттенка, воздействия, контрастности, насыщенности цвета
Изменение границы изображения
Для добавления фотографии (JPEG или PNG) нажмите на кнопку «Выберите файл», выберите изображение на компьютере, а затем на странице сервиса нажмите на кнопку «upload image».
Вы можете выбрать нужный размер для изображения, отредактировать его по своему усмотрению.
Для загрузки на компьютер нажмите на ссылку «download this image».
Для одновременного изменения группы изображений существует другая веб-страница сервиса Web Resizer.
Image Optimizer
Image Optimizer — сервис для сжатия фотографий онлайн. На сайте предлагается программа Image Optimizer.
В сервисе Free Image Optimizer выберите файл, а затем настройте параметры оптимизации изображения: выберите качество фото, максимальную ширину и высоту. Далее нажмите на кнопку «Optimize Now!»
IMGonline
IMGonline.com.ua — мощный сервис на русском языке для обработки файлов в формате JPEG. Сжатие изображений онлайн — одна из возможностей сервиса.
Сжатие изображений JPEG на сайте MGonline проходит в три последовательных этапа:
Выбор изображения с компьютера.
Параметры сжатия JPEG: размер изображения, выбор качества и т. п.
Обработка изображения.
Можно открыть обработанное изображение, или скачать его на компьютер.
Compressjpeg com
Онлайн сервис compressjpeg.com служит для сжатия изображений в форматах JPEG и PNG. Дополнительно сервис поддерживает сжатие файлов в формате PDF.
Сжатие изображений производится в отдельных вкладках для каждого формата (JPEG, PNG, PDF). Максимальный размер обрабатываемого файла — 10 MB.
Сжатие JPEG происходит по следующему алгоритму:
Загрузите до 20 изображений в форматах jpg или .jpeg. Для загрузки используйте кнопку «Загрузить» или перетащите картинки в зону загрузки.
Скачайте сжатые изображения по одному или сразу в общем ZIP-архиве.
Для изменения вручную качества сжатия, кликните по изображению. В панели настроек выберите качество, перемещая ползунок вверх или вниз для регулировки качества картинки.
Сжатие PNG изображений и файлов PDF происходит аналогично.
Выводы статьи
В статье представлен обзор 10 онлайн сервисов для оптимизации изображений, которые работают, в основном, с форматами JPEG и PNG. Некоторые сервисы, кроме сжатия изображений, предоставляют дополнительные возможности для обработки фотографий.
Похожие публикации:
vellisa.ru
Оптимизация изображений для сайта — советы по оптимизации картинок на сайте
Вес изображений влияет на скорость загрузки сайта и на поведенческие факторы. Когда время составляет больше трех секунд, нетерпеливые пользователи уходят, не дождавшись окончания загрузки. Оптимизация изображений для сайта помогает уменьшить его вес и увеличивает быстродействие.
Однако оптимизация картинок — всегда компромисс между скоростью работы и качеством изображений. Поэтому перед оптимизацией обязательно оцените вес сайта и долю изображений. Оптимизируйте, если изображения занимают 50% веса и более.
Оптимизируем векторные изображения
На веб-страницах можно использовать векторные или растровые изображения. Вставляйте векторные изображения, когда на них изображены геометрические фигуры или подобные. Для иллюстраций с множеством сложных деталей и нестандартных форм они не подходят, потому что они будут выглядеть нереалистично. Применяйте векторную графику для логотипов, значков и прочего. Они останутся четкими и яркими в любом размере, масштабе и на экране любого разрешения.
Векторные изображения имеют основный формат svg. Файл svg можно создать прямо в текстовом редакторе с помощью тега <svg>. Также разметку svg встраивайте в веб-страницу.

Уменьшить размер векторных файлов можно, оптимизировав их с помощью решения svgo. Он очищает файлы от бесполезной информации: комментариев и скрытых ненужных элементов. Файлы становятся меньше, но качество отрисовки остается на прежнем уровне.
Оптимизируем растровые изображения
Растровые изображения состоят из пикселей. Каждый пиксель содержит информацию о цвете и прозрачности в цветовой модели RGBA (red, green, blue, alpha — прозрачность). В браузере 256 оттенков на каждый канал цвета, который в пересчете занимает 8 битов. Каждый пиксель весит: 4 канала х 8 бит = 32 бита или 4 байта.

Легко рассчитать вес фотографий самостоятельно, зная размер в пикселях. Допустим, изображения имеет размер 50 х 50 пикселей. Это 2 500 пикселей.
1 пиксель = 4 байта.
2500 пикселей х 4 байта = 10 000 байтов
10 000 байтов / 1024 = 10 КБ
Пример расчета веса изображений для разных размеров:

Размер изображения   Количество пикселей Вес файла, КБ
100 х 100 10 000 39
250 х 250 62 500 244
500 х 500 250 000 977
800 х 800 640 000 2500
Фотографии и изображения с множеством деталей не заменишь на векторную графику. Если фотографии просто уменьшать в размере, то при открытии в большом размере и на экранах с высоким разрешением они будут выглядеть размыто и нечетко. Это происходит из-за того, что фотография распадается на пиксели, поэтому основная задача — оптимизировать фотографии с минимальной потерей качества. Для этого есть несколько способов.

Снижаем глубину цвета. Иногда широкая палитра для отображения цветов не нужна. Если каждый канал имеет 256 оттенков, то мы имеем более 2500 цветов. Ограничьтесь палитрой в 256 цветов всего, тогда на каждый канал будет приходиться 2 бита вместо 8, а пиксель будет весить 2 байта вместо 4. Мы уменьшили вес изображений на сайте в два раза.

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

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

Когда на сайте фотографии большего размера, чем нужно, пользователь вынужден принимать лишние данные. При приведении размера к требуемому убираются лишние размеры и вес изображения. Отсекаются лишние пиксели, каждый из которых весит 4 байта. Это простой метод снижения веса, и он не требует специальных знаний или использование программ-оптимизаторов.
Размер изображения больше всего лишь на 10 пикселей, но вес прибавляется существенно:
Фактический размер Отображаемый размер   Лишний вес, пиксели
210 х 210 200 х 200 210х210 — 200х200 = 4100
510 х 510 500 х 500 510х510 — 500х500 = 10 100
910 х 910 900 х 900 910х910 — 900х900 = 18 100

Сжимаем данные
Перед оптимизацией оцените, насколько правильно выбраны форматы изображений. В растровой графике есть прозрачность и анимация, но не в каждом формате она поддерживается.
  Прозрачность
ДА НЕТ
Анимация ДА GIF —
НЕТ PNG JPEG
Используйте только подходящие форматы для изображений. Например, png не сжимается с потерей данных, поэтому он всегда будет весить много. Используйте формат png только для изображений, где важно показать мелкие детали. Для этого можно использовать разные инструменты.

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

Compressor сжимает картинки на 90% в формате lossy. Есть и второй режим — lossless, в котором сжимают без потери качества файлы png.

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

Jpegtran оптимизирует изображения в формате jpeg. Это утилита, которая входит в libjpeg. С ее помощью убираются метаданные из изображения. При сжатии указывайте значение самостоятельно. Подберите наилучшее соотношение методом подбора, попробовав значения от 5 до 95.

Optipng — инструмент сервиса Google Page Speed. С его помощью сжимайте картинки png без потери качества. Сжатие происходит разными способами. Основная идея — игнорирование ненужных функций. Например, полноцветности для черно-белых картинок.

Gifsicle оптимизирует gif файлы. Позволяет изменить размер в процентном соотношении или обрезать до нужных размеров.

Pngquant может сжимать изображения png с потерями качества. Инструмент конвертирует 32-битные файлы png в 8-битные.

Compressjpeg сжимает картинки в формате jpeg. Два главных плюса: русскоязычный интерфейс и загрузка 20 картинок одновременно.

Прописываем мета-данные
Название файла. Все картинки называйте понятными словами, используя латиницу. Если файлы уже были названы по-русски, переведите названия, используя сервис «Транслит». Избегайте спама в названии и нечитаемых символов.
Нет Да

дом_кп_лесное.jpeg

img792138.jpeg

kupit-dom-nedorogo.jpeg

dom-kp-lesnoe-front.jpeg

dom-kp-lesnoe-uchastok.jpeg

cottage-kp-lesnoe.jpeg

Поле Title. Когда пользователь наводит курсор на картинку, ему подсвечивается текст, прописанный в поле title. Прописывайте в это поле название фотографии. Пишите на русском.
Нет Да

Отдых Подмосковье

Фото378

Домик на базе отдыха цена

Въезд на базу отдыха «Лесные просторы»

Интерьер домика на базе отдыха «Соловьи»


Поле Alt. Указывайте описание файла. Если фотография не загрузится, пользователь увидит описание из Alt. Поля title и alt могут совпадать по описанию. Лучше их заполнить одинаково, чем оставить пустыми. Обязательно добавляйте в мета-теги ключевые слова, но избегайте переспама. Делайте описания естественными и информативными.
Шпаргалка
Вес изображений влияет на загрузку сайтов. Оптимизировав изображения, вы снизите вес и повысите быстродействие.

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

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

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

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

Масштабируйте изображения, чтобы привести их к размеру, который нужен для отображения на сайте. Размещая на сайте фотографии большего размера, вы вынуждаете пользователей скачивать лишние данные. Я оптимизирую изображения даже на 10 пикселей больше, чем требуется. Проверяйте соответствие размеров в Инструментах разработчика Chrome.

Используйте подходящие форматы: gif — для анимации, png — для прозрачности и для отображения мелких деталей, jpeg — для остального. Для сжатия воспользуйтесь сервисами: gif — ezGIF, Gifsicle, для png — Compressor, Optipng, Pngquant, для jpeg — Imagify, Jpegtran, Compressjpeg.

Называйте файлы латиницей и понятным названием. В поле Title указывайте название картинки, в поле alt — описание. Title и Alt могут совпадать. Пишите понятные описания для людей, включайте ключевые слова, избегайте переспама.

Материал подготовила Светлана Сирвида-Льорентэ.
www.ashmanov.com
Как оптимизировать изображения для сайта
Для того, чтобы ваш сайт посещало большое количество человек, уверен на 100%, что вы пишите классные и большие посты.
Затачиваете их под НЧ и СЧ запросы, покупаете внешние ссылки, одним слово применяете стандартные правила SEO.
А знакомо вам такое понятие, как оптимизация изображений, насколько грамотно вы делаете ее на своем блоге (применяете ли оптимизацию картинок для сайта в целом).

Дело в том, что когда я только начинал вести данный блог, чтобы хоть как-то украсить статьи, я старался вставлять в них изображения.
Вы скажите, а что тут такого, парень молодец делает контент более привлекательным для читателей. Я так тоже думал, пока не попал под фильтр АГС от Яндекс.
После такого печального события с моим блогом, я очень серьезно стал относиться к ведению, продвижению и наполнения площадки интересным материалом.
Что я делал с картинками на сайте не правильно? ВСЕ! Такого понятия, как seo оптимизация, я знать никогда не знал и если бы не случай, никогда и не узнал.
Мне почему-то казалось, что если взять чужую картинку с других сайтов и скопировать себе, тогда это будет считаться, что у меня появилось уже мое собственное изображение, а алгоритмы поисковиков никак не смогут этого определить.
Зачастую имена имели якобы оптимизированные картинки: 3456.png или as12.jpg. Интересно, какое ключевое слово они в себе несли с таким названием?
Поля «ALT» и «TITLE», которые можно было заполнить при добавлении очередной картинки на сайт, так и оставались полями, которые можно было заполнить.
Ни когда не повторяйте моих ошибок. На чужих учитесь, а не на своих. И тогда ни какие фильтры от поисковиков вам не будут страшны, а посещаемость будет только расти.
В данной статье мы научимся правильно делать оптимизацию изображений, разберемся какую она играет роль в увеличение трафика на сайте.
Для чего нужна оптимизация картинок
1) Для того, чтобы ваш сайт получал дополнительных посетителей благодаря переходам по картинкам в выдаче поисковиков.
Обращали ли вы свое внимание, что при некоторых запросах в поисковиках, в выдаче над всеми результатами показываются и картинки, релевантные данному запросу.
В качестве примера давайте введем в строку поиска запрос «компьютер» и посмотрим на выдачу самых популярных систем: Яндекса и Google.
Гугл повел себя немного по другому от Яндекса.
Как видите в выдаче Яндекса, вверху над всеми результатами появились очень привлекательные (вкусные) картинки, которые так и манят сделать по ним переход.
У системы Google ситуация немного иная, так как картинки там появились по центру выдачи, но не думаю, что это как-то помешает собрать дополнительный трафик на сайт.
Немаловажен такой факт, что если вы не выходите в ТОП по какому-то определенному запросу, это не значит, что если сделать оптимизированную картинку под этот запрос, она не выйдет на верхние позиции картинок. Парой так и бывает, что по продвигаемому запросу находишься внизу топ, а по изображениям вверху.
2) Если вы хотите продвинуть коммерческие запросы, то скорее всего, люди будут находить их в выдаче картинок, поэтому здесь оптимизация играет самую важную роль.
3) Контент — рулит! Не сможете без супер мощного и классного контента, сделать популярный и полезный сайт, приносящий пассивный заработок.
А статьи, наполненные только материалом (без использования картинок) не будут привлекательными для посетителей и не смогут раскрыть всю суть вашей мысли. Лично я, если попадаю на страницу, которая представляет собой только один текст, покидаю ее навсегда.
4) Алгоритмы роботов поисковых систем придают статьям, использующим изображения, куда больший вес, чем однородному тексту.
5) Скорость загрузки страниц блога. В наше время скоростных модемов никто не будет ждать больше 5-ти секунд, пока загрузится необходимая страница. А если не сделать оптимизацию изображения, тогда такая страничка не сможет загрузиться и через 20 секунд.
Как делается оптимизация картинок — 12 советов
1) Картинка должна быть уникальная. Об этом я писал в начале этого поста. Если вы думает, что поисковики не умеют определять изображения на уникальность, то вы глубоко заблуждаетесь.
Если приходится использовать заимствованные картинки, тогда старайтесь их хоть немного изменить (измените формат, размер, угол поворота или делайте коллаж).
2) Чем больше размер изображение занимает на странице, тем лучше это скажется на выдаче ее в результатах картинок.
3) Не размещайте картинки вес, у которых больше, чем 50 Кб — помните о посетителях, которые не будут тратить час драгоценного времени, пока загрузится страница.
4) Обязательно оптимизируйте логотип своего сайта или компании. Это немного сможет уберечь собственные картинки от воровства и будет играть роль рекламы домена.
5) Используйте атрибут «ALT». В данном атрибуте прописывайте альтернативное описание изображения. Именно то, что там будет написано, увидят пользователи, если выключен показ рисунков в браузере.
В данный текст, стоит включить ключевое слово, так как атрибут «alt» учитывается при ранжировании страниц.
6) Используйте атрибут «TITLE». В данном атрибуте прописывайте то, что увидят пользователи, если наведут курсор мыши на картинку. Немного изменив описание атрибута «alt» можно использовать его и в «title».
7) Не забывайте про «HEIGHT» и «WIDTH». Данные атрибуты указывают высоту и ширину изображения. Чем больше мы дадим информации поисковикам о картинке, тем лучше это скажется на выдаче.
8 ) Откажитесь от употребления анимированных картинок, если не хотите чтобы поисковики посчитали их за баннеры и не учитывали при ранжировании.
9) Текст, который окружает картинку должен включать в себя ключевые слова. Роботы Яндекса и Гугла придают больший вес тегам <h2>,<h3>,<h4> и т.д., поэтому употребление их в тексте рядом с картинками будет только плюсом.
10) Называйте изображения правильными именами. Если вы поместили изображение о ремонте компьютера, тогда и имя у такой картинки должно быть соответствующее типа «remont-kompyutera», но ни в коем случае не «16-nu» или что-то подобное.
11) Думайте о формате. Google и Яндекс воспринимают рисунки формата png и jpg, как фотографии, а формат gif, как картинки (кнопки или элементы дизайна).
12) Оптимизируйте не только картинку на странице, но и саму страницу. Чем больше вес будет иметь страница, тем больше его будет иметь и картинка.
Вот шаблон правильной оптимизации изображений:
<img title="название изображения, используя ключевое слово" src="http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg" alt="альтернативное название с ключевиком" />
<img title=»название изображения, используя ключевое слово» src=»http://seoslim.ru/wp-content/uploads/2012/05/besplatno.jpg» alt=»альтернативное название с ключевиком» />
Так как я использую wordpress, поэтому он помогает в оптимизации. При добавлении очередной картинки нужно только заполнить необходимые поля и оптимизация почти готова.
Выбираете нужное изображения и в поле «Заголовок» прописываем title картинки. В поле «Текст» пишем alt изображения. Ну а из поля «Размер» выбираем необходимый размер width и height.
Заключение
Теперь у вас не возникнет проблем, чтобы правильно сделать оптимизацию графики статей и шаблона на сайте.
Как только у меня появится немного больше свободного времени, я планирую оптимизировать картинки всех старых постов площадки.
Если есть, вопросы задавайте — помогу всем. Пока!
seoslim.ru
SEO-оптимизация картинок. Что, зачем, и как
Под «оптимизацией» страниц сайта обычно подразумевается особая подготовка мета-тегов и текста. Особенно текста. Вы нанимаете копирайтера, выдаете ему список ключевых слов, расписываете ТЗ с кучей параметров, потом два-три дня все это дело правите, чтобы подходило под все требования…
Это правильно – текст на странице должен быть особенным. И нужные слова включать, и длины быть подходящей, и чтобы читать интересно было. Но за всем этим часто забывают об еще одном, не менее важном факторе оптимизации сайта – о seo-оптимизации картинок.
Да, картинки на сайте тоже нужно готовить к продвижению. Зачем это делать, на что обратить внимание, и как – читайте дальше.
Что такое seo-оптимизация изображений?
Интернет — это визуальная среда. И хороший сайт просто не может существовать без картинок. А если вы хотите хорошо продвинуть сайт, то не стоит забывать и об оптимизации изображений.
Оптимизация картинок подразумевает под собой использование максимально сжатых, но при этом визуально привлекательных, и подготовленных для продвижения картинок.
Теперь обо всем по порядку.
Для начала нужно немного теории и статистики.
У каждой страницы на сайте есть свой вес. И согласно последним данным, среднестатистический вес одной страницы увеличился на 240%, если сравнивать показатели за 2010 и за 2016 года. И 64% всего содержимого в сети – это изображения.
Источник изображени
adtimes.ru