Там, где рождаются сайты

Подготовка фотографии для размещения в web

    Категория: Управление сайтом    |  Теги: Создание сайтов , Веб-сайт

Для того чтобы цифровую фотографию, опубликованную на web-сайте, было удобно просматривать браузером, исходное фото необходимо подготовить. Неправильная подготовка фотографий может привести к результату, при котором: сайт будет очень долго грузиться; вёрстка страниц будет «разваливаться»; фотографии могут не отображаться или показываться неправильно и т. п. Приятно ли посещать сайты, обладающие такими «артефактами»? А что подумают о Вашей компании посетители, если увидят подобное на её сайте? Неужели Вы продолжаете думать, что многие обращаются за наполнением сайтов к профессионалам «от нечего делать»? Если у Вас нет возможности платить за поддержку сайта, то рекомендуем усвоить несколько бесплатных, но важных советов (см. ниже). Придерживаясь наших правил подготовки фотографий «под веб», Вы сможете самостоятельно наполнить свой сайт. Избежите ошибок, совершаемых новичками. Сайт будет быстрым, красивым и удобным для посетителей.

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

 

Обработать фотографию можно с помощью бесплатной программы Paint.NET, на примере которой мы и рассмотрим сам процесс.


Исходное изображение, загруженное в программу Paint.NET, имеет размеры 3008х2000 пикселей (точек). Размер файла с этим изображением, сохранённым в режиме сжатия информации, – около 3 мегабайт. Такие параметры неплохо подходят для печати фото, но весьма избыточны для просмотра в браузере.


Первым шагом является уменьшение пространственных размеров изображения. Для этого используется пункт меню «Image->Resize».


В появившемся окне выбираем новые размеры, мы выбрали 550х366 пикселей. С помощью специального флага «Maintain aspect ratio» («Сохранять пропорции») включается режим, в котором программа сама вычисляет соответствующий второй размер (горизонтальный или вертикальный) по указанному первому, для того, чтобы сохранить отношение сторон изображения. Пункт меню «Resampling» («Интерполяция») позволяет управлять качеством преобразования пикселов из исходного изображения в пикселы нового изображения, получаемого после изменения размеров. My Cafe взлом игры Дело в том, что в новом изображении одному пикселу будет соответствовать несколько пикселов исходного, используемый метод интерполяции как раз отвечает за то, каким методом будут преобразованы пикселы изображений. Соответственно, настройки пункта «Интерполяция» прямо определяют «визуальное качество» получаемого после изменения размера изображения. Мы используем значение «Best Quality» («Максимальное качество»).


Получившееся новое изображение имеет значительно меньший размер. Важно заметить, что новое изображение потеряло в разрешающей способности, грубо говоря, оно теперь содержит меньше деталей, или, другими словами, содержит меньше информации о внешнем виде объектов съёмки. Если при просмотре на экране в масштабе 1:1 («пиксел в пиксел») изображение выглядит почти так же, как соответствующим образом смасштабированное исходное, то при попытке увеличения падение разрешающей способности тут же становится заметно (смотрите примеры ниже). Полностью восстановить исходное изображение высокого разрешения по уменьшенному, в общем случае, невозможно. Поэтому необходимо сохранять исходное изображение высокого разрешения.


Исходное изображение, увеличенный фрагмент.


Тот же фрагмент уменьшенного изображения. Видна так называемая «пикселизация» или «мозаика» (то есть, изображение состоит из заметных для глаза квадратных участков с равномерным цветом, соответствующих увеличенным элементарным «точкам» изображения), и ухудшение качества. Более детально этот эффект виден на примере ниже:


Нос кота: в левой части – исходное изображение; в правой – уменьшенное по пространственным размерам, но в том же масштабе (явно заметна «мозаичная» структура, «пикселизация») .


Тем не менее, отличия изображений появляются только при просмотре в большом «увеличении» или при печати. Для публикации в Web уменьшенный вариант подходит как нельзя лучше. Поэтому сохраним полученную копию в файле формата JPEG – на настоящий момент наиболее пригодный для хранения фотографий формат. Сохранение выполняется вызовом пункта меню «File->Save As».


В появившемся системном окне необходимо указать имя файла и выбрать тип файла (JPEG – в нашем случае).


После того, как указано имя файла и тип файла, появляется окно настроек параметров сохранения. Для формата JPEG в программе Paint.NET это окно позволяет регулировать единственный, зато самый важный, параметр – «степень сжатия». JPEG позволяет сжимать информацию изображения, создавая файлы меньшего размера (меньшего объема в байтах). При этом используется так называемое «сжатие с потерями», то есть часть информации безвозвратно удаляется из файла при сохранении. Однако формат JPEG устроен таким образом, что при очень существенном сжатии информации потери в качестве изображения остаются незаметными для глаза. В нашем примере используется значение степени сжатия «70» по условной стобалльной шкале (0 – максимальное сжатие и минимальный размер файла, 100 – минимальное сжатие и максимальный размер файла) – и особенных дефектов на изображении не заметно. Размер файла, который получится в результате: 63 килобайта.


Выбранный для сравнения уровень сжатия «10» даёт изображение очень низкого качества, при этом размер файла уменьшился только до 44 килобайт.

Сохранённая для публикации в Web фотография котёнка дикого северного кота в итоге уменьшилась более чем в 47 раз, оставаясь при этом подходящей для просмотра в браузере:


=====================
Сcылка на скачку Paint.NET:  http://www.getpaint.net/

   
Наши работы
pusto
mail
Top
   
pusto
AdressУкраина, г. Сумы, Покровская площадь 5 phone phone: +38(099) 976-61-63, +38(093) 443-29-39email e-mail: office@diatekc.net
#fc3424 #5835a1 #1975f2 #83a92c #8bb832 #1c2def
Copyright © 2003 - 2017. All Rights Reserved