Форматы изображений, графика на web-странице и как оптимизировать изображения в Adobe Photoshop

« Предыдущая запись
 
  Следующая запись »
 

Сегодня будет познавательный пост про графику, и в частности, на веб-страницах. Кому-то может будет нужно, кому-то полезно, а кому-то всё равно, но тем не менее полагаю пост не оставит вас равнодушными=)

Где-то год назад, может полтора, на одном предмете в ВУЗе (доставшемся случайно, но крайне удачно) мне досталась в наследство табличка графических форматов. Она содержит минимал необходимой информации о форматах, но, пожалуй, самой необходимой. При этом всё наглядно (фоном потемнее я выделил форматы, использующихся в вебе).

 

Форматы

Поддерживаемые цветовые модели

Глубина цвета

Сжатие

Примечания

BMP

RGB

1бит/пиксел (бит)
8бит
8бит оттенки серого
24бит
RLE Служебные файлы Windows
GIF

RGB

1бит
4бит и 8 бит (палитра)
LZW Для оформления Web-страниц
Минусы:
- 256 цветом максимум
Плюсы:
- несколько изображений в одном файле
- поддержка анимации
- наличие прозрачности
PNG

RGB

1бит
4бит
8бит
8бит оттенки серого
24бит
48бит
LZ-77

Придуман заместо GIF'а; сетевой формат
Для оформления Web-страниц
Минус:
Не поддерживает многослойности и анимации
Плюс:
Поддерживает alpha-канал (степень прозрачности)

TIFF

RGB
CMYK
LAB

1бит
4бит
8бит
8бит оттенки серого
24бит
48бит
RAW
LZW
LZ-77
ZIP
JPEG
Оптимальный формат для хранения высококачественной графики
Используется в типографии
Поддержка альфа-канала
Поддержка многослойности
Поддержка EXIF-блоки и IPTC-блоки
JFIF

RGB
CMYK

8бит оттенки серого
16бит оттенки серого
24бит

JPEG Для хранения и передачи фото-изображений
Поддержка EXIF-блоков и IPTC-блоков
Файлы графических редакторов (PSD, CPT)

Все

Все  

Имеет все возможности TIFF плюс другие возможности, например:
Сохранение действий, произведённых над изображением.
Элементы векторного изображения
Текст в виде текста
Внутри одного файла разные методы сжатия

 

Особых пояснений и разъяснений давать не буду (конечно если только специально не попросите, то расскажу и про цветовые модели, и про глубину цвета, и про методы сжатия).

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

Второе, что я хотел напомнить, так это про то, что про PNG я писал не так давно (и кратко про GIF). Собственно про него можно почитать в статье "Использование прозрачности PNG для решения различных вопросов".

 

Как оптимизировать изображения в Adobe Photoshop
(save for web)

Следим за картинками и выполняем=)

1) Выбираем File > Save for Web & Devices

1 Форматы изображений, графика на web странице и как оптимизировать изображения в Adobe Photoshop

2) Изучаем открывшееся окно. Первым делом в верхней панельке кнопок выберите пункт 2-Up (под цифрой 1 на изображении) и ваше окно разделится на две части - в левом будет исходное изображение, а в правом - после оптимизации (либо в верхнем и нижнем соответственно). Обращаем внимание на нижнее окно, на место, отмеченное цифрой 2. Тут указан формат и размер(!) файла после оптимизации!

2 thumb Форматы изображений, графика на web странице и как оптимизировать изображения в Adobe Photoshop

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

Справа будет панель, она самая важная, здесь будем указывать настройки изображения.

3) Выбираем формат сохранения.

3 thumb Форматы изображений, графика на web странице и как оптимизировать изображения в Adobe PhotoshopРазбираемся с правой панелью (пункт 4 на картинке). Пресетами можно не пользоваться, они почти никогда не подходят, идут индивидуальные настройки.

Первым делом выбираем формат - GIF, JPEG, PNG-8, PNG-24 или WBMP. Последний нам не нужен, остаются 4 других. Вот и выбирайте. Основные принципы такие - если качество особо не важно, то жпег. Если не жпег, то выбирайте по необходимости полупрозрачности и по оптимальному размеру файлов. GIF и PNG-8 очень схожи, но размер дают разный, кто больше, а кто меньше. Обычно если градиенты есть и картинка большая, то ПНГ даёт меньшие размеры. Однако выбор я бы оставил за ПНГ, ниже объясню почему.

На рисунке выше в панели выбора стоит JPEG формат. Из настроек нужно будет следующее. 1 - Quality. Качество. Обычно меньше 40-50 не используется, больше 80-90 тоже.  Выбирайте варианты и смотрите в окне превью. 2 - Progressive. Прогрессив, вроде как, при загрузке из веба грузится не сверху вниз, а поэтапно - сначала черновое превью, затем лучше и лучше становится картинка. Галочка иногда полезна, так как уменьшает размер изображения. Остальное не нужно.

На рисунке слева чуть выше в панели выбора стоит PNG-8. Окно схоже с GIF-ом, поэтому все слвоа будут актуальны и для ГИФа. 1 - Colors. Количество цветов. 256 ставьте, если их будет меньше, он сам обрежет. 2 - Transparency. Если нужна прозрачность - ставим, если нет, то по барабану, она не влияет. 3 - Matte. Цвет маттэ нужно выбирать в случаях, когда есть полупрозрачные элементы, например тени. В полупрозрачных местах ставится указанный фон (например фон сайта).  Конечно можно обойтись PNG-24, но иногда он весит слишком много и тогда прибегают к этому методу. Если конечно фон сайта более или менее однородный. 4 - Interlaced. Загрузка изображения из веба будет идти через строку, то есть постепенно детализация картинки будет увеличиваться (схожа с Progressiv'ом в джпеге).

А в PNG-24 только одна настройка - Transparency.

4) Сохраняем (для тех кто на бронепоезде - по кнопке Save - прим.ред.) =).

 

Метод скоростной гумно-вёрстки

На рисунке выше под цифрой три были кнопки, о второй из которой я обещал рассказать позже. Время настало. В Фотошопе есть такая Slice Tool (вызывается буквой K на клавиатуре), имеющая такой же значок в левой панели фотошопа. С её помощью можно картинку разрезать на квадраты. Если это сделать и пропустить через Save for Web, то сохранится html-файл с картинками. Вот вам примитивная гумно-вёрстка на скорую руку, которую-то и вёрсткой трудно назвать. Однако иногда это используют.

4 Форматы изображений, графика на web странице и как оптимизировать изображения в Adobe Photoshop

В окне Save for web каждому квадрату можно выбрать свой формат и свои настройки сохранения. Довольно удобно. Чтобы это сделать, надо выбрать ту самую кнопку с пером, выбрать нужный квадрат и… Нет, сразу выбирать настройки не надо, потому что они будут взяты по умолчанию для всех. Чтобы дать кому-то индивидуальную настройку, кликните по квадрату два раза и выберите Slice Type > No Image. Тогда заголовные иконки приобретут голубоватый оттенок и можно будет ставить квадрату свои настройки.

 

Оптимизация PNG

Здесь я хотел написать методы, а точнее действия в фотошопе, которые позволили бы уменьшить размер картинок. Но я не буду этого делать, потому что это долго и никому не надо. Всё потому что есть специальные программульки и плагины, которые это делают за нас.

ЗЫ - собственно я не случайно сказал вам ранее, что сохраняйте всё в пнг, потому что после оптимизации картинки уменьшаются и в итоге весят меньше, чем гифы.

Среди них можно назвать PNGOut, OptiPNG, PNGCrush. Я не буду все рассматривать, а расскажу про первую, потому что:

  • Она имеет лучшие показатели сжатия, чем, например, OptiPNG.
  • Она проще.
  • Она может быть использована совершенно различными способами.

А вот про последний пункт я расскажу поподробнее. Есть 4 версии, я бы даже сказал вариации, этой программы.

  1. Собственно сама программа, PNGOut PRO-версия (ссылка, там она первая в списке). Версия платная, требует 15 баксов. 30-дневная триал. Вариант хороший, но платный, этим всё сказано.
  2. Файл для командной строки. Скачать можно там же, второй ссылкой. Если в папку виндов его засунуть, то можно использовать его через командную строку. А если вы не знаете, что это такое, то тупо перетаскивайте png-шки на экзешник. Правда он тут же перезаписывает оригиналы, будьте внимательны. Версия бесплатна (ура, товарищи халявщики, ура! - прим.ред.).
  3. Плагин для InfanView. Скачать можно там же, третьей ссылкой. Плагин для известного просмотрщика изображений InfanView. Вот это на самом деле классная штука, потому что Инфаном можно делать пакетное преобразование файлов. Плагин встраивается в прогу и если выбирать "Сохранить как", то при выборе формата PNG будет возможность поставить галочку, что использовать плагин для преобразования. Имеются настройки плагина. Сам плагин бесплатен!
  4. Плагин для Adobe Photoshop. Платный=(. Ищите на просторах гуглояндекса, можно с лекарством=). Если умеете писать Экшаны в фотошопе, то вам не составит труда пакетно преобразовывать файлы, то есть вариант тоже хорош. И в любимом фотошопе=).

 

В завершении

Всё своё по теме я уже сказал. Пользуйте фотошоп для нарезки и PNGOut для  оптимизма и будет вам щассье.

Если по тематике изображений будут интересны какие-то моменты, то с радостью их освещу по мере своих сил и знаний=). А пока до новых встреч!

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 1, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов нет на запись

"Форматы изображений, графика на web-странице и как оптимизировать изображения в Adobe Photoshop"

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии