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

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

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

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

Зачем оптимизировать изображения перед загрузкой

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

• уникальность
• быстрая загрузка
• релевантность

Почему изображения должны быть уникальными и как это проверить

Начнем по очереди, и первым свойством у нас идет УНИКАЛЬНОСТЬ.

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

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

Загружать картинки путем ссылки на сторонние ресурсы не рекомендую, так как вы рискуете остаться с «пустым местом», если этот сторонний ресурс накроется медным тазом.

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

Где взять изображения для загрузки их на сайт

Да, кстати, именно так и будут искать наши картинки в будущем уже наши пользователи.

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

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

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

Первоначальная обработка изображений после скачивания

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

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

– Уникальное название

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

Как поисковой системе понять, что же изображено на этой картинке? Прежде всего это название файла. То есть очень часто мы заливаем картинки на сайт и называем их 111.jpg.

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

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

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

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

– Обработка в фоторедакторе или фотошопе

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

Редакторов много, в том числе и онлайн, но я использую Adobe Photoshop. Менее 15 градусов будет не эффективно.

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

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

– Проверяем на уникальность

После «уникализации» необходимо проверить ваше творение в сервисе: tineye.com. Можете почитать также мою статью “Как бороться с воровством контента и что делать, если уже сперли“. В ней я говорю о дополнительной защите изображений от кражи.

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

Большую роль играет и размер или вес картинки. Так как ее БЫСТРАЯ ЗАГРУЗКА будет намного приятней пользователю, она занимает меньше места на сервере. Скорость загрузки документа с изображением также сказывается на его ранжировании поисковыми системами, а значит и всего вашего ресурса.

Оптимизированное изображение может уменьшиться в размерах с 5мб до менее 20кб практически БЕЗ потери его качества. Делается это также с помощью редакторов.

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

Ни к чему загружать на сервер картинку с огромным размером, а потом делать из нее посредством WordPress маленькую размером 150px/150px.

В среднем ширина страницы блогов составляет 600px. Если загрузить картинку с пропорциями 800px/500px, то такое изображение, конечно, не поместится на страницу, и, чтобы вставить его, придется менять размер непосредственно в редакторе WordPress, а это нам совсем не нужно.

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

Для тех, кто не использует средний размер изображений можно отключить их сохранение и это уменьшит количество дубликатов и нагрузку на блог. Заходим в Админ-панель -> Параметры -> Медиафайлы и рядом со строчкой — «Средний размер» ставим 0.

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

Еще один важный момент, с которым я столкнулся позже. При создании постов я в качестве первого изображения создавал уникальные картинки довольно большого разрешения (500-700px в ширину) и после чего, это же изображение я устанавливал в качестве миниатюры. При просмотре на сайте эта миниатюра уменьшалась в размерах до 244*200 в “похожих постах” и до 150*120 на главной странице блога. Но фактические размеры то не изменялись! Всех учил а сам попался на такой мелочи)))

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

На самом деле сервис брал изображения из похожих постов и предлагал их сжимать почти на 90%, так как в миниатюре они, естественно намного меньше. В общем так я запорол несколько больших изображений (дооптимизировался), пока не заметил, что в самих постах картинки стали терять качество (уж точно я не мог такое г…. разместить в посте).

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

В названии файла для миниатюры я добавляю размер изображения (/images/kartika-200.jpg), чтобы при оптимизации сразу видеть, что это именно картинка от миниатюры, а не от основного большого изображения.

Какие форматы изображений лучше использовать (.jpg, .png, .gif)

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

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

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

Обязательно нужно использовать инструмент редактора по уменьшению качества изображения (для gif количество цветов).

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

Онлайн сервисы для обработки изображений

Есть несколько сервисов, показывающих уровень оптимизации изображений, например, вот несколько: gtmetrix.com, developers.google.com Они показывают, насколько еще можно оптимизировать ваш сайт, в том числе изображения.

Загрузка на сайт и оформление (alt и title)

Все, наше изображение готово к загрузке на сервер. В случае, если вы загружаете на сайт НЕ на платформе WordPress, где все это делается в автоматическом режиме, то ОБЯЗАТЕЛЬНО пропишите размеры в теги <height> и <width>. Эти теги мы разбирали тут в уроках по HTML.

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

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

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

Но это еще не все. Теперь необходимо сделать две вещи ОЧЕНЬ важные для оптимизации. Это заполнить атрибут ALT и заголовок (title) для изображения.

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

Сюда мы просто на любом языке, на котором наш сайт, пишем о чем была эта картинка. Ну, например, «новая модель ноутбуков apple». То есть, просто описываем содержание картинки.

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

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

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

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

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

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

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

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

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

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

Эти теги должны быть РЕЛЕВАНТНЫ тексту вокруг них и в идеале содержать все те же ключевые слова.

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

Поэтому в качестве заголовка (title) я советую использовать короткую фразу из близлежащего текста, отражающую смысл изображения, но не более 7-8 слов.

Об удобстве для пользователей и использовании плагинов

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

Не советую для оптимизации изображений использовать какие-либо плагины, так как работы и так немного, а кроме вас лучше не сделает никто. КАЖДАЯ манипуляция с оптимизацией изображений добавит вам трафика! Не ленитесь это делать. Потраченные на это 2 минуты, поверьте, стоят того…

Да, и напоследок, не забудьте проверить не запрещено ли у вас индексирование изображений в файле robot.txt ))))