Уменьшение размеров картинок для сайта

16 ноября 2012

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

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

Размеры и мегапикселы

Для начала разберемся с размерами: что это такое, и какой размер считать нормальным. Размер изображения в компьютере измеряется в количестве точек (пикселей), чем больше точек тем крупнее и качественнее фотография. Например, картинка ниже имеет размеры в ширину 470 пикселей, а в высоту 360.

1018-485.jpg

Таже самая картинка, но уменьшенная до размера 300 х 229.

1018-485-300x229.jpg

Типовые фотографии, получаемые с современных цифровых фотоаппаратов, имеют размеры в десятки раз больше представленных. Например 4032×3024, что эквивалентно 12МП (12 мегапикселей) и это не предел.

Такие необработанные фотографии имеют достаточно большой объем 3-5 Мегабайт и, если не предпринимать никаких дополнительных действий, то страничка вашего сайта с 4-5 фотографиями будет загружаться дольше минуты, что неприемлемо долго.

Монитор компьютера, в зависимости от марки и модели, может отображать разное количество пикселей. На графике ниже приведена статистика размеров мониторов на момент публикации статьи.

browser_dimension.png

Сегодня большинство дисплеев отображают не более 1600×1200 пикселей, так зачем делать фотографии больше? Посетителю все равно придется их уменьшать. Конечно, бывают узкоспециализированные сайты где требуется размещение полноразмерных фотографий, но это совсем другая задача.

Я рекомендую уменьшение размера исходных фотографий хотя бы до 1600×1200 пикселей.

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

Для уменьшения фотографий придется использовать специальные программы-редакторы, например, Adobe Photoshop, ACDSee, Picasa, XnView, FastStone Image Viewer и другие.

Самый простой вариант -воспользоваться бесплатной (для частных пользователей) программой FastStone Image Viewer (http://www.faststone.org/FSViewerDownload.htm). Программа полностью переведена на русский язык и имеет очень простой и понятный интерфейс.

Для того, чтобы изменить размер фотографии, находим ее в списке справа, выделяем мышкой и открываем меню «Правка — Изменить размер»

fs_resize.png

В открывшемся окне выбираем стандартный размер 1600 х 1200.

fs_resize_dlg.png

Нажимаем ОК и сохраняем изменения.

Таким простым и не сложным способом размер фотографий уменьшается в разы, а то и в 10 раз.

Уменьшение размеров множества фотографий в один клик

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

Для этого в FastStone Image Viewer есть специальный режим пакетной обработки фотографий. С его помощью можно пережать сотни и тысячи фотографий с едиными настройками.

Для этого открываем меню «Сервис — Пакетное преобразование/переименование фотографий»

fs_packet_resize_menu.png

В левой части представлен список файлов и папок в правой — список фотографий которые будут преобразованы, а также перечень действий.

Для решения поставленной задачи произведите следующие действия и настройки:

  1. Добавьте все необходимые файлы изображений из левой части окна в правую.
  2. Установите выходной формат в .jpg
  3. Снимите галочку «Выходная папка»
  4. Установите галочку «Изменить настройки (размеры...)»
    1. Нажмите кнопку «Дополнительно»
    2. Произведите настройки в соответствии с рисунком

  5. Установите галочку «Менять имя» и впишите в поле справа «*-small» без кавычек. Данная инструкция позволит сохранить изображения-оригиналы, а уменьшенные картинки будут иметь суффикс -small.
  6. Проверьте все настройки еще раз и нажмите старт!

По окончании процесса вы получите полностью готовые фотографии небольшого размера!