Управление контентом – это не только работа с текстами, но и умение обрабатывать картинки. Даже если вы не профессиональный контент-менеджер, а владелец блога или сайта, оптимизация картинок, публикуемых на страницах ресурса, поможет вам ускорить их загрузку и привлечь дополнительный трафик из поисковых систем.
О важности наличия картинок и их уникальности я уже писала в статьях о шагах уникализации картинок и правильном оформлении постов в блоге. Теперь разберемся с оптимизацией.
Кому мешают большие картинки
Для тех, кто использует свои изображения и фотографии, часто проблемой становятся их размеры и «вес», т.е. объем занимаемой памяти на хостинге. Наша задача – оставить картинку достаточно большой для просмотра, но при этом сделать ее «легкой». Благодаря этому она не будет нагружать сайт и будет быстро открываться у читателей с разной скоростью Интернета.
Картинки больших размеров имеют дополнительные преимущества: они не только позволяют читателю разглядеть детали, но и помогают продвинуть сайт при индексации — поисковые системы ставят такие картинки выше. Поэтому предлагаю использовать такой подход: оставлять их достаточно большими, а при публикации выбирать миниатюру или средний размер, в зависимости от дизайна вашего блога.
[stextbox id=»info»]
Итак, я включаю в понятие «оптимизация картинок» три основных этапа:
- уменьшение размеров,
- прописывание правильного названия,
- правильная публикация.
[/stextbox]
Начнем с обработки и уменьшения размеров. Я опишу, как это делать в программе 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. Пост о третьей составляющей оптимизации картинок – правильной публикации, который был обещан уже давно, обязательно выйдет вслед за этим уже через несколько дней. Кому интересно, не пропустите.
А еще для уменьшения веса картинок можно пользоваться онлайн-сервисами, например, http://www.jpegmini.com/main/my_account#tab/myAlbums. Правда для тех, кто совсем не дружит с английским будет немного сложновато разобраться, но тут придет на помощь онлайн-переводчик, который используется практически в любом браузере.
Также стоит обратить внимание на расширение, используемое картинкой. Наименьшим весом без потери качества является расширение jpeg (оно же jpg), и предложенный выше сервис обрабатывает именно это расширение.
Спасибо, Сергей, и за сервис, и за напоминание о расширении. Действительно, сохранять лучше в .jpg, такие картинки и поисковики лучше ранжируют.
Спасибо, за статью! Все кратко и доступно. Сейчас буду применять на своем сайте.
Пожалуйста, Наталья, пользуйтесь. И заходите еще, буду рада Вас видеть!
Алина, а что это за плагин вы используете для просмотра картинок на вашем сайте?
Александр, это плагин Lightbox Plus Colorbox.