У начинающего контент-менеджера постоянно возникают трудности со вставкой изображений на сайт: то размер большой, то формат не тот, то пропорции неправильные.
У начинающего контент-менеджера постоянно возникают трудности со вставкой изображений на сайт: то размер большой, то формат не тот, то пропорции неправильные. Данная статья поможет разобраться в азах подготовки графики для сайта и позволит не допустить основных ошибок.
Почему вообще возникает потребность в какой-то специфической подготовке фотографий для размещения на сайте? Во-первых, изображения требуется уменьшить, чтобы страничка загружалась у посетителя быстро, без задержек. Во-вторых, нужно обеспечить самое выгодное представление ваших товаров и услуг, ведь сайты, в большинстве своем, делаются для продаж.
Размеры и мегапикселы
Для начала разберемся с размерами: что это такое, и какой размер считать нормальным. Размер изображения в компьютере измеряется в количестве точек (пикселей), чем больше точек тем крупнее и качественнее фотография. Например, картинка ниже имеет размеры в ширину 470 пикселей, а в высоту 360.
Таже самая картинка, но уменьшенная до размера 300 х 229.
Типовые фотографии, получаемые с современных цифровых фотоаппаратов, имеют размеры в десятки раз больше представленных. Например 4032×3024, что эквивалентно 12МП (12 мегапикселей) и это не предел.
Такие необработанные фотографии имеют достаточно большой объем 3-5 Мегабайт и, если не предпринимать никаких дополнительных действий, то страничка вашего сайта с 4-5 фотографиями будет загружаться дольше минуты, что неприемлемо долго.
Монитор компьютера, в зависимости от марки и модели, может отображать разное количество пикселей. На графике ниже приведена статистика размеров мониторов на момент публикации статьи.
Сегодня большинство дисплеев отображают не более 1600×1200 пикселей, так зачем делать фотографии больше? Посетителю все равно придется их уменьшать. Конечно, бывают узкоспециализированные сайты где требуется размещение полноразмерных фотографий, но это совсем другая задача.
Я рекомендую уменьшение размера исходных фотографий хотя бы до 1600×1200 пикселей.
Уменьшаем фотографию
Для уменьшения фотографий придется использовать специальные программы-редакторы, например, Adobe Photoshop, ACDSee, Picasa, XnView, FastStone Image Viewer и другие.
Самый простой вариант -воспользоваться бесплатной (для частных пользователей) программой FastStone Image Viewer (http://www.faststone.org/FSViewerDownload.htm). Программа полностью переведена на русский язык и имеет очень простой и понятный интерфейс.
Для того, чтобы изменить размер фотографии, находим ее в списке справа, выделяем мышкой и открываем меню «Правка — Изменить размер»
В открывшемся окне выбираем стандартный размер 1600 х 1200.
Нажимаем ОК и сохраняем изменения.
Таким простым и не сложным способом размер фотографий уменьшается в разы, а то и в 10 раз.
Уменьшение размеров множества фотографий в один клик
Усложним задачу: для сайта мы подготовили несколько альбомов фотографий, разложили из по папочкам и теперь хотим уменьшить их размеры, при этом не испортив оригинал.
Для этого в FastStone Image Viewer есть специальный режим пакетной обработки фотографий. С его помощью можно пережать сотни и тысячи фотографий с едиными настройками.
Для этого открываем меню «Сервис — Пакетное преобразование/переименование фотографий»
В левой части представлен список файлов и папок в правой — список фотографий которые будут преобразованы, а также перечень действий.
Для решения поставленной задачи произведите следующие действия и настройки:
- Добавьте все необходимые файлы изображений из левой части окна в правую.
- Установите выходной формат в .jpg
- Снимите галочку «Выходная папка»
- Установите галочку «Изменить настройки (размеры...)»
- Нажмите кнопку «Дополнительно»
- Произведите настройки в соответствии с рисунком
- Установите галочку «Менять имя» и впишите в поле справа «*-small» без кавычек. Данная инструкция позволит сохранить изображения-оригиналы, а уменьшенные картинки будут иметь суффикс -small.
- Проверьте все настройки еще раз и нажмите старт!
По окончании процесса вы получите полностью готовые фотографии небольшого размера!