Полезные советы по оптимизации изображений сайта

Прогуливаясь по интернету, частенько приходится натыкаться на плохо оптимизированные сайты. Для примера, зашли на сайт, а он весь черный: и текст, и фон. И через несколько секунд подгружаются и появляются фоновые картинки. Сайт становится читабельным. И даже если дизайн сайта очень красивый, стильный или интересный, то остается какой-то осадок на подсознательном уровне. Понятно, что фон теперь в кеше, и следующая страница уже будет выглядеть так, как хотел дизайнер. А ведь возможно, что пользователь так и не дождется загрузки картинок и закроет страницу. Или зайдет на сайт с выключенным отображением картинок. Тогда вы потеряете клиента.

В добавок, фон и текст одного цвета - это вероятность получения санкций от поисковых роботов. Учтите, поисковые роботы не умеют читать картинки. Картинку в фоне они проигнорируют. А вот одинаковый цвет текста и фона они заметят.

Чтобы не было таких эксцессов, нужно всегда проверять верстку с выключенным отображением картинок в браузере. Уверен, многие увидят не совсем то, что ожидали. Поэтому дам несколько полезных советов по верстке, связанных с отображением картинок.

Фоновое изображение

Многие вебмастеры после того, как поставят на фон картинку, занимаются подгонкой текста по этот фон. Но редко кто задумывается: а как будет выглядеть текст, если фоновая картинка не подгружена? Ведь если у вас фоновое изображение в черных тонах, то текст вы сделаете светлым. А в случае, если фон не подгрузится, то получится светлый текст на светлом воне. Это нечитабельное сочетание. Чтобы такого не произошло, кроме фоновой картинки прописывайте в CSS и фоновый цвет, на котором будет хорошо виден текст. Пример:

Подписи к изображениям

Также, наблюдается такая картина как отсутствие подписей к изображениям. Не знаю, почему некоторые вебмастеры избегают их? Ведь это дополнительные ключевые слова на странице и, также, название картинки для поиска изображений.

Подпись к изображениям формируется при помощи атрибута ALT тега IMG. Пример:

В случае, если отображение изображений в браузере выключено, то в рамке для картинки будет отображаться текст, написанный в свойстве ALT. Не стоит пренебрегать им.

Форматы изображений

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

• GIF - этот формат может содержать изображения в 256 цветов и поддержкой однобитной прозрачности в сжатом виде. Картинки получаются достаточно компактными. Также форматом поддерживается анимация;
• JPEG - формат изображений без поддержки прозрачности и хорошим сжатием с потерей качества;
• PNG - сжатый формат изображений для WEB. Эти изображения могут содержать многоуровневую прозрачность;
• ICO - формат иконок с поддержкой многоуровневой прозрачности. В интернете, в основном, используются иконки с одноуровневой прозрачностью.

Использование других форматов нежелательно.

Вес изображений

Любое изображение содержит данные и, значит, - имеет свой вес. От веса изображений, используемых на странице, зависит скорость загрузки страниц сайта. Поэтому нужно использовать сжатые форматы изображений. Лучше всего пробовать сжимать картинки в разные форматы, и анализировать. Если на изображении мало оттенков и всего пара-тройка цветов, то лучше сжимать изображения в PNG. Если оттенков много - то в JPEG. Если нет оттенков и качество изображения не имеет особого значения, то GIF.

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

Размеры изображений

Старайтесь всегда задавать размеры изображений (высота и ширина) в теге IMG. Если размеры не заданы, то браузер будет ждать загрузки изображения, чтобы узнать его размер, и уже только потом загрузит элементы страницы, которые идут ниже. Если задать размеры в теге IMG, то браузер сразу сформирует рамку картинки и загрузит остальные элементы страницы, и только затем подгрузит само изображение. Внешне это будет выглядеть, как торможение страницы, что не есть хорошо.

Количество изображений

Не размещайте на странице много изображений. Каждая загрузка изображения делает запросы на сервер. Этот обмен данными занимает некоторое время. Если картинок на странице много, то это внушительно замедлит загрузку страницы. Чем сложнее дизайн сайта, тем внушительнее будет время загрузки страницы.

По возможности избегайте использования картинок в дизайне. Используйте заливку блоков, границы, тени и градиенты CSS3. Новые возможности CSS3 позволяют сделать такой внешний вид блоков, что их не отличишь от картинок.

Спрайты

Делайте фоновые изображения через спрайты. Спрайт - это несколько картинок объединенных в одну. На фоне блоков спрайт позиционируется относительными координатами. Пример:

В результате к серверу делается не 2 запроса, как было бы с отдельными картинками, а всего 1. Это увеличит скорость загрузки страницы.

Если выполнять эти простые советы, то скорость загрузки сайта может существенно увеличится. А быстрые страницы нравятся не только пользователям, но и поисковикам.