+38 093 055 04 64 +38 099 533 49 95

Подготовка фото для веб-сайта

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

 

Обычно, по итогам предметной съемки в профессиональной студии, заказчик получает фотографии в формате TIF с максимальным разрешением. Такие фотографии содержат максимальный объем информации, позволяющий использовать эти фото для решения широкого круга задач, от фото для карточки товара, до печати широкоформатного изображения для рекламного баннера.

 

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

 

Давайте рассмотрим оптимальные параметры предметного фото и процедуру предварительной подготовки.

 

Рекомендуемые параметры фотографии для загрузки на сайт

 

1. Формат файла. Для сайта чаще всего используют растровые форматы JPEG и PNG.  

 

JPEG – это наиболее популярный формат. При весьма большом сжатии объема этот  формат позволяет отображать изображение при достаточно высоком качестве.

 

PNG – это растровый формат, позволяющий использовать изображение с прозрачным фотоном. Обычно используется в тех случаях, когда изображение товара нужно наложить на существующий фон.

 

2. Размер изображения. Размер изображения для сайта зависит от заложенных в дизайне страницы размеров области размещения фотографии. Поскольку на сегодняшний день самое распространенное экранное разрешение 1024х768 пикселей, то делать фотографию больше этого размера не стоит.

 

3. Объем файла изображения. Рекомендуем использовать файлы изображений объемом не более 300кБ. Практика показывает, что этого размера достаточно для качественного отображения фотографии на страницах сайта.

 

Инструменты для подготовки предметного фото

 

Существуют различные графически программы, которые можно использовать для подготовки фотографий, но если не владеете навыками работы с такими программами, то мы рекомендуем FastStone Image Viewer. Эта программа позволяет просматривать изображения в различных форматах, выполнять различные преобразования изображений, проста и доступна к бесплатному использованию. Для загрузки этой программы нужно перейти на сайт www.faststone.org и выполнить не сложные действия по установке.

 

В этой статье рассмотри процесс подготовки фотографии для загрузки на сайт с использованием программы FastStone Image Viewer версии 6.0.

 

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

 

Если оригинал у вас хранится с расширением TIF,  а на сайт вы будете загружать фото в формате JPEG или PNG, то при создании копии сразу можно изменить формат, для чего откройте исходное фото в программу  FastStone Image Viewer.

 

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

 «DSC_2300.tif  (7360×4912 = 36,15MP,   439627KB)», где

 

DSC_2300.tif — имя файла фотографии в формате «TIF»

7360x4912  — размеры изображения в формате «ширина/высота) в пикселях

439627KB – объем файла

 

Для сохранения в новом формате с новым именем, активируйте боковое меню, переместив указатель мышки на левый край экрана монитора, выберите команду «Сохранить как» и в поле «Имя объекта:» укажите новое имя файла, а в поле «Тип файла:» выберите из меню соответствующий формат и нажмите кнопку «Сохранить».

 команды редактирования

В нашем примере имя объекта «sumka» и тип файла «JPG».

 запись изображения

 

Если, после выполнения команды «Сохранить», загрузить полученную фотографию, то  в верхнем левом углу отобразятся новые характеристики изображения 

 

«sumka.jpg (7360×4912 = 36,15MP,   1554KB)»

 

Как видно объем файла стал заметно меньше, но фотография все еще не соответствует оптимальным параметрам для загрузки на сайт.

 

Этапы подготовки предметного фото для загрузки на сайт

 

Шаг 1. Обрезание (кадрирование) фотографии до нужного размера.

 

Цель этого этапа —  установить соотношения сторон фотографии (ширина/высота) и изменить расположение изображение товара.

 

 Открываем в режим просмотра исходную фотографию с расширением «JPG», активируем боковое меню и выбираем команду «Обрезка».  В строке «Размер бумаги» необходимо задать параметры соотношения сторон.

 кадрирование

Если данная фотография будет загружаться на весь экран монитора, то можно задать соотношение «16:9». Если же предполагается загрузка фото в выделенную область экрана, то необходимо задать соответствующие соотношения сторон.

 

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

 

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

 

После подбора оптимальных параметров укажите кнопку «Обрезать».

 

 

Шаг 2. Изменение размера изображения.

 

Выбираем в боковом меню команду «Изменить размер», в открывшемся окне выбираем  раздел «Пикселы» и в поле строки «Ширина:» указываем значение 1024. Значение поля «Высота» вычисляется автоматически, в соответствии с соотношением сторон, заданных ранее. Для сохранения параметров, указываем на копку «ОК»

размер изображения 

 

Шаг 3. Запись файла изображения в нужном формате и объеме.

 

В боковом левом меню выбираем команду «Сохранить как», указываем тип файла «JPEG» или «PNG» и нажимаем кнопку «Опции».  В результате этого на экране появится новое окно (см.рис.4.) где появляется два снимка для сравнения качества изображения: исходное  и новое, которое получится при новых параметрах.

 

Прежде чем менять параметры, нужно в поле «Субдискретизация цвета:» установить опцию «Нет», а в поле «Оптимизация Хаффмана:» убрать галочку. 

 

Теперь с помощью ползунка изменяем значение на линейке «Качество», пока не достигнем размера нового файла меньше 300КВ контролируя качество нового изображения.

 kachestvo

В нашем примере при показателе качества 95 мы получили размер нового файла 109КВ при сохранении качества изображения исходного файла.

 

На этом завершаем подбор параметра качества, нажимаем кнопку «ОК» и возвращаемся в режим записи файла, где нам остается указать новое имя файла и нажать кнопку «Сохранить».

 

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

 

Оставить заявку

Ваш телефон *

Ваш e-mail *

Ваше ім'я

Ваш телефон *

Ваш e-mail *

Коментар

Social Share Buttons and Icons powered by Ultimatelysocial