Давно хотел начать эту рубрику, но все никак было не собраться. Слишком большая это тема — Работа с изображениями. Объяснять чайнику все то, чему учился несколько лет — задача неблагодарная. Рассказать бы азы…
Собственно, что такое изображения, где их брать, для чего они блоггеру уже давно и много говорилось. Тем не менее, ежемесячно в блоггинг приходит множество новых людей, чтобы задавать все те же старые вопросы.
Итак, Я уже рассказывал как добавить изображение на страницу, как создавать галереи и как потом с этими галереями работать…
Осталось рассказать о том, что можно с этими изображениями сотворить до публикации. Далеко не все знают даже то, как изменить размер картинки. Про работу со слоями, эффектами и т.п. я вообще молчу.
Но сегодня совсем немного теории, чтобы не перегружать себя и вас.
Важно понять, что цифровые изображения бывают двух видов:
- Векторные (рисунок формируется из векторов).
- Растровые (рисунок формируется из точек).
О векторных стоит сказать всего три момента:
- Их можно как угодно растягивать и увеличивать-уменьшать без потери качества.
- Они занимают мало места (в плане размера файла).
- Бывают только «рисованными».
Почему так мало? Да потому, что и используют векторные изображения очень редко (если не считать, что шрифты — тоже векторное изображение) и только во флеш-роликах.
Есть вариант на javascript’ах, но он не особенно удобен, и не всегда кроссбраузерный.
Так что о векторных изображениях на сайтах временно забудем. В этом плане интереснее растровые изображения.
Как я уже говорил, они состоят из точек (пикселей). Существует великое множество форматов изображений, но для web-сайтов, как правило используют только три.
- JPEG
- GIF
- PNG
Все три формата относятся к сжатым. Т.е. если взять изображение 800х600 точек, то по логике всего точек в нем должно быть 480000 штук. При том каждая точка может быть раскрашена любым из нескольких миллионов оттенков.
Таким образом файл (визуально небольшой картинки), в котором 480000 точек и для каждой описан цвет, занимал бы довольно большой объем на сервере и передавался бы медленно, а значит страница сайта грузилась бы (при скоростях GPRS или даже 3G) утомительно долго. Вот умельцы и придумали изображения сжимать. К примеру несколько точек одного цвета идущих вряд можно записать не по отдельности каждую, а что-то вроде красная-19шт. Кроме того глаз не способен различать некоторые оттенки, а значит можно «упростить изображение» так, что вы не особенно заметите снижение качества. В общем они сжаты, а значит файлы быстрее скачиваются. На том и остановимся.
JPEG
Размер данного изображения: 20Kb
В этом формате лучше всего сохранять фотографии. Сжатие самое большое, при достаточно хорошем качестве.
Больше тут особенно и сказать нечего.
GIF
Размер данного изображения: 39Kb
Старый формат. Очень быстро набрал популярность и стал поддерживаться всеми браузерами. Секрет наверное в том, что первые порноснимки выкладывали в сеть именно в этом формате.
Из особенностей:
- Поддерживает всего 256 оттенков.
- Сжимает так-себе. Если сжать фото получится кака, да еще и «весящая» немерянно.
Но есть у gif’а несколько таких фишек, которые делают его непотопляемым.
- Если сохранять в нем схемы, чертежи и пр. малоцветные изображения — качество и сжатие будут гораздо лучше, чем JPEG и PNG.
- В GIF’е можно создать картинку с прозрачным фоном!
- GIF можно сделать анимированным. Т.е. картинка будет двигаться.
Так что ой как рано списывать этот формат со счетов.
PNG
Размер данного изображения: 99Kb
Универсальный формат. Умеет и фото сжимать, и фон прозрачный делать.
Но! Именно эта универсальность заставляет его проигрывать первым двум. Один лучше сожмет фото, другой — схемы.
PNG — не поддежрживает анимацию.
Для чего он нам тогда?
Лично я люблю его использовать, когда надо «вырезать» и вставить на сайт фрагмент фотографии (с прозрачным фоном).
Фуф… Обещал коротко, а вона сколько текста.
В общем сворачиваюсь. В следующем уроке по изображениям расскажу что-нибудь для применимое на практике.
А с вами был доктор Лексиум.
Не пропустите следующий пост.))
Напишите комментарий