Главная » Создание сайта, раскрутка сайта

Как оптимизировать изображения, картинки, фотографии?

оптимизация изображений

Как оптимизировать изображение?

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

Оптимизация размера изображения

Размер загруженного Вами изображения очень редко будет совпадать с размером, в котором он будет показан конечному пользователю. Например, изображения на моём сайте, которые добавляются в статью, средствами CSS или HTML сжимаются до 512 пикселей в ширину. При этом сохраняется пропорция ширины на высоту. В статье пользователь видит изображение в 512 пикселей в ширину. Если же изображение имеет в ширину менее 512 пикселей, то изображение будет показано в оригинальном размере. Все вроде бы схвачено. Но мы лишний раз напрягаем сервер и заставляем его сжимать изображение. Если перед загрузкой мы изменим ширину картинки до 512 пикселей, сохранив при этом пропорции, то мы лишим сервер необходимости напрягаться по этому поводу. В результате страница будет открываться быстрее, чего мы и добиваемся.

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

Для того чтобы уменьшить размер изображения прекрасно подойдет программа Microsoft Paint, которая есть у всех, кто использует операционную систему Windows. Открыв изображение в данном редакторе, нажмите кнопку Изменить размер. Ответом на данное действие будет следующее окно:

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

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

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

Есть два метода сжатия изображений:

  1. Сжатие с потерями
  2. Сжатие без потерь

Более чем уверен что всех нас интересует сжатие изображения без потерь. Для данных целей имеется немалое количество программ. Я расскажу Вам про программу Riot, которая специально предназначена для оптимизации изображений. Эта небольшая и довольно быстрая программа прекрасно справляется со своей задачей. Интерфейс программы весьма прост:

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

Вам необходимо с помощью мышки перенести оригинальное изображение в левое окно. Сразу же после этого Вы увидите оптимизированное изображение в правом окне. При этом, над каждым окном будет указан размер изображения, так что Вы легко сможете проконтролировать уровень сжатия. Никаких других телодвижений не нужно. Единственное что может Вас заинтересовать, то это ползунок Качество(Quality). Передвигая его ближе к нулю Вы будете уменьшать качество изображения, но при этом сильнее сжимать изображение. Я рекомендую оставить эту настройку на 80 процентах, которые установлены по умолчанию. В данном режиме оптимизация картинок происходит наиболее адекватным и подходящим для наших нужд образом. Остается только сохранить оптимизированное изображение и залить на сайт.

Оптимизация изображение для поисковых систем

Оптимизация размера изображения и его сжатие сделают Ваш сайт быстрее, а в поисковой выдаче выше. И всё это можно проделать без никаких потерь. Кроме этого, под оптимизацией изображений понимается прописывание тэгов ALT и TITLE внутри тэга IMG, в котором подключается изображение. Так тэг ALT должен содержать альтернативный текст, который будет выводится при проблем с отображением картинки, а это значит что содержимое этого тэга должно неплохо передавать суть картинки. А вот в тэге TITILE лучше всего употребить ключевое слово, по которому оптимизирована вся статья и страница сайта. Успехов Вам с оптимизацией картинок.

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

Ваш комментарий появится после модерации.