Как подготовить фотографию для размещения на нашем сайте
Основное и, в общем-то, единственное требование к размещаемым на сайте "Дневник рукоделия Modistka.net" фотографиям или схемам: чтобы объем этих файлов не превышал 300 Кб - для библиотеки узоров, 100 Кб - для дневника рукоделия. При этом размеры изображения в пикселах (т.е. в ширину и высоту) могут быть произвольными. В данном материале я постараюсь пояснить, как подготовить такие файлы.
Немного теории о пикселах, объеме файлов и графических форматах
Пиксель (pixel, picture element) - это мельчайшая единица цифрового изображения в растровой графике. Он представляет собой неделимую абстрактную точку изображения, обладающую определённым цветом.
Так, разрешение экрана монитора характеризуется количеством пикселов в каждой стpоке и в каждом столбце. Экpан 1280 на 1024 (стандаpтное pазpешение для жидкокристаллических 17`дюймовых мониторов) позволяет изобpазить 1280 пикселов по гоpизонтали и 1024 пиксела по веpтикали. Умножив 1280 на 1024, получим 1 310 720 пикселов. Каждый из них окрашен в определенный цвет, которые, смешиваясь в глазу человека, и дают многоцветное изображение на экране (подобно мозаикам, при рассматривании которых вблизи можно увидеть их отдельные одноцветные элементы, а на расстоянии все сливается в художественное изображение).
Также и любое растровое компьютерное изображение (а цифровая фотография чаще всего и является растровым изображением) состоит из точек, расположенных по строкам и столбцам. То есть, к примеру, картинка размерами 100x100 пикселей состоит из 10 000 точек, то есть описывается десятью тысячами пикселей.
Объем (размер) файла, содержащего изображение, - это объем дискового пространства, необходимый для его хранения. Величина объема зависит от общего количества пикселей в изображении и от алгоритма сжатия графической информации. И не зависит, в общем случае, от содержания изображения. Каждый пиксель, где бы он ни располагался, занимает одинаковое количество памяти. Если, к примеру, взять изображения белого листа бумаги и многоцветного пейзажа, количество пикселей и глубина цвета в которых будут одинаковыми, объем их файлов также будет одинаков. Но при этом очевидно, что для картинки с белым листом бумаги существует громадная избыточность данных, которая никак не улучшает качество изображения, но требует большого расхода дисковой памяти.
В связи с этим были разработаны алгоритмы, позволяющие сжимать графическую информацию и уменьшать таким образом объемы файлов для ее хранения. И уже на основе этих алгоритмов были созданы графические форматы файлов с различными сферами использования. Наиболее распространенными форматами для передачи данных в сети интернет являются графические форматы JPEG, GIF и PNG.
Графический формат GIF разработан как экономный формат для хранения пиксельных изображений со сжатием. Ограничение этого формата состоит в том, что поддерживается только 256 цветов. Этот формат нашел самое широкое применение на Web-страницах для размещения изображений с небольшим количеством цветов, например, надписей, знаков, логотипов, элементов оформления страниц и т.д. Кроме того, он допускает хранение нескольких изображений в одном, что позволило создавать так называемые "анимированные" GIF-изображения.
Графический формат JPEG предназначен для хранения полноцветных фотореалистичных изображений. Этот формат использует алгоритмы сжатия с потерями информации о цветах и обеспечивает значительное уменьшение объема графического файла. Однако из-за особенностей визуального восприятия человека эти потери при сжатии чаще всего не бросаются в глаза. Таким образом достигается компромисс между размером и качеством изображения. Формат JPEG чрезвычайно широко используется во всемирной паутине.
Графический формат PNG специально был создан для размещения графики на Web-страницах. Соединяет в себе достоинтва форматов GIF и JPEG. Менее распространен в сети, чем предыдущие два формата, так как до недавнего времени использованию этого формата мешали устаревшие версии браузеров.
Готовим изображение для размещения на сайте
Движок сайта позволяет закачивать изображения в любом из трех форматов, перечисленных выше. Однако здесь мы подробно остановимся на работе с форматом JPEG, так как именно этот формат позволяет лучше всего передать фотореалистичность картинки и является самым распространенным в сети.
Оригинальные изображения для размещения в библиотеке узоров или в дневнике рукоделия, как мне представляется, чаще всего могут быть получены либо сканированием образца или бумажной фотографии (фотопленки), либо закачаны в компьютер с цифрового фотоаппарата/сотового телефона с фотокамерой. В большинстве из вышеописанных вариантов объем получившегося файла будет, скорее всего, больше чем 100 Кб. В таком случае его необходимо будет уменьшить.
Для "чайников" поясним, как можно узнать объем (размер) вашего файла. В проводнике Windows шелкните по иконке/имени вашего файла один раз левой кнопкой мыши. Файл выделится синим цветом. Нажмите один раз правую кнопку мыши. Либо, наведя указатель мыши на файл, сразу нажмите на правую кнопку мыши. Откроется меню. Выберите в нем пункт "Свойства" (Properties). Откроется окно, в котором в строке "Размер" (Size) вы увидите число, обозначающее размер вашего файла в килобайтах. Если это число более 100 Кб - файл необходимо сжать.
Пояснения процесса соответствующей обработки далее будут сделаны на примере работы с графическим редактором Adobe Photoshop. Версия редактора несущественна, так как при этом используются чрезвычайно давно существующие в этой программе команды и пункты меню.
Для сохранения фотографий в формате JPEG чрезвычайно удобно использовать специальную функцию Adobe Photoshop "Save for Web...". Ее можно вызвать через меню File, или нажав комбинацию клавиш Alt-Shift-Ctrl-S. В результате вы увидите окно, подобное изображенному ниже.
Щелчок по изображению позволит просмотреть его увеличенным в новом окне. Если указатель мыши в появившемся окне выглядит как лупа с крестиком, картинку можно еще увеличить, дополнительно кликнув по ней левой кнопкой мыши.
Проверьте, чтобы формат сжатия был выбран JPEG (рядом с отметкой 2 на рисунке выше).
В верхней части окна (отметка 1) расположены четыре закладки, которые позволяют просматривать либо оригинальное (несжатое) изображение; либо только одно, результирующее изображение, которое получится при использовании текущих настроек сжатия; либо два или четыре изображения с разными настройками сжатия (включая оригинальное изображение) соответственно. Итак, сразу выбираем закладку "4-Up", на которой будут изображены четыре варианта изображения. Кликая мышью по любому из окошек, мы можем выбирать его как текущее, соответственно, в правой части общего окна будут меняться настройки - показываться будут именно те, которые относятся к выбранному вами окошку.
Теперь настроим окошки под себя. Выбираем первое окошко (например, верхнее левое) и читаем, что написано под ним. Если там стоит Original, значит в этом окошке уже показывается оригинальное (несжатое) изображение, которое мы будем использовать как образец. Если же нет, то в списке Preset (отметка 2) выбираем пункт "Original". Теперь переходим ко второму окошку (например, верхнему правому). Опять идем в пункт Preset и выбираем там настройку, которую хотим использовать для этого окна (например, JPEG High - высокое качество изображения после сжатия). Аналогичные действия проделываем для остальных окошек (выбирая, в общем случае, JPEG Medium - среднее качество, и JPEG Low - низкое качество).
Таким образом, мы сейчас выбрали три типа настройки сжатия (в формате JPEG). Это настройки достаточно приблизительные, но уже по ним можно оценить, как будет выглядеть фотография, какого она будет размера и какое время потребуется для ее загрузки через канал с определенной скоростью передачи данных (эту информацию можно увидеть под изображением в соответствующем окошке).
Теперь оцените размер получающегося файла. Если он слишком большой (больше 100 Кб), попробуйте изменить размер самого изображения (т.е. количество пикселей по горизонтали и вертикали). Для этого выбираем вкладку Image Size (отметка 4) и вводим там желаемый размер (причем, галочку "Constrain Proportions" (сохранять пропорции) желательно оставить, иначе вы ненароком можете ужать изображение только по одному измерению. Вы можете ввести как значение в пикселах (в поле ширины или высоты), а можете ввести значение процентов (Percent), на которое следует ужать (или растянуть) изображение. В поле "Quality" (тип масштабирования) оставьте тип Bicubic. После чего нажмите кнопку Apply (применить).
Снова смотрим на размер результирующего изображения. Если оно все же превышает максимально возможный размер, приступим к более тонкой настройке степени сжатия. Для торопливых можно сразу предложить автоматический способ подбора настроек. Нажмите стрелочку, находящуюся справа от списка Preset и выберите там пункт "Optimize to File Size..." (оптимизировать до размера файла...).
В появившемся окне, в поле "Desired File Size" (требуемый размер файла) введите желаемый размер файла. В пункте "Start With" оставьте "Current Settings', что укажет Photoshop использовать тот формат, который вы установили заранее для текущего окна (иначе Photoshop сам будет решать, сжимать в GIF или JPEG). В пункте "Use" оставьте "Current Slice". Нажмите OK.
Теперь снова посмотрите на получившееся изображение. Можете осмотреть его на предмет дефектов сжатия. Для этого лучше всего выбрать масштаб 100%. Масштаб можно указать либо в поле 7 внизу общего окна, либо нажав правой кнопкой мыши на каком либо из окон ( отметка 6). В появившемся диалоговом окне можно указать необходимый масштаб.
Теперь подвигайте изображение с помощью специальной лапки (верхняя иконка с рукой выше отметки 5). Просто тыкайте в окошко с изображением, хватайте изображение правой кнопкой мыши и тащите его в нужную сторону.
Если все устраивает, то установите галочку напротив пункта Progressive (в большинстве случаев это позволяет немного уменьшить размер файла), а сам пункт позволяет сохранять изображение так, чтобы в браузере оно сначала выводилось с меньшим качеством, а затем, по мере загрузки, восстанавливалось до изначального. Если пункт Progressive вы не хотите отмечать по каким-либо соображениям, то тогда поставьте галочку напротив пункта Optimized, который также позволяет немного уменьшить размер сжатого изображения. Нажмите "Save" (Сохранить).
Однако не всегда такой быстрый способ является наилучшим. Поэтому вернемся снова к нашим настройкам. Итак, в зоне 3 мы выставляем способ сжатия JPEG (он уже должен быть установлен на предыдущем шаге), чуть ниже выбираем грубую оценку степени сжатия (например, Medium), затем уточняем ее в поле Quality. Двигая ползунок влево или вправо, или же вводя цифры (от 1 до 100), можно уточнить степень сжатия в формате JPEG. Имейте в виду, что выставление грубой оценки степени сжатия (Low, Medium и т.д.) просто устанавливает какие-либо определенные значения поля Quality (например, Medium соответствует качеству сжатия 30). Если Вас не устраивает выбранный вариант сжатия, то вернуться обратно можете, зажав клавишу Alt и кликнув по кнопке Reset (сбросить). Если наоборот, вы хотите запомнить текущую настройку, точно так же, нажмите клавишу Alt и кликните по кнопке Remember (запомнить).
