Новый взгляд на оптимизацию изображений
Опубликовано: 01.09.2018
Здравствуйте, друзья!
Созрел материал, который раскроет ответы на трепещущие вопросы в оптимизации изображений .
На блоге я уже делал подобный материал, где высказал свое мнение на основе анализа других источников и дал прописные истины. Эта же статья прекрасно дополнит уже существующий материал и раскроет ответы на те вопросы, которые возможно вас волновали.
По крайней мере существует часть людей, которым данная информация будет ой как полезна. Очень много посещений я каждую неделю получаю по запросам, на которые сейчас дам ответы.
Очень много посетителей приходит по запросу "alt и title одинаковые ". Не знаю с чем это связано. Возможно кто-то пытается узнать, должно ли так быть. А может быть кто-то анализирует другие ресурсы и там данные атрибуты являются одинаковыми. Так давайте же дадим ответ на данный вопрос и раскроем истину.
Alt и title должны быть одинаковые?
Никто никому ничего не должен. Тут точно так же. Могут быть, но не должны. В прошлой статье я сделал вывод, что данные теги нужно заполнять одинаковыми. Я не отрицаю своей точки зрения. Но делать их можно одинаковыми только в том случае, если это уместно. Если вы хотите заполнять их идентичным только для продвижения под поисковые системы, то не стоит. Выкопаете себе яму в конце концов.
Что обязательно стоит помнить, когда заполняете теги alt и title:
alt является обязательным и его в 100% необходимо заполнять. Является неким стандартом и, если мы его не укажем, то будет ошибка валидации. Альт дает поисковым системам понятие, о чем же само изображение. К тому же именно по данному тегу возможно найти картинку в поиске. Итог - тег alt влияет на ранжирование; title не является обязательным и его можно не заполнять вовсе. Но, при грамотном его использовании вы можете помочь пользователю взаимодействовать с картинкам на ресурсе. Мы уже знаем, что данный тег выступает в качестве подсказки, когда наводишь на картинку. Из этого следует, что можно в теге title ввести фразу "нажмите для увеличения", если это имеет смысл и картинка действительно увеличится при клике. Это очень поможет пользователю.Кроме этого можно вписать в данный тег описание самого изображения. Это менее уместно, так как по картинке посетитель и сам видит, что там проиллюстрировано. Но, если изображение сложное, то не помешает; alt выступает в качестве страховочного тега, когда изображение по каким-либо причинам (удалено с хостинга и т.д.) становится недоступным. Вместо изображения будет написано содержимое данного тега; Так как атрибут alt принимает участие в ранжировании при построении картиночной выдачи, то целесообразно вписывать в него ключевые слова, но делать это с умом - вписывать только те ключи, которые относятся к изображению и описывают его. В таком случае данная картинка будет доступна в поиске по перечисленным в теге alt ключевым словам. Это значительно может повысить трафик по картинкам на ресурс; Если использовать вариант заполнения альтернативного текста изображения (атрибут alt) с ключевыми словами, тогда title лучше не делать одинаковым, так как пользователю он не будет нести полезную информацию и ничем не поможет при взаимодействии с картинками. Это именно тот случай, когда вы можете быть уверенным, что альт и тайтл не должны быть одинаковым. В таком случае лучше в title вписать описание изображения (что на нем изображено); Если изображение представлено на сайте в уменьшенном размере в виду больших оригинальных размеров, то обязательно сделайте функцию его увеличения при клике на картинку или же открытие в новой вкладке в оригинальном размере.В этом случае целесообразно в теге title дать подсказку "нажмите для увеличения (откроется в новой вкладке)" или другие варианты, которые дадут понимание пользователю, что он может посмотреть картинку в ее полном масштабе. Это очень важно. Тут также понятно, что альт и тайтл ну никак не будут одинаковые.Вывод из всего вышеописанного - все зависит от самого изображения и от задач, которые вы преследуете от процесса оптимизации изображений. Но помним, что если стоит выбор между поисковыми системами и пользователем, то делаем упор в сторону пользователя, так как от него зависит продвижение ваших страниц и сайта в целом.
к содержанию ↑Как правильно заполнить alt
Из предыдущего пункта вы знаете, что данный тег является обязательным и именно он влияет на ранжирование ваших картинок в поиске по изображениям. Исходя из этого логично вписывать ключевые слова. Возьмем в пример следующее изображение.
Думаю, вы догадались, что данная картинка может быть доступна в поиске по многим ключевым фразам, так как изображено на ней много чего и под многое она подходит. Как вариант, я выделил следующий список ключей, которые и заполнил в тег alt:
пейзаж, деревья, трава, небо, природа, красивый вид
Согласитесь, что все это подходит под данное изображение и логично ему ранжироваться по данным совам и фразам. Если бы я только вписал "пейзаж", то это:
Во-первых снизило бы шансы, что данная картинка вообще приносила бы трафик из ПС, так как доступна только по одному ключевому слову, которое не факт, что было бы в ТОПе по картинкам; Во-вторых, было бы доступно по меньшему количеству запросов, что само по себе даст меньше трафика.Так что мешает вписать пару тематических ключевых слов, которые явно не будут лишними?
Конечно же, вписав пару ключей в альт вы не добьетесь того, что сразу заполоните ТОП поиска по картинками и будут собирать трафик, так как тут играют много факторов, одно из которых - уникальность картинки .
Наверняка, данный файл уже проиндексирован множеством других источников, которые уже занимают первые места в выдаче по данной картинке. Ваши шансы в данном случае сведены практически к нулю. Но все же лучше пусть будет хоть какой-то заметный эффект при грамотном использовании ключей в атрибуте альт, чем его полное отсутствие.
к содержанию ↑Как правильно заполнить title
В принципе, вы уже знаете основные принципы грамотного заполнение тайтла, прочитав информацию выше. Но, чтобы подвести какие-то итоги, сделаем краткий чек-лист.
Title не обязательно должен дублировать alt. Можно также и дублировать, но тогда полезность тайтла для посетителя сводится к нулю. Так как тайтл выступает в роли подсказки пользователю, то желательно вписать то, что поможет посетителю. Если же продублируем содержимое атрибута альт, то ошибки в этом не будет, но и вопрос пользы для посетителя также ставится под сомнение; Если мы говорим о кликабельных изображениях и о графических элементах навигации (например, логотип), то логично в тег title вписать действие, которое будет совершено при клике. Например, наведите курсором на картинку ниже.
Если взять логотип, то логично вписать "перейти на главную", так как пользователь догадывается, что именно это и будет. Тег тайтл это только подтвердит ему и поможет совершить действие. К тому же не все знают, что логотип ведет на главную. Тут также данный тег поможем незнающим;
Если говорить не о кликабельных картинках, а о каких-то сложных схемах или изображениях, которые стоит изучать и рассматривать, то логично в тайтле дать подсказки по изображению. Это связано с тем, как происходит изучение подобных изображений пользователем.
Если посмотреть в Вебвизор Яндекса, то при изучении посетитель постоянно водит по картинке и по тем элементам, которые на ней изображены. Если мы а тайтле впишем подсказки, то при нахождении курсора на изображении, пользователю высветится подсказка и это поможет ему понять содержимое картинки.
А вообще, если говорить о заполнении и использовании каких-то необязательных элементов на сайте, каковым тег title для изображения и является, то лучше всегда задаваться вопросом:
Что будет лучше, использование или полное отсутствие?
Ответив на данный вопрос, вы поймете, как правильно работать с отдельными элементами на сайте. Но касается это только необязательных вещей.
к содержанию ↑Подпись изображений
Кроме вышеописанных тегов и атрибутов, изображения на сайте можно подписывать. Данная функция так и называется - "Подпись". Не знаю, как на других движках, но на WordPress так и называется.
Она из себя представляет дополнительный поясняющий текст к картинкам, яркий пример которого даю ниже.
Процесс похудения: а) исходная форма, б) конечный результат
То, что вы видите под картинкой и является подписью. Как можете заметить, то в некоторых случаях подпись очень нужна и уместна, так как делает контент более понятным и интересным.
Вот еще один вариант подписи изображения с другого ресурса.
Наверняка, вы редко где встретите примеры использования подписей, так как ими почти никто не пользуется. А зря. Многие просто не знают о таком функционале, а многие просто не знают, что он действительно нужен, а в некоторых случаях без него вовсе не обойтись.
Если взять пример с другого сайта, который я представил выше, то конечно же можно описать неправильную технику приседаний и околокартиночным текстом вне подписи, но тогда внимание зрителя размыливается и велика вероятность, что текст не будет прочтен. В данном же случае пользователь видит картинку и сразу кидается в глаза подпись (описание), которая достигает своей цели. Посетитель читает ее и удовлетворяет свой информационный голод. Ну а ниже под подписью можно уже расписать все очень подробно.
Кстати, а вы используете подписи?
Итак, как же сделать подпись и что в ней нужно писать? И вообще, всегда ли нужно?
Естественно, подпись ко всем картинкам делать не нужно. Это не имеет никакого смысла, так как от каждого типа изображений преследуются разные цели.
Если мы говорим об изображениях, использующихся для окраски текста, чтобы разбавить текст графикой, то подпись не нужна, так как нет цели донести информацию пользователю такими картинками.
Если же берем в учет какие-то пошаговые скриншоты, где шаг за шагом описываем процесс, то подпись использовать уместно, объясняя каждый шаг действия. Также это очень важно для изображений различных схем. Посмотрите любую книгу со схемами. На схеме имеются условные обозначения, которые затем в подписи расшифровываются. На сайте стоит делать точно так же.
Подпись стоит использовать и для комплексных изображений, как на примерах выше, где в одной картинке совмещаются различные варианты чего-либо. В подписи описываем каждый вариант.
Касаемо содержания подписи, то в ней мы пишем описание картинки.
В WordPress подпись делается очень просто. При добавлении картинки на страницу, в ее редакторе вместе с полями для заполнения alt и title будет и поле для ввода подписи.
После ее добавления, под изображением появится подпись. Все вроде бы и работает, но, чтобы сделать подпись более заметной и чтобы вообще было понятно, что это подпись, стоит сделать небольшое выделение общей области картинки.
Когда подпись добавляется, то изображение оборачивается дополнительным блоком, имеющим класс wp-caption. И ему можно задать оформления, дописав стили в файл style.css.
Вот мои стили, которые я сделал для своего блога. Пример оформления смотрите выше на примере с похудением.
|
.wp-caption { border : 1px solid #BDC3C7 ; /***рамка***/ padding : 15px 15px 0px 25px ; /***внутренние отступы***/ background : none repeat scroll 0% 0% #F1F4F5 ; /***фон***/ } |
Также вы можете оформить и текст подписи, который имеет класс wp-caption-text. Тогда в файл стилей дописываем следующий код и внутр скобок вписываем стили.
|
.wp-caption-text { сюда вписываем стили для текста подписи } |
С данным моментом, я думаю, все предельно просто и понятно. Двигаемся дальше.
к содержанию ↑Все ли картинки должны быть кликабельны
Данный вопрос также стоит затронуть в этом материале, так как мы рассматриваем совсем иной подход к оптимизации и затрагиваем те моменты, которые не учитывают другие оптимизаторы сайтов.
Очень часто сталкиваюсь с моментом, когда на других площадках абсолютно все изображения кликабельны. Это связано не с тем, что имеет смысл их просмотреть в полном размере по клику, а вот просто кликабельны. Установили какой-то плагин и он во все картинки добавил функцию кликабельности. Правильно ли это с точки зрения юзабилити?
С точки зрения поисковых систем функция кликабельности не дает никакой пользы. А вот для пользователя возможность просмотреть изображение при нажатии на него во всплывающем окне дает плюсы. Самый явный плюс - это возможность разобрать, что же изображено там вообще. То есть, первый момент - если картинка размещается не в полном размере на странице, то обязательно она должна быть кликабельна, чтобы можно было просмотреть ее в полном размере или хотя бы в более увеличенном.
Всем понятно, что не все изображения будут настолько велики и нуждаться в увеличении при клике. Поэтому, не все должно иметь возможность клика. Как минимум, такой ход будет довольно странный, когда все кликается, ведь не во всех случаях это уместно.
Обязательно кликабельность должна быть у изображений со схемами или мелкими деталями, а также у больших скриншотов, так снимки, которые мы делаем с экрана монитора зачастую имеют довольно много мелких элементов, который должны быть рассмотрены пользователем.
Это то, что касается стандартных моментов, применимых ко всем ресурсах. Что же касается каждого сайта индивидуально, то вы должны понимать, что у каждой тематики имеется своя потенциальная аудитория у которой выработаны персональные действия по работе с сайтами. Если взять техническую аудиторию, то в большинстве случаев она будет кликать по изображениям, т.к. их основная графика представляет из себя схемы и чертежи, которые на сайте размещаются в сжатом виде и нуждаются в увеличении.
Если вы не знаете свою аудиторию, то в помощь вам анализ. Лучше всего это делать с помощью Вебвизора от Яндекса, где можно видеть все клики в течении одного посещения пользователем. Проанализировав свой ресурс я четко вижу, что достаточно много кликов идет по скриншотам, на которых изображены мелкие элементы. Клики происходят даже в том случае, когда данные скришоты предоставлены сразу в полном размере. Пользователь все равно кликает, чтобы увеличить, так как ему хочется рассмотреть все более детально.
Интересную вещь говорил Роман Пузат, что на сайте про кулинарию, на странице, где размещено довольно большое изображение доски с ножом, по ней кликали. Вроде бы и так все понятно. Но нет же, имеются домохозяйки, которые пытаются понять, что это за доска и что за нож.
Поэтому, только анализ поведения посетителя. У каждой аудитории поведение будет отличаться. Исходя из этого и стоит делать какие-то выводи. Но стандартных правил мы придерживаемся всегда.
Схемы, чертежи, скриншоты и изображения с изображенными на них мелкими элементами всегда делаем кликабельными. Кстати, очевидно, что открытие картинки по клику увеличивает время проведенное на странице, что сказывается на ее продвижении.
Поэтому, стоит пользоваться данным функционалом. Но опять же - только с умом и в нужных случаях.
На этом сей материал я заканчиваю. Надеюсь, что я осветил в нем старые вопросы оптимизации картинок в более развернутом ключе, а также затронул новые мысли и подходы. Буду рад, если вы будете применять мои наблюдения и знания.
До скорой.
С уважением, Константин Хмелев!
