Картинки
Второй способ «удушения» информационного элемента, который пользуется успехом на роботландском конкурсе «Проба пера» — это перекрытие кислорода тексту при помощи прижатия его к картинке (рис. 7.6).
Рис 7.6. Ивану не хватает воздуха
Этот фрагмент задается следующим кодом:
<P>
<IMG src=./pic/ivan.gif
width=93 height=64
align=left
border=0 alt=Сидоров>
Иван пошел в лес за грибами. Стоял чудесный день
сентября. Иван пошел в лес не один, он взял с собой
собаку, которая любила лесные прогулки. Под высокой
стройной березой Иван нашел сразу три молодых гриба.
Собака от радости носилась вокруг хозяина, и хвост её
совершал колебательные движения, что означало высшую
степень собачьего восторга.<BR clear=left>
Вы видите, как текст «душит» Сидорова, прижимаясь к нему вплотную.
Напишите теперь:
<IMG src=./pic/title1.gif
width=93 height=64
align=left
hspace=10
border=0 alt=Сидоров>
Вы увидите, как Сидоров дышит полной грудью (рис. 7.7).
Рис 7.7. Сидоров дышит полной грудью
Атрибуты hspace и vspace определяют свободное пространство:
слева и справа (hspace) от картинки;
над и под (vspace) картинкой.
По умолчанию значения этих атрибутов не определены, но обычно это небольшие ненулевые значения.
Графика Фон, заданный картинкой, на котором текст не читается
Штрафной балл: 0.1–0.5
Рекомендации
За погрешность назначается штраф из диапазона 0.1–0.5 в зависимости от степени агрессивности фона, на который выведен текст.
Очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
На «шершавом» фоне текст всегда читается хуже, чем на гладком (рис. 7.8):
Рис 7.8. На шершавом фоне текст читается плохо
Когда фоновая картинка кажется необходимой, текст надо выводить в «гладкие» области (рис. 7.9):
Рис 7.9. На шершавом фоне текст надо выводить в однотонные области
Цветовая палитра, утомляющая глаза
Штрафной балл: 0.1–0.5
Рекомендации
За погрешность назначается штраф из диапазона 0.1–0.5 в зависимости от степени дискомфорта просмотра страницы.
Примеры
Плохо (рис. 7.10):
Рис 7.10. Плохая палитра
Очень плохо (рис. 7.11):
Рис 7.11. Очень плохая палитра
Графика не оптимизирована
Штрафной балл: 0.1–0.5
Рекомендации
Максимальный штраф 0.5 назначается за единственную картинку, размер которой больше 50 КБ. Тот же штраф — за одну или несколько картинок, килобайтный вес которых можно уменьшить на 50% без изменения геометрического размера и визуальной потери качества.
В остальных случаях назначается штраф меньший 0.5 по усмотрению проверяющего.
Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается. Пользователь любит быстрое обслуживание и не хочет тратить лишние деньги.
Пересылка картинки стоит времени и денег, а значит, важно приложить усилия для уменьшения её килобайтного «веса».
Первое, что можно сделать, это уменьшить геометрические размеры изображения.
Отметим, что качество масштабирования, выполненного в Paint, оставляет желать лучшего, поэтому этим редактором лучше не пользоваться.
Когда картинка уменьшена до оптимальных геометрических размеров, можно сохранить её в формате, в котором предусмотрено сжатие.
Важное замечание. Если для исходной картинки нужно получить уменьшенную копию в формате GIF или JPEG, то сначала выполните масштабирование, и только потом преобразование формата — результат будет лучшего качества.
В формате JPEG реализовано сжатие с потерями (часть цветов изображения просто отбрасывается).
Формат GIF реализует сжатие без потерь (если в GIF-палитре используются все цвета исходной картинки).
На практике запись картинки и в формате JPEG, и в формате GIF почти всегда приводит к потерям графической информации. Для JPEG потери определяются параметром сжатия, а для GIF — размером палитры, число цветов в которой редко совпадает с числом цветов исходного изображения.
Потеря графической информации не всегда означает визуальное ухудшение качества изображения, но может в десятки раз уменьшить размер графического файла. Именно поэтому важно уметь на практике выбрать правильный формат, установив в нём нужный параметр, отвечающий за соотношение качество картинки/размер файла.
Редактор Paint не позволяет устанавливать параметры качества. В редакторе Photoshop это можно делать. Но лучше всего оптимизацию графики выполнять при помощи специального приложения с удобным интерфейсом и неотсроченным визуальным контролем.
Среди множества таких продуктов можно упомянуть Web Graphics Optimizer.