Как правильно готовить и подавать к столу… картинки

Давно хотел начать эту рубрику, но все никак было не собраться. Слишком большая это тема — Работа с изображениями. Объяснять чайнику все то, чему учился несколько лет — задача неблагодарная. Рассказать бы азы…

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

Итак, Я уже рассказывал как добавить изображение на страницу, как создавать галереи и как потом с этими галереями работать

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

Но сегодня совсем немного теории, чтобы не перегружать себя и вас.

Важно понять, что цифровые изображения бывают двух видов:

  1. Векторные (рисунок формируется из векторов).
  2. Растровые (рисунок формируется из точек).

О векторных стоит сказать всего три момента:

  1. Их можно как угодно растягивать и увеличивать-уменьшать без потери качества.
  2. Они занимают мало места (в плане размера файла).
  3. Бывают только «рисованными».

Почему так мало? Да потому, что и используют векторные изображения очень редко (если не считать, что шрифты — тоже векторное изображение) и только во флеш-роликах.

Есть вариант на javascript’ах, но он не особенно удобен, и не всегда кроссбраузерный.

Так что о векторных изображениях на сайтах временно забудем. В этом плане интереснее растровые изображения.

Как я уже говорил, они состоят из точек (пикселей). Существует великое множество форматов изображений, но для web-сайтов, как правило используют только три.

  1. JPEG
  2. GIF
  3. PNG

Все три формата относятся к сжатым. Т.е. если взять изображение 800х600 точек, то по логике всего точек в нем должно быть 480000 штук. При том каждая точка может быть раскрашена любым из нескольких миллионов оттенков.

Таким образом файл (визуально небольшой картинки), в котором 480000 точек и для каждой описан цвет, занимал бы довольно большой объем на сервере и передавался бы медленно, а значит страница сайта грузилась бы (при скоростях GPRS или даже 3G) утомительно долго. Вот умельцы и придумали изображения сжимать. К примеру несколько точек одного цвета идущих вряд можно записать не по отдельности каждую, а что-то вроде красная-19шт. Кроме того глаз не способен различать некоторые оттенки, а значит можно «упростить изображение» так, что вы не особенно заметите снижение качества. В общем они сжаты, а значит файлы быстрее скачиваются. На том и остановимся.

JPEG

Размер данного изображения: 20Kb

В этом формате лучше всего сохранять фотографии. Сжатие самое большое, при достаточно хорошем качестве.

Больше тут особенно и сказать нечего.

GIF

Размер данного изображения: 39Kb

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

Из особенностей:

  1. Поддерживает всего 256 оттенков.
  2. Сжимает так-себе. Если сжать фото получится кака, да еще и «весящая» немерянно.

Но есть у gif’а несколько таких фишек, которые делают его непотопляемым.

  1. Если сохранять в нем схемы, чертежи и пр. малоцветные изображения — качество и сжатие будут гораздо лучше, чем JPEG и PNG.
  2. В GIF’е можно создать картинку с прозрачным фоном!
  3. GIF можно сделать анимированным. Т.е. картинка будет двигаться.

Так что ой как рано списывать этот формат со счетов.

PNG

Размер данного изображения: 99Kb

Универсальный формат. Умеет и фото сжимать, и фон прозрачный делать.

Но! Именно эта универсальность заставляет его проигрывать первым двум. Один лучше сожмет фото, другой — схемы.

PNG — не поддежрживает анимацию.

Для чего он нам тогда?

Лично я люблю его использовать, когда надо «вырезать» и вставить на сайт фрагмент фотографии (с прозрачным фоном).

Фуф… Обещал коротко, а вона сколько текста.

В общем сворачиваюсь. В следующем уроке по изображениям расскажу что-нибудь для применимое на практике.

А с вами был доктор Лексиум.
Не пропустите следующий пост.))

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *