Оптимизация изображений для размещения на сайте
06.02.2012 г.
 

1. Какие форматы изображений следует использовать на сайте?

Рассмотрим все на примерах. Ниже вы увидите одну и ту же картинку, сохраненную в разных форматах. Размер изображения везде одинаковый – 250х187.

bmpgif
jpgpng

ФорматРазрешение изображенияРазмер файлаВидимое качество
BMP250x187138 КбайтНе изменилось
GIF250x18743 КбайтУхудшилось
PNG250x187138 КбайтНе изменилось
JPEG250x18733 КбайтНе изменилось

Подведем итоги: самым тяжеловесным форматом оказался bmp, а самым легковесны – gif. Тем не менее, картинка в формате gif исказилась, ближайшим по размеру форматом оказался jpg. При этом jpg картинки не искажается при таком разрешении изображения. Таким образом, для маленьких картинок специального назначения, особенно, если вам нужна анимация, ваш выбор - gif, для фотографий хорошо использовать jpg, а для диаграмм и изображений с малым количеством цветов - png. Формат bmp мы использовать вообще не рекомендуем.

Правило: Старайтесь использовать на сайте изображения в формате jpeg или gif. Также в некоторых случаях целесообразно использовать png.

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

2. Какого разрешения (размера) изображения необходимо загружать на хостинг?

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


КритерийИзображение слеваИзображение справа
Разрешение1024x768250x188
Объем186 Кбайт21 Кбайт
Скорость загрузки
при скорости доступа в сеть Интернет 128 Кбит/c
11,6 c1,3 c
ФорматJpegJpeg

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

Как уменьшить размер фотографии?

  • Скачать бесплатную программу SmallFoto (583 Кб)
  • Распаковать скачанный архив в какую-нибудь папку, например C:\SmallFoto\
  • Запустить программу C:\SmallFoto\SmallFoto.exe
  • Выбрать соответствующими кнопками папку "источник", где лежат исходные фото(или одна) и папку "получатель" куда программа поместит обработанные фото. Папки могут совпадать. Обратите внимание, программа сделает уменьшенные копии ВСЕХ фотографий, которые есть в папке "источник"

    как уменьшить фото

  • Нажать кнопку "Размер изобр." и выбрать режим с сохранением пропорций и ограничением по размеру в пикселях. Установить ограничение в 800-900 точек

    как уменьшить фотографию

  • Закрыть окно "Размер изображения" и нажать кнопку "Старт" после окончания обработки в папке "Папка - получатель" появятся уменьшенные файлы к имени которых программа автоматически добавит окончание "_thumb". Это и есть результат - уменьшенные копии ваших фотографий.
  • Программа умеет конвертировать картинки в разные форматы, автоматически переименовывать файлы и кое-что еще, все возможности описаны в справке программы.
 

Правило: Изображение на сайте нужно размещать реально необходимого размера, а не изменять размер при помощи браузера.