Оптимизируем изображения для сайта – 5 рекомендаций

Karina | 02.10.2014

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

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

Зачем нужно оптимизировать картинки

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

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

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

1. Качество изображений

Высокое качество фотографий – это хорошо, но в Интернете действует немного другое правило: оптимальное соотношение качества картинки и веса файла. Существует большое количество редакторов, которые могут уменьшить вес изображения на 50-70% без заметной потери качества. Да, в процессе такой оптимизации фотография определенно кое-что теряет, снижается насыщенность некоторых цветов, но всё это делается таким образом, что человеческий глаз почти не видит изменений. Картинка остается такой же четкой и презентабельной, но весит, допустим, уже не 400 Кб, а 90 Кб. Чем больше фотографий находится на одной странице, тем больше внимания нужно уделять их весу.

2. Размер фотографий

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

3. Формат файлов

Наиболее используемыми форматами файлов изображений в Интернете являются JPEG, PNG и GIF. Так с каким же расширением лучше сохранять картинки? Давайте остановимся подробнее на каждом из них и разберемся, когда какой формат лучше использовать:

JPEG (файлы с расширением .jpg, .jpeg)

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

PNG (файлы с расширением .png)

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

GIF (файлы с расширением .gif)

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

Ниже приведен пример фотографии, сохраненной с разными расширениями файла. Наиболее ощутима разница при сохранении файла в формате GIF – появляется т. н. «лесенка»:

 
А это скриншот текста, сохраненный сначала в формате PNG, а затем в JPEG с качеством «ниже среднего». Обратите внимание на артефакты, которые появились во втором варианте:

Скриншот, сохраненный в форматах PNG и JPEG. Во втором случае текст теряет четкость из-за сильного сжатия JPEG.

4. Названия файлов

Перед тем как загрузить изображения на свой сайт, постарайтесь дать им понятные названия. Есть две причины, почему стоит это делать. Во-первых, вам самому будет легче ориентироваться в своих файлах, ведь, например, название teapot-on-the-beach.jpg уже дает подсказку о том, что находится на фото, в отличие от названия IMG_6078.jpg. А во-вторых, не забывайте о поисковых системах, которые тоже читают названия ваших файлов и используют эту информацию при выдаче.

5. Alt и Title

Добавляйте к изображениям на сайте атрибуты ALT и TITLE (которые должны находиться в теге IMG). Именно они помогают поисковым машинам определять, что изображено на картинке. Alt – это текст, который отображается на странице вместо картинок, если у пользователя по какой-то причине они не загрузились. Title – описание, которое можно увидеть при наведении курсора на изображение. Не стоит придумывать слишком длинные описания для этих атрибутов, всё должно быть лаконично.

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