Самостоятельная раскрутка сайта uCoz
Главная » Раскрутка сайта uCoz » SEO советы


Оптимизация изображений для сайта


Оптимизация картинок

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


Оптимизация изображений – это работа над графическими элементами сайта с целью уменьшения их влияния на долгую загрузку страниц в браузерах пользователей.




«Тяжелые» изображения являются одной из самых весомых причин долгой загрузки сайта. Простая HTML страница без графики и изображений открывается моментально, но такой сайт становиться скучным и не красивым. Поэтому решать эту проблему нужно с помощью оптимизации ВСЕХ графических элементов сайта.


Оптимизация веса изображений.

Чем больше вес изображения, тем дольше времени требуется браузеру на его обработку. В зависимости от скорости интернета пользователя, на открытие некоторых сверхтяжелых картинок может потребоваться довольно длительное время, которое посетитель вряд ли будет ожидать.

Для оптимизации веса изображений можно воспользоваться специально предназначенной для этих целей программой RIOT. Она интуитивно понятная, поэтому объяснять принцип работы нет смысла. Если на сайте используется слишком большое число изображений, то проводить оптимизацию каждой картинки станет достаточно нудным занятием, так как после оптимизации каждое изображение необходимо заново загружать на сайт.


Возьмите себе за правило: в будущем каждую новую картинку (допустим, обложку для материала) изначально оптимизируйте в программе RIOT, а только потом вставляйте (загружайте) на свой сайт.

Так же оптимизированные изображения можно получить с помощью дополнения к браузерам FireFox и Google Chrome под названием Page Speed. После проведения анализа на скорость загрузки страницы, в пункте-совете «Оптимизируйте изображения», вы можете скачать готовые оптимизированные по весу картинки. Обратите внимание, что их также необходимо заново загрузить на хостинг (например, с помощью FTP клиента) и при этом сохранить имена такими же, какими они были в исходном варианте.



Оптимизация размера изображений.

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

Чтобы оптимизировать размер изображений необходимо заранее подготовить картинку с нужными пропорциями, затем прогнать ее через RIOT (чтобы «скинуть» лишний вес) и только после этого загружать на сайт.

Например, если постер для новости на странице выводиться размером 200x150px, то вы должны заранее подготовить картинку с таким размером и только потом вставлять ее в новость.

Иногда в значениях тэгов width и height стоят процентные числа, которые определяют размер изображения в зависимости от ширины страницы, но если ваш шаблон статический (его размер не меняется в зависимости от разрешения монитора посетителя), то все процентные значения нужно заменить на фиксированные. Чтобы узнать эти цифры на помощь опять придет Page Speed. Тут в разделе «Предоставьте изображения с нужными пропорциями» вы можете увидеть, какие именно изображения на анализируемой странице нуждаются в этом и какие размеры рекомендует установить Page Speed.

Копируйте адрес изображения, вставляйте в новое окно браузера, сохраняйте картинку на свой компьютер, открывайте ее в фотошопе, выделяйте и копируйте, создавайте новый документ с размерами рекомендуемыми пэйджспидом, вставляйте скопированное изображение, «подгоняйте» под рамки нового документа, сохраняйте с именем оригинала, оптимизируйте вес с помощью RIOT и загружайте в ту же папку по тому же адресу на свой сайт. Новый анализ Page Speed уже не покажет в списке это изображение, как нуждающееся в оптимизации.


Объединение изображений в CSS спрайты.

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

То есть для каждой маленькой картинки на этом изображении указывается местоположение, которое должен показать браузер, а все остальное сделать прозрачным (как в геометрии - ось X и ось Y). Затем в HTML коде к нужным элементам добавляются эти классы, и при загрузке страницы выводится нужная картинка из спрайта.

Например, кнопка в виде картинки, когда она не активна - имеет один цвет, а когда пользователь наводит на нее мышкой - она свой цвет меняет. Или в сайтбаре с несколькими блоками, где для каждого блока выводится уникальная иконка рядом с заголовком блока (меню – одна иконка, категории – другая, опрос – третья и т.д.).

CSS спрайты значительно увеличивают скорость загрузки страницы, путем уменьшения количества запросов к серверу (сколько картинок - столько же и запросов). Более подробную информацию о CSS спрайтах ищите самостоятельно на других ресурсах.


Советы по работе над графикой сайта.

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


Уменьшение общего количества изображений на странице.

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


Загрузка ВСЕХ изображений к себе в файловый менеджер.

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


Полный отказ от флэш-графики на страницах.

Флэш – это красиво и классно! Но для SEO флэш не представляет никакой ценности и даже наоборот «притормаживает» его за счет большого веса подобной графики и долгой загрузки страницы.


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


Оптимизировать нужно все изображения сайта независимо от того влияют они на долгую загрузку страницы или нет. Это касается не только изображений используемых непосредственно в HTML коде, но и тех, что выступают в качестве элементов дизайна и «прописаны» в таблицах стилей CSS.

Поделитесь записью в социальных сервисах!






Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Быстрый вход ]







Опрос
Ваше отношение к uCoz?

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