Да! Ну и денек сегодня был! Я наконец-таки
опубликовал свой сайт! Множество мгновенных корректировок было внесено.
Не обошлось и без проблем.
Самая главная из них – графика на сайте. Уж слишком низкое ее качество.
Ужасное сжатие формата JPG дает о себе знать.
Итак, о чем будет эта статья? О «правильном» сжатии графики для сайта.
Одна из проблем нынешних начинающих веб-дизайнеров, как я заметил, опросив
своих знакомых – устаревшая информация. Многие, как например я, давно уже
изучали премудрости веб-дизайна, но по различным обстоятельствам, забросили
данное занятие.
И вот наступил прекрасный момент, когда неожиданно надо использовать свои
HTML-знания. Все тут же открывают запылившийся учебник и пыхтя от радости
начинают ваять свой сайт.
Тут-то и появляются проблемы.
Ладно там HTML – каким был, практически таким же и остался, но вот
представления о графике существенно поменялись. Раньше вся Россия
довольствовалась модемным каналом «толщиной» 14.4 Кбит\с, что, разумеется,
накладывало определенные ограничения на действия веб-мастера.
Что же творится сейчас? Да уже почти треть страны перешла на
высокоскоростной доступ! Т.е. длина веревки, связывающей шаловливые руки
веб-дизайнера, возросла примерно в 2 раза. О чем это говорит? О свободе,
господа!
Закончив работу над сайтом, и выложив его в сеть, я направился прямиком на
форумы, чтобы попросить людей оглядеть мой сайт с целью выявления ошибок
(скажу Вам, неплохой «раскруточный» прием! Человек, чувствуя, что на него
положились, не откажется пройти по ссылке и помочь, т.е. ему очень захочется
хоть раз в жизни побыть в роли учителя!). За полчаса пришло около 50 человек
и около половины из них откликнулись на просьбу указать на огрехи.
«И что ты услышал?» - спросите Вы. А я услышал следующую информацию:
подавляющее большинство «критиков» ткнули пальцем на низкое качество
графики! «КАК!» - возмутился я!, - «Все как положено!»
Да-а… Все-таки поздравив первого с победой в битве разума с эмоциями, я
решил-таки на всякий случай взглянуть на год выпуска моего любимого учебника
по веб-дизайну. И что вы думаете, я там увидел? К сожалению, именно то, что
вы, я надеюсь, подумали – 2002 год.
«Ну и что особенного!» - воскликните Вы. Для Вас в оффлайн-жизни, возможно
(хотя, я очень сильно в этом сомневаюсь), за три года ничего
экстраординарного не произошло. А вот какой гигантский скачок совершил РуНет!
Основные каноны графического оформления поменялись. Раньше Вам приходилось
из кожи вон лезть, чтобы вжать-таки свою картинку в 15 Кб (напомню, именно
такой размер должна была по «понятиям» того времени иметь «правильная» пикча
(от англ. picture – картинка, иллюстрация)).
Теперь балом правит качественная большегрузная графика. Т.е. смело можете
сжимать свои иллюстрации до вполне «человечных» размеров – 20-40 Кб. Это
норма. Но не забывайте! Довольно внушительный процент пользователей Сети до
сих пор сидит на модеме! Так что не переборщите со своими «тяжеловесами» ;)!
Что же понадобится нам для уменьшения размеров графики? Правильно!
Специальные программы!
Существуют узкоспециализированные утилиты, которые призваны помочь в
оптимизации JPG файлов. Я к их услугам не прибегаю. Почему? Да потому что
такие вещи встроены почти во все графические редакторы!
И о графических редакторах я заговорил не спроста!
Я абсолютно уверен, что у вас на компьютере стоит Photoshop! Только не
говорите, что не стоит! У вас не стоит?! Плохо! :) Тогда поставьте, ибо без
Фотошопа в веб-дизайне, я считаю, делать нечего!
Поставили? Отлично! Теперь поговорим непосредственно об оптимизации наших
картонок, пардон, картинок. Не скрою, до не очень давнего времени для сжатия
картинок я использовал исключительно встроенный в Adobe Photoshop
компрессор. Сейчас я удивляюсь, почему я терпел то издевательство над моими
пикчами!
А в один прекрасный день меня осенило! Ведь около года назад я баловался
анимацией в программе от того же производителя, то бишь Adobe – ImageReady
(читается ИмэйджРэди, а не Риди, как почему-то очень тянет произнести).
В мою голову сразу же закралась хитро-мудрая цепочка! Анимация – значит GIF,
GIF – значит Интернет, Интернет – значит JPG, JPG – значит собственный
алгоритм компрессии, собственный алгоритм компрессии – значит стоит
попробовать! Что-нибудь поняли? Нет? Тогда прочитайте еще раз! :)
Итак, мне как раз надо было «отдизайнить» очередную картинку для сайта.
Сделав это и сохранив готовый файл в формат JPG с уровнем сжатия равным 12,
открываю меню Photoshop’a: File -> Jump To -> Adobe ImageReady
О чудо! Открывается упомянутый графический пакет!
Что я (и вы вместе со мной) делаю далее. Над открытой картинкой (проследите
за тем, чтобы была открыта именно JPG картинка, а не PSD! В противном случае
откройте сохраненный на предыдущем шаге файл вручную уже из ImageReady)
присутствуют следующие вкладки: Original, Optimized, 2-Up, 4-Up. Щелкаете на
последней.
Вашему взору предстают 4 картинки. Та, что левая верхняя – оригинал. Правая
сверху – GIF-пикча. А две нижние – JPG файлы с компрессией 30 и 10
соответственно. Сейчас выбирайте ту, что вам наиболее понравится. Не
забывайте о размере! Он указан ниже надписи JPG под картинкой. Щелкаете на
понравившейся мышкой и вокруг нее появляется черная рамка. Это означает, что
она выбрана.
Теперь дело за малым – сохранить полученное произведение. Заходим: File ->
Save Optimized As. Сохраняем картинку в нужном каталоге под нужным именем.
Вот и все! Теперь в вашем распоряжении есть картинка небольшого размера и
вполне приемлемого качества!
А что вам еще для счастья надо!
