Не вставляйте в документ слишком больших изображений. Не все любят ждать, и не у всех есть быстрые линии связи!
Графические вставки являются наиболее объемными элементами обычных Web-страниц. По этой причине большинство приемов оптимизации ориентировано именно на изображения. Таким образом мы пришли к основополагающему моменту оптимизации размера - выбору формата хранения данных. Как уже говорилось выше, если нужна точность сохранения каждого пиксела (точки изображения) и ограничение на количество цветов не так уж важно, используйте формат GIF. Если же необходимо иметь в изображении больше чем 256 цветов, не используя никаких технологий смешивания, придется остановиться на формате JPEG, обеспечив с помощью подбора коэффициента сжатия оптимальное соотношение качества и байтового размера. Итак:
Помните, чем больше цветов имеет изображение, тем больше оно занимает места. Очень часто при сохранении даже очень простых картинок в формате GIF выбирается палитра из 256 цветов (8 битов на точку). Это не всегда оправдано, так как иногда изображение содержит гораздо меньше цветов и может быть сохранено с гораздо более низким цветовым разрешением (количеством бит на точку). Например, если в изображении используется, скажем, 50 цветов, оно может быть сохранено с палитрой в 64 цвета (6 битов на точку). Это может стоить почти 30-ти процентной экономии размера! К сожалению, этот трюк не применим к изображениям в формате JPEG, так как этот формат всегда использует полную цветовую модель. Итак, правило:
Труднее всего алгоритмам сжатия даются плавные цветовые переходы (у плавных цветовых переходов имеются также и другие недостатки). Посему старайтесь ими не злоупотреблять, если этого можно избежать. Кроме того, существует проблема ограничения числа одновременно отображаемых цветов на устройствах вывода (не у всех есть супер-гипер-термоядерные графические адаптеры с 16-ю мегабайтами видеопамяти и ускорителями трехмерной графики!). То, что на одних системах выглядит на миллион долларов, может повергнуть пользователей старых добрых 256-ти цветных систем в состояние мрачного уныния. Проверяйте вновь созданные Web-страницы на как можно более широком спектре систем с различными возможностями. Следующее правило:
Всем известен способ делать GIF-файлы постепенно появляющимися (interlaced), что позволяет достичь эффекта ускорения загрузки. Но далеко не все знают, что при этом файлы становятся больше... Этот печальный факт вызван принципом работы алгоритма LZW, используемого в формате GIF. Дело в том, что при кодировании черезстрочного изображения строки его обрабатываются в порядки их последующего отображения, то есть: первая, четвертая, седьмая и т.д. Это эквивалентно сжатию другого изображения, состоящего из тех же строк, что и исходное, только в другом порядке. Представьте, что оно из себя представляет! Изображение становится сложнее с точки зрения наличия повторяющихся элементов. Следствие -- увеличение размера. Таким образом:
Не обманывайтесь по поводу атрибута LOWSRC! Добавляя в вашу страницу еще одно изображение, вы только увеличите ее объем. Лучше сделайте более информативную запись в параметре ALT тега <IMG>.
Иногда приходится вставлять в документ однотонное изображение, вроде одноцветной разделительной полосы. При этом можно очень сильно сэкономить в размерах, используя параметры WIDTH и HEIGHT тега <IMG>. Если указать в них размеры, отличающиеся от реальных размеров растра изображения, то изображение будет смасштабировано (увеличено или уменьшено) до указанных размеров. Естественно, что сложные картинки при этом сильно испортятся, тогда как простые однотонные вовсе не пострадают. Таким образом, можно создать совсем небольшое изображение и, указав нужные размеры, достичь необходимого эффекта с гораздо меньшими затратами.
пример:
есть такой рисунок:
установим width=100% получим:
