Графика для веб

автор: Vadim

Графика для web несколько отличается от изображений создаваемых для печати. Основное отличие заключается в том, что web-изображения всегда используют цветовую модель RGB. Вам не придется заботиться о преобразовании изображения в CMYK и думать, как все это будет выглядеть на бумаге.
Разумеется есть и свои нюансы. Не все мониторы воспроизводят цвета с одинаковой точностью. Но, это уже зависит как от самого монитора, так и от правильности его калибровки.

Одним из основных критериев для подготовки web-изображений является размер файла. Чем больше будет размер, тем дольше будет загружаться страница, тем меньше шансов, что посетители дождутся окончания загрузки и не уйдут. Поэтому необходимо выбрать нечто среднее, т.е. использовать сжатие изображения до разумных пределов. При сильном сжатии страница с изображением будет грузиться очень быстро, но что посетители там увидят? Что-то такое, что когда-то называлось фотографией!
Одним из вариантов ускорения загрузки относительно больших по размеру файлов – это использование чересстрочного формата GIF и прогрессивного JPEG. В этом случае изображение загружается не сразу, а за несколько проходов. Т.е. сначала изображение загружается с минимальным разрешением. При следующих проходах разрешение увеличивается.Есть еще один способ – создание миниатюр, т.е. размещение на отдельной странице копий изображений уменьшенного размера. Точнее, это не способ ускорения загрузки полномасштабных картинок, а предоставление возможности выбора для посетителей. На страницах с графикой это применяется очень часто. Но, на мой взгляд, и в этом случае нужно постараться выбрать оптимальный размер изображения, чтобы миниатюра была не просто графическим украшением, разобрать на которой ничего не возможно. Иногда можно встретить “миниатюры в миниатюре” размером немногим больше, чем значки на рабочем столе. :-)) Смысл этого я не понимаю. Нет, смысл, а точнее умысел в этом конечно есть. И рассчитан он на простое любопытство. Человек видит что-то яркое и красочное (возможно красивое), но очень мелкое. А что же там такое изображено??? Ну-ка, ну-ка… Но, увы, иногда, при разворачивании полномасштабного изображения постигает разочарование и продолжать дальнейший просмотр уже не хочется.
Все же, гораздо правильнее, чтобы посетитель при просмотре миниатюр смог представить, что именно изображено, и уж если он решится открыть полномасштабное изображение, то сделает это осознанно, а не вынужденно. Оптимальный размер файла, на мой взгляд 4-5 Кб. Меньше сжимать файл не имеет смысла, т.к. картинка станет совсем уж неприглядной. Делать размер больше также нецелесообразно – изображение все же достаточно мелкое и заметного улучшения деталей вы вряд ли добьетесь. Очень часто, в качестве дополнения к миниатюрам указан и реальный размер загружаемого изображения.

Теперь непосредственно о размерах изображения. Несмотря на растущую популярность и доступность мониторов с большой диагональю, все же не нужно забывать и о тех, кто использует небольшие размеры. И если вы сами используете разрешение 1600х1200, это вовсе не означает, что нужно готовить страницу с изображением только под ваш монитор. Есть очень хорошая фраза по этому поводу: “Вы делаете свой сайт только для себя, или хотите, чтобы его смотрели и другие?”
Задавайте себе этот вопрос почаще и помните, что размеры изображения 800х600 и даже 640х480 все еще достаточно актуальны для посетителей. Также следует учитывать, что даже если ваша страница с изображениями оптимизирована под один из самых популярных на сегодняшний день размеров 1024х768, большинство людей, использующих такое разрешение не разворачивают окно браузера на весь экран. Соответственно посмотреть изображение без использования прокрутки не получится. А это, на мой взгляд, не очень желательно. В многочисленных материалах по юзабилити вообще рекомендуется избегать горизонтальной прокрутки даже для небольшого разрешения экрана.
Если вы не хотите сильно уменьшать свои фотографии, в некоторых случаях можно визуально уменьшить размер изображения, вписав его в фиксированную рамку меньшего размера. Преимущество заключается в том, что просматривать достаточно большие изображения в окне браузера можно и при небольших разрешениях экрана. На диске же изображение сохранится в своем реальном размере. Единственное – это не нужно уменьшать размер слишком сильно. Иначе, при просмотре вы получите искажения в мелких деталях. Это в большей мере относится и к различным надписям на изображениях.
Помимо юзабилити, времени загрузки и прочего есть и еще одна причина, по которой уменьшают размеры изображения – это невозможность присвоения результатов вашей работы. Но, о ней, почему-то, всегда предпочитают умалчивать… Разумеется, это отчасти правильно. Что можно сделать с маленькой фотографией? Практически ничего. Только посмотреть. Но, и тут желательно знать меру. Я встречал изображения размером 350х260 и даже меньше… Мне кажется – это уже излишняя перестраховка. Даже, если у вас коммерческий сайт и вы занимаетесь продажей своих фотографий.

Что касается форматов файлов, то на сегодняшний день самыми распространенными и приемлемыми форматами являются JPEG (Joint Photography Experts Group) и GIF (Graphics Interchange Format). Эти форматы поддерживаются практически всеми web-браузерами. Отличия заключаются в том, что первый не поддерживает прозрачность, но способен отображать большее количество цветов (16 миллионов оттенков), а второй использует только 256 оттенков, но позволяет определить один цвет как прозрачный, а также допускает сохранение нескольких изображений в одном файле. Еще один формат – это PNG (Portable Network Graphics). Он поддерживает высокую степень сжатия без потерь, прозрачность, а также частичную прозрачность. PNG еще достаточно новый формат и не все версии браузеров его понимают.

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