Как уменьшить размер графики?
1. Обрезка изображений
Это может показаться очевидным, но самый эффективный путь ускорить загрузку графических файлов - это использовать изображения меньшего размера. Обрезайте изображения для фокусировки на важном, или уменьшайте размер пропорционально, при этом ненужные детали не будут различимы.
2. Снижение цветности
Если Вы используете формат GIF для изображений, простой путь сократить размер файла - использование графического редактора для сокращения глубины цвета. Параметр "Глубина цвета" определяет количество цветов доступных в цветовой палитре изображения. Максимальная глубина цвета для GIF - это 8 бит, что означает палитру из 256 цветов. Я стараюсь сократить цветность настолько сильно насколько это возможно, часто до 4 бит (16 цветов), если изображение по прежнему выглядит хорошо.
3. Использование формата JPEG для фотографий
Несмотря на то, что GIF - дедушка форматов изображений используемых в Интернет, JPEG стал лидирущим форматом для фотографий. Оба и GIF и JPEG сжимают изображения, но JPEG более эффективен для изображений с множеством цветов, особенно фотографий. Другое преимущество формата JPEG - глубина цвета - формат GIF не может иметь больше 256 цветов, а JPEG может использовать полную 24-х битную цветовую палитру для создания миллионов цветов и оттенков. Часто изображения в формате GIF имеют больший размер, но худшее качество изображения, чем формат JPEG. Так не будет всегда - в определенных обстоятельствах таких как изображение имеющее всего несколько цветов, GIF будут равнозначны или даже превосходит качество JPEG при меньшем размере файла. Но для фотографий формат JPEG - наилучший выбор.
4. Использование изображений с низкой четкостью в процессе загрузки
Если Вы не можете уменьшить скорость загрузки вашего сайте, интересным приемом будет создание видимости быстрой загрузки. Это использование параметра lowsrc, предложенного фирмой Netscape во 2-ой версии браузера Netscape Navigator и ныне поддерживаемого также браузерами Internet Explorer версий 3.0 и выше. Использование этого параметра приведет к тому, что браузер будет показывать изображение пониженного качества в процессе загрузки обычного изображения. Эта техника позволяет создать видимость того, что увидит после полной загрузки посетитель. Это крайне важно для image maps, поскольку это позволит пользователю увидеть активные области и перейти по ним на другие страницы еще до того как полное изображение загрузится целиком. Параметр lowsrc в теге <IMG> выглядит так:
<IMG src="highres.gif" lowsrc="lowres.gif">
Конечно, это Ваш выбор - сравнивать размер этих двух файлов или нет. Обычно используют или меньшее по размеру изображение, или черно-белое как промежуточное изображение. Если Вы предопределили размер изображения, браузеры растянут меньшее изображение до указанных размеров. На заметку: Этот прием в действительности не делает время загрузки меньше. В действительности это увеличивает общее время загрузки, добавляя дополнительное изображение. Но, если все сделано верно, впечатление от страницы улучшится поскольку пользователь увидит результат гораздо быстрей.
5. Используйте чересстрочный gif-формат (interlaced)
Для быстрой загрузки с целью предварительного просмотра изображений удобно пользоваться их копиями с низким разрешением. Копия с низким разрешением может быть в jpeg-формате, а полное изображение - в gif и наоборот. Но если вы не хотите для каждой своей картинки создавать две копии - с низким и высоким разрешением, - лучше всего применить чересстрочный gif-формат. Чересстрочные гифы появляются на экране быстро в виде картинки с низким разрешением и постепенно перерисовываются в высококачественное изображение. Пользователь сам может решить, дожидаться ли конца загрузки или нет. Это очень удобно. Большинство графических редакторов позволяют преобразовать любое изображение в чересстрочный gif-формат.
6. Указание высоты и ширины изображения в теге <IMG>
Не ленитесь, везде где Вы используете тег <IMG> всегда включайте параметры 'height' (высота) и 'width' (ширина). Это позволит браузеру сразу определить сколько места потребуется под изображение, что приведет к тому, что браузер сможет загружать текст вокруг графики, без ожидания полной загрузки изображения. Большинство графических редакторов имеют функцию определения размеров для любого поддерживаемого графического формата. Например, если Ваше изображение находится в файле image.gif и имеет размер 50 пикселов на 100 пикселов, тег <IMG> должен выглядеть так:
<IMG src="image.gif" height="50" width="100">
7. Не используйте масштабирование изображений
Вы можете быть поражены простым способом изменения размеров изображения в виде изменения параметров высоты и ширины изображения в теге <IMG> вместо обрезки изображения или изменения его размеров в графическом редакторе. Это не самая лучшая идея... Во-первых, Вы потратите чудовищное количество времени, корректируя числовые значения для того, чтобы избежать искажения изображений. Во-вторых, масштабирование изображений впустую увеличивает общий траффик - Вы пересылаете изображения большего размера, чем это нужно. Также Вы требуете браузер пользователя выполнить работу, которая приведет к задержкам, так браузер масштабирует изображения перед тем как показать. В общем, самый лучший путь - это использование графического редактора для корректировки изображения к нужному размеру.
8. Масштабирование одноцветных изображений для создания полос
Даже хотя Вы не должны масштабировать изображение, есть один случай когда этот прием будет Вам полезен. Если Вам нужны одноцветные полосы на странице, Вы можете сократить время загрузки, заменив использование полноразмерного GIF созданием изображения размером 1 на 1 пиксель и установив атрибуты height и width под нужный размер для каждой полосы. Хотя возможность задержки все же существует, это должно быть быстрей, чем загружать полноразмерное изображение.
9. Обрезка анимированных GIF
Анимированные GIF'ы представляют из себя серию изображений - одна над другой, - для того, чтобы создать эффект движения. В зависимости от применяемой техники, анимированные GIF могут быть меньшими, чем равнозначные ява-апплеты. Но реальное преимущество состоит в том, что браузеру не нужно запускать консоль языка Ява, чтобы показать апплет. Проблема состоит в том, что так как анимированные GIF - просто серия обычных GIF, файл может разрастись до неприемлемого размера. Один способ проконтролировать этот рост - начать с GIF c фоновым рисунком, и затем создавать анимацию, помещая изображения меньшего размера на первое изображение. Большинство современных GIF-аниматоров поддерживают эту функцию, которая называется "leave in place", давая Вам возможность нарисовать серию GIF меньшего размера вместо использования полноразмерных GIF для каждой ячейки анимации.
10. Использование предпросмотра
Другой достаточно простой путь минимизировать обьем графики на Вашей странице - использование предпросмотра. Суть заключается в следующем: создаются изображения меньшего размера, и связываются ссылкой (картинка сама или текст под ней) со страницей с большим изображением. Посетители сайта кто не хочет смотреть полноразмерные изображения избежат загрузки больших и неинтересных для них изображений. Кто хочет - нажмет ссылку на картинке и увидит полное изображение. Большое количество программ могут создавать такие галереи изображений, как, например, ACD See 5.0.
11. Разбивка изображений на части
Большинство больших изображений на сайтах в действительности набор небольших GIF, а не один большой GIF. Такое изображение может даже быть набором GIF и JPEG файлов - каждый формат используется, если дает лучшее качество при наименьшем размере файла. Это достигается разрезкой и оптимизацией выбранных областей изображения. Вам нужен хороший графический редактор, например PhotoShop. Не усердствуйте - Вам их нужно будет связать таблицей в единое целое. Чем больше частей, тем сложней структура этой таблицы. Вы нужно соблюдать разумное соотношение между сложностью единой таблицы и размером экономии в процессе подобной оптимизации.
