Забыли пароль?
Запросите новый здесь.

Голосование
Что вас интересует на нашем сайте больше всего?

База аддонов
База аддонов
11% [1 Голос]

Форум, поиск ответов
Форум, поиск ответов
33% [3 Голосов]

Общение
Общение
33% [3 Голосов]

Новости
Новости
0% [0 Голосов]

Другое
Другое
22% [2 Голосов]

Голосов: 9
Вы должны авторизироваться, чтобы голосовать.
Начат: 16.05.2017 07:06

Архив опросов
Случайная тема
Друзья проекта
Unlogic W0rst Lab
All Fusion :: Плагины, моды, темы оформления для 6 и 7 версий PHP-Fusion
Система Smart для PHP-Fusion
Миничат
Только пользователи могут отправлять сообщения.

Alipapa
Offline
· 18.07.2017 22:13
тоже попадалась

Alex
Offline
· 18.07.2017 12:50
встретилась реклама в директе тык ab

jikaka
OfflineAdmin
· 12.07.2017 11:14
Alex, потому что лето...

Alex
Offline
· 11.07.2017 16:32
опять тишина

Alex
Offline
· 26.06.2017 18:41

Архив миничата
Сейчас на сайте
» Гостей: 30

Гости:
» [Ваш IP] 06:34:54
/Статьи
» 164.132.161.35 06:34:45
/Поиск
» 217.182.132.32 06:34:34
/Поиск
» 217.182.132.92 06:34:33
/Поиск
» 46.229.168.77 06:34:30
/Поиск
» 137.74.207.109 06:34:27
/Поиск
» 137.74.207.101 06:33:54
/Поиск
» 46.246.56.15 06:33:49
/Логин
» 46.229.168.67 06:33:40
/Поиск
» 164.132.161.2 06:33:31
/Поиск
20 - не показано

» Всего пользователей: 1,304
» Новый пользователь: well-web
В базе имеется
аддонов: 952
тем: 137
Иерархия статей
Оптимизация сайта: изображения

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

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

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

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

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

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

Code
body {
  background: black url(fon.jpg);
  color: white;
}

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

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

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

Code
<img src="slon.jpg" width="480" height="640" alt="Слон в африке">

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

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

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

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

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

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

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

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

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

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

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

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

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

Спрайты

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

Code
<style type="text/css">
  .block1 {
    width: 300px;
    height: 600px;
    background: green url(sprite.png) no-repeat scroll 0 0;
  }
  .block2 {
    width: 300px;
    height: 600px;
    background: green url(sprite.png) no-repeat scroll -300px 0;
  }
</style>

<div class="block1">
  Блок 1
</div>
<div class="block2">
  Блок 2
</div>

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

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


Поделиться этой статьей
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:


#1 | jikaka 08.11.2012 06:08
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
вот в этом месте: background: black url(fon.jpg);
я наверно бы поправил на вот это: background: #000 url(fon.jpg);

спасибо за статью!
мысли | фото
#2 | Truth_Explorer 08.11.2012 06:29
Avatar
Отсутствует
Администратор
Активный
С 17.11.2010 13:01
#000
#000000
black
------------
Синонимы. Есть цвет RGB, сокращенный RGB и название
#3 | jikaka 08.11.2012 06:49
Avatar
Отсутствует
Супер Администратор
Активный
С 26.07.2010 12:10
согласен, но это дело вкуса
мысли | фото
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
5 (Отлично!) - 2 Голоса

Рейтинг доступен только для пользователей.

Пожалуйста, авторизуйтесьили зарегистрируйтесь для голосования.