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

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

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

Функция изображений на сайте?

Тут можно выделить несколько факторов. Во-первых, это визуальное восприятие материала статьи. Грамотно оформленная и проиллюстрированная статья, будет намного эффективней и полезней текста — «простыни».  В связи с этим, посетители вашего сайта будут дольше задерживаться, на ресурсе и тем самым повышать поведенческие факторы. На некоторых сайтах, например обучающих, без объясняющих изображений просто не обойтись.

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

Во-вторых, грамотно оптимизированные картинки помогут привлечь дополнительный трафик на сайт через сервисы картинок от поисковых систем Yandex и Google.

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

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

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

Уменьшаем вес картинки

Допустим, у вас уже есть уникальные изображения для статьи, и вы уже готовы ее опубликовать, но перед этим обязательно проверьте размер и «вес» файла. На моей практике клиенты часто загружали просто огромные картинки (по несколько мегабайт) и потом писали мне, почему у них долго грузиться сайт. Вы должны максимально уменьшать вес всех изображений, тогда скорость загрузки страницы будет высокой, и вы не будете терять своих посетителей. Существуют онлайн сервисы для оптимизации размера файла картинок, например, Kraken. С его помощью вы можете загрузить имеющиеся у вас изображения, прямо в веб интерфейсе. Для этого нужно перейти в режим Web Interface.

Далее нужно выбрать интересующий вас файл.

После чего вы сможете скачать уже оптимизированную картинку.

Честно говоря, я не использую этот сервис, а выполняю эту работу с помощью программы Photoshop.

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

3,2

и там уменьшаю до необходимых размеров.

3,1

Далее, после обработки изображения выбираю «File» — «Save for Web & Devices…».

4

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

3

Лично я изменяю, форматы картинок и отслеживаю в окне просмотра размер получившихся картинок.

6

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

5

Сохраняю изображение и проверяю результат.

7

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

Идем дальше.

SEO параметры изображения

  • title – отображается при наведении на картинку;
  • alt – так называемый альтернативный текст, который будет отображаться, в случае если ваша картинка будет не доступна.

Прописывая эти параметры, вы придаете картинке определенного смысла (ключа), по которому она будет находиться в поисковых системах. Так же параметр alt являеться необходимым привалидации верстки.

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

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

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

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

Поделиться в социальных сетях:
Нет комментариев к данной статье

Оставить новый комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *