Как уменьшить размер картинок для сайта?
В данной статье я расскажу о том, как можно уменьшить размер изображений для сайта, или попросту говоря сжать их.
Я думаю, что никому не нужно объяснять, что сайта без картинок не бывает. Как правило картинок на сайте предостаточно, что приводит, по крайней мере, к двум проблемам:
- картинки долго загружаются браузером;
- они занимают много дискового пространства на сервере, которое, к нашему сожалению, не безгранично.
Все эти проблемы можно устранить, причем это не очень сложно!
Для этого нам потребуется Photoshop и скачанные с Вашего сайта картинки, размер которых Вы хотите изменить.
1. Необходимо открыть картинку в Photoshop. Сделать это можно двумя способами:
Первый. Открыть изображение непосредственно из самого Photoshop, выбрав в меню File/Open… (в русскоязычной версии Файл/Открыть…) Далее необходимо указать путь к файлу с картинкой.
Второй. Нажать на картинке правой кнопкой мыши и в выпавшем списке выбрать «Открыть с помощью»:
В выпавшем списке выбрать Photoshop. Естественно к этому моменту у Вас уже должен быть установлен Photoshop. Если в списке он отсутствует, то нужно в самом конце нажать «Выбрать программу…», и далее выбрать Photoshop или указать путь к exe-файлу с ним.
2. После того, как картинка была открыта, в меню Photoshop необходимо выбрать File/Save for Web & Devices… (Файл/Сохранить для Веб):
3. Далее необходимо выбрать несколько параметров:
- Нужно выбрать формат изображения: jpeg, png или gif, исходя из начального формата Вашего изображения. Т.е. если у Вас была картинка в jpeg, то и сохранять ее нужно в jpeg, иначе браузер ее не найдет.
- Если картинка в jpeg, то нужно выбрать качество изображения после сжатия: Low, Medium, High, Very High, Maximum. Слева будет Ваша картинка до и после сжатия. Выберите наиболее подходящий Вам вариант. На практике неплохим вариантом оказывается «High», качество и размер изображения получаются вполне приемлемыми. Если данная картинка используется для шаблона сайта (в его дизайне), то сильно сжимать ее не следует, т.к. дизайн в итоге будет выглядеть убого.
- Также, если это допустимо (как правило таким образом хорошо сжимать фото с очень высоким разрешением), можно изменить физический размер картинки, указав необходимое кол-во пикселей для ширины и высоты изображения, или изменив размер в процентах (справа).
- Если изображение в формате gif, то можно изменить количество используемых цветов/оттенков. Изменения необходимо делать с учетом исходящего качества картинки:
- И наконец, для изображений в формате png. Для png-8 настройка производится аналогично gif, т.е. необходимо выбрать кол-во цветов из списка. Для png-24 особо настраивать ничего не нужно. Единственное о чем необходимо помнить — это прозрачность — галочка «Transparency» должна быть установлена для изображений, которые не покрывают 100% всей картинки. Например, так:
- Если Вы знаете, в каком месте Вашего сайта прописана ссылка на картинку, или Вы загружаете ее на сайт впервые, то Вы можете попробовать изменить формат картинки для получения меньшего размера и лучшего качества.
После того, как Вы обработали картинки, Вам необходимо загрузить их на сервер.
Есть вопросы? Задайте их через форму комментариев.
Добавить комментарий