Как уменьшить размер картинок для сайта?

mbtokbВ данной статье я расскажу о том, как можно уменьшить размер изображений для сайта, или попросту говоря сжать их.

Я думаю, что никому не нужно объяснять, что сайта без картинок не бывает. Как правило картинок на сайте предостаточно, что приводит, по крайней мере, к двум проблемам:


  • картинки долго загружаются браузером;
  • они занимают много дискового пространства на сервере, которое, к нашему сожалению, не безгранично.

Все эти проблемы можно устранить, причем это не очень сложно!

Для этого нам потребуется Photoshop и скачанные с Вашего сайта картинки, размер которых Вы хотите изменить.

1. Необходимо открыть картинку в Photoshop. Сделать это можно двумя способами:

Первый. Открыть изображение непосредственно из самого Photoshop, выбрав в меню File/Open… (в русскоязычной версии Файл/Открыть…) Далее необходимо указать путь к файлу с картинкой.

Второй. Нажать на картинке правой кнопкой мыши и в выпавшем списке выбрать «Открыть с помощью»:

Открыть с помощью

В выпавшем списке выбрать Photoshop. Естественно к этому моменту у Вас уже должен быть установлен Photoshop. Если в списке он отсутствует, то нужно в самом конце нажать «Выбрать программу…», и далее выбрать Photoshop или указать путь к exe-файлу с ним.

2. После того, как картинка была открыта, в меню Photoshop необходимо выбрать File/Save for Web & Devices… (Файл/Сохранить для Веб):

Сохранить для Веб

3. Далее необходимо выбрать несколько параметров:

Параметры

  1. Нужно выбрать формат изображения: jpeg, png или gif, исходя из начального формата Вашего изображения. Т.е. если у Вас была картинка в jpeg, то и сохранять ее нужно в jpeg, иначе браузер ее не найдет.
  2. Если картинка в jpeg, то нужно выбрать качество изображения после сжатия: Low, Medium, High, Very High, Maximum. Слева будет Ваша картинка до и после сжатия. Выберите наиболее подходящий Вам вариант. На практике неплохим вариантом оказывается «High», качество и размер изображения получаются вполне приемлемыми. Если данная картинка используется для шаблона сайта (в его дизайне), то сильно сжимать ее не следует, т.к. дизайн в итоге будет выглядеть убого.
  3. Также, если это допустимо (как правило таким образом хорошо сжимать фото с очень высоким разрешением), можно изменить физический размер картинки, указав необходимое кол-во пикселей для ширины и высоты изображения, или изменив размер в процентах (справа).
  4. Если изображение в формате gif, то можно изменить количество используемых цветов/оттенков. Изменения необходимо делать с учетом исходящего качества картинки:Сохранение GIF
  5. И наконец, для изображений в формате png. Для png-8 настройка производится аналогично gif, т.е. необходимо выбрать кол-во цветов из списка. Для png-24 особо настраивать ничего не нужно. Единственное о чем необходимо помнить — это прозрачность — галочка «Transparency» должна быть установлена для изображений, которые не покрывают 100% всей картинки. Например, так:
  6. Если Вы знаете, в каком месте Вашего сайта прописана ссылка на картинку, или Вы загружаете ее на сайт впервые, то Вы можете попробовать изменить формат картинки для получения меньшего размера и лучшего качества.

После того, как Вы обработали картинки, Вам необходимо загрузить их на сервер.

Понравилась статья?

Поделитесь ей с друзьями:

Есть вопросы? Задайте их через форму комментариев.
 

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *