1. Какие форматы изображений следует использовать на сайте?
Рассмотрим все на примерах. Ниже вы увидите одну и ту же картинку, сохраненную в разных форматах. Размер изображения везде одинаковый – 250х187.
Формат | Разрешение изображения | Размер файла | Видимое качество |
BMP | 250x187 | 138 Кбайт | Не изменилось |
GIF | 250x187 | 43 Кбайт | Ухудшилось |
PNG | 250x187 | 138 Кбайт | Не изменилось |
JPEG | 250x187 | 33 Кбайт | Не изменилось |
Подведем итоги: самым тяжеловесным форматом оказался bmp, а самым легковесны – gif. Тем не менее, картинка в формате gif исказилась, ближайшим по размеру форматом оказался jpg. При этом jpg картинки не искажается при таком разрешении изображения. Таким образом, для маленьких картинок специального назначения, особенно, если вам нужна анимация, ваш выбор - gif, для фотографий хорошо использовать jpg, а для диаграмм и изображений с малым количеством цветов - png. Формат bmp мы использовать вообще не рекомендуем.
Правило: Старайтесь использовать на сайте изображения в формате jpeg или gif. Также в некоторых случаях целесообразно использовать png.
Конвертировать же изображения очень просто. Кликните правой кнопкой мыши по картинке, выберите "открыть с помощью - Paint". Открывается рисунок, и в меню "файл" есть опция "сохранить как", где вы можете выбрать формат изображения.
2. Какого разрешения (размера) изображения необходимо загружать на хостинг?
Давайте сравним изображения:
Критерий | Изображение слева | Изображение справа |
Разрешение | 1024x768 | 250x188 |
Объем | 186 Кбайт | 21 Кбайт |
Скорость загрузки при скорости доступа в сеть Интернет 128 Кбит/c | 11,6 c | 1,3 c |
Формат | Jpeg | Jpeg |
На изображении справа мы лишь изменили разрешение изображения до реально необходимого размера и сэкономили при этом до 9 раз места, что благоприятно отразится на скорости загрузки изображения и всего сайта. Заметьте, что на глаз разницы практически не видно.
Как уменьшить размер фотографии?
- Скачать бесплатную программу SmallFoto (583 Кб)
- Распаковать скачанный архив в какую-нибудь папку, например C:\SmallFoto\
- Запустить программу C:\SmallFoto\SmallFoto.exe
- Выбрать соответствующими кнопками папку "источник", где лежат исходные фото(или одна) и папку "получатель" куда программа поместит обработанные фото. Папки могут совпадать. Обратите внимание, программа сделает уменьшенные копии ВСЕХ фотографий, которые есть в папке "источник"
- Нажать кнопку "Размер изобр." и выбрать режим с сохранением пропорций и ограничением по размеру в пикселях. Установить ограничение в 800-900 точек
- Закрыть окно "Размер изображения" и нажать кнопку "Старт" после окончания обработки в папке "Папка - получатель" появятся уменьшенные файлы к имени которых программа автоматически добавит окончание "_thumb". Это и есть результат - уменьшенные копии ваших фотографий.
- Программа умеет конвертировать картинки в разные форматы, автоматически переименовывать файлы и кое-что еще, все возможности описаны в справке программы.
Правило: Изображение на сайте нужно размещать реально необходимого размера, а не изменять размер при помощи браузера.
|