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

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

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

Формат

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

• JPEG Image – прекрасно подходит для фотографий, реалистичных изображений. Задача алгоритма состоит в аккуратном сжатии сцен, с плавным переходом между светом и тенью, низкой контрастностью. Так сохранится качество на прежнем уровне, но в то же время существенно снизить вес в несколько раз, что позволит странице грузиться намного быстрее;
• PNG служит для любой графики, рисунков, схем, чертежей. В отличие от JPEG, он сжимает изображение без потерь, поэтому соседние пиксели не размываются при сохранении в этом формате. Однако платой за чёткость послужит вес – крупные, детализированные PNG-схемы могут весить десятки мегабайт;
• SVG, в отличие от остальных, представляет собой векторный формат. Сохранение “в векторе” значит, что увеличение любой части картинки будет происходить без потери качества, а записанный на неё текст будет индексироваться поисковыми машинами. Однако далеко не все браузеры поддерживают формат, что может привести к определённым проблемам.

Дополнительно стоит заметить, что Яндекс отдаёт предпочтение GIF, широко использовавшийся до появления PNG. Эти четыре основных формата помогут вашему сайту занять высокие позиции в поисковиках.

Качество

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

Размер

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

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

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

Размещение

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

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

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

Уникальность

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

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

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

Названия

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

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

Альтернативный текст, он же тег alt – чрезвычайно важный инструмент, одинаково хорошо влияющий как на поисковую выдачу сайта, так и на её восприятие пользователями. Ему уделяется большое значение в SEO-оптимизаторах по следующим причинам:

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

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

Где можно оптимизировать картинки

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

Широкой популярностью также пользуются онлайн-сервисы по изменению изображений. Сайты, подобные Compressor, Kraken, TinyPNG, JPEGMini Online, другие их аналоги предлагают быстрое, качественное сжатие до нужного размера, а также небольшие изменения картинки.