Оптимизация картинок для размещения на сайте

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

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

Кому мешают большие картинки

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

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

Итак, я включаю в понятие «оптимизация картинок» три основных этапа:

  • уменьшение размеров,
  • прописывание правильного названия,
  • правильная публикация.

Начнем с обработки и уменьшения размеров. Я опишу, как это делать в программе Microsoft Office Picture Manager, поскольку в ней просто работать и у многих она установлена в пакете офис. Безусловно, это можно делать в любой другой программе обработки изображений.

В статье об уникализации картинок перечислены 5 шагов, способных сделать картинку уникальной. Для оптимизации своей уникальной картинки при помощи Microsoft Office PictureManager достаточно будет последних двух. Это значит, что вам нужно будет выполнить такую комбинацию шагов:

1. Нужную фотографию выделяем правой клавишей в проводнике — открыть с помощью MO Picture Manager.

2. Рисунок – изменить размер – стандартные ширина и высота — выбираем нужный размер. Рекомендую максимально использовать 600х800 пикселей — это будет уже достаточно большая для просмотра на мониторе картинка (можете кликнуть на картинку в начале поста, чтобы оценить размер). Если картинку не нужно будет рассматривать, можно использовать и меньшие разрешения, предлагаемые программой: 640х480 пикселей или 448х336 пикселей. Кроме того, вы можете задать и свои произвольные размеры, соблюдая пропорции 3:4.

Или

2. Рисунок – сжать рисунок – для веб-страниц (устанавливается размер 448х336 пикселей).

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

А если вы настолько продвинуты, что для обработки картинок используете программу Adobe Photoshop, то вам должна быть прекрасно известна команда «Сохранить для веб» — она позволяет сжать картинку фактически одним движением (уменьшить вес без потери размеров. Смело применяйте эту функцию, выполняя второй шаг инструкции. ;)

А теперь немного цифр

Фотография, которую вы видите в начале поста, в оригинале имеет размеры 3648х2736 пикселей и «весит» 3,52 МБ. При изменении размеров до 800х600 пикселей ее вес стал равен 275 кб, а при сжатии до размеров 448х336 пикселей – 60,6 кб. Почувствуйте разницу! А ведь это и скорость загрузки страниц, и дополнительное место на хостинге.

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

P.S.  Пост о третьей составляющей оптимизации картинок – правильной публикации, который был обещан уже давно, обязательно выйдет вслед за этим уже через несколько дней. Кому интересно, не пропустите.

Еще по теме:

6 комментариев

  1. Сергей Трутнев Ноябрь 5, 2012 8:15 дп  Ответить

    А еще для уменьшения веса картинок можно пользоваться онлайн-сервисами, например, http://www.jpegmini.com/main/my_account#tab/myAlbums. Правда для тех, кто совсем не дружит с английским будет немного сложновато разобраться, но тут придет на помощь онлайн-переводчик, который используется практически в любом браузере.
    Также стоит обратить внимание на расширение, используемое картинкой. Наименьшим весом без потери качества является расширение jpeg (оно же jpg), и предложенный выше сервис обрабатывает именно это расширение.

    • Алина Самульская Ноябрь 5, 2012 11:28 дп  Ответить

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

  2. Наталья Май 2, 2013 2:07 пп  Ответить

    Спасибо, за статью! Все кратко и доступно. Сейчас буду применять на своем сайте.

  3. Александр Январь 12, 2016 5:22 пп  Ответить

    Алина, а что это за плагин вы используете для просмотра картинок на вашем сайте?

Добавить комментарий

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)