Речь пойдет о графике на сайте. Как сделать так, чтобы графически привлекательный сайт не стал еще слишком «тяжелым»? Переизбыток графики влечет немалый размер файла, что влечет длительную загрузку, что повлечет мало посетителей, готовых дожидаться загрузки наших произведений искусства и в итоге бесполезной может оказаться раскрутка сайта. Наша фирма по созданию сайтов в СПб дает дельные советы:
1. Обрезка изображений. Самый результативный путь ускорения загрузки графических файлов – использование изображений меньшего размера. Обрежьте изображения для фокусировки на самом главном.
2. Снижение цветности. При использовании формата GIF, простой путь сокращения размера файла – применение графического редактора для сокращений глубины цвета. Иногда возможно сократить цветность до 4 бит (всего 16 цветов), а изображение по-прежнему прилично будет выглядеть.
3. Использование JPEG для фото. Несмотря на тот факт, что именно GIF – это дедушка форматов картинок Интернет, все же JPEG стал лидером для фотографий. Оба сжимают изображения, однако JPEG эффективен для изображения с множеством цветов и фотографий. Также преимущество JPEG – это глубина цвета, JPEG может применять полную цветовую палитру в 24-х бита для создания цветов и оттенков. Очень часто формат JPEG имеет лучшее качество изображения. Для фото JPEG – это наилучший выбор.
4. Применение изображений с невысокой четкостью при процессах загрузки. Когда не можете снизить скорость загрузки сайта, то полезным приемом станет создание видимости скоростной загрузки. Параметр lowsrc позволяет показать изображение невысокого качества во время загрузки простого изображения. Такая техника позволит создать видимость того, что именно увидит посетитель после окончательной загрузки. Это важно и для image maps, ведь прием позволит пользователю видеть активные области, перейти по ним на иные страницы до полной загрузки изображения. Обычно используют изображение, меньшее по размеру, или черно-белое в виде промежуточного. Если предопределили размер картинки, браузеры растянут его до указанных размеров. Этот прием не делает меньше время загрузки. В действительности это даже увеличивает время загрузки. Но, если все будет сделано грамотно, то впечатление о странице значительно улучшится, ведь пользователь увидит результаты быстрее.
5. Используйте gif-формат. Для быстрой загрузки с предварительным просмотром изображений можно пользоваться копиями с низкими разрешениями. Такая копия может быть jpeg-формата, а целое изображение — gif и можно наоборот. Если не хотите для всех картинок создавать 2 копии, примените чересстрочный gif-формат. Эти гифы появляются в виде картинки с малым разрешением, а постепенно перерисовываются в качественное изображение. Это удобно.
6. Указание высоты, ширины изображения в <IMG>. Там, где используете <IMG>, включайте «height» (высота), «width» (ширина), что позволит браузеру определить сразу сколько места требуется под изображение, это приведет к тому, что Ваш браузер сможет загрузить текст около графики еще до полной загрузки изображений. Графические редакторы имеют функции определения размеров любого графического формата (поддерживаемого).
7. Не используйте масштабирование изображения. Это не лучшая идея. Масштабирование увеличивает впустую общий трафик. Этим Вы требуете браузеры пользователей выполнять работу, которая приводит к задержкам. Самый лучший вариант – использование графических редакторов для корректировки изображения.