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

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

    Сразу пример: файл картинки с голой Памелой Андерсон на Вашем веб-сайте может называться pron.jpg и этот вариант несколько хуже, чем Pamela_naked.jpg. О различиях и других критериях, я расскажу ниже.

    В качестве форматов изображений для веб-сайтов используются форматы jpg, gif и png. Ранее использовался формат svg, но о нем я говорить не буду. Gif как правило используют для вставки на страницу анимированных роликов или баннеров. Этот формат хорош тем, что изображения могут быть анимированные, то есть состоять из нескольких кадров (как кусочек фильма или мультика), а также изображения имеют малый вес. Однако, есть ограничение на количество цветов. Кроме того, как и png-формат, gif позволяет реализовать прозрачность элементов меню и других. Jpeg – формат изображений, чаще всего используемый в веб, его достоинством является возможность сжатия изображения. Png также поддерживает сжатие и прозрачность.

    В связи с развитием средств поиска, важных фактором в оптимизации является также уникальность изображений. Их не обязательно рисовать самому, можно использовать несколько, чтобы сделать коллаж например.
    Самым важным фактором в ранжировании изображений является альтернативное описание картинки. За него отвечает тег alt. Если даже у пользователя отключены изображения на сайте, пользователь может увидеть содержимое тега на месте картинки. Если описание картинки необходимо сделать очень длинным, то можно использовать атрибут LONGDESC, в нем указывается путь к длинному описанию, которое соединяется с содержимым тега alt.

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

    Следующие критерий ни как не влияет на ранжирование, однако, он слегка защитит Ваши изображения от краж, и повысит популярность ресурса. Речь идет о водяном знаке, картинке или надписи на самом изображении.
    Присмотритесь к словам-маркерам – какие из ключевых слов сайта чаще всего используются со словами “фото”, “изображение”.

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

    Тот текст, что размещен под картинкой, также внимательно учитывают поисковые системы и воспринимают его, как заголовок к картинке.


    Автор - Сергей Гусаров, специально для WebTalking.ru


    Комментарии 2 Комментарии
    1. Аватар для NoClick
      Статья получилась "кислая". Ибо ошибочные утверждения. Может исправить или дополнить?

      и этот вариант несколько хуже, чем Pamela_naked.jpg
      1. Пишите всегда маленькими буквами. И сами не запутаетесь потом, и посетителю удобней
      2. В качестве разделителя используйте не знак подчеркивания _, а тире -.
      3. Лучший вариант: naked-pamela-anderson.jpg, и самое-самое — если еще и путь до изображения будет не /photo/naked-pamela-anderson.jpg, а с соблюдением иерархии /stars/naked/pamela-anderson.jpg

      Gif... а также изображения имеют малый вес
      Это зависит от того, что изображено на изображении. В качестве примера сравните:
      Цветастую фотографию сохраните в gif и jpeg. Где меньше?
      Возьмите фотографию, например, на паспорт (когда вокруг много однородного цвета), либо где линии прямые и четкие. Где меньше?

      Jpeg – формат изображений
      И gif, и png — формат изображений. Просто одни растровые (состоят из пикселей), а svg — описание точек-фигур и т.п. Т.е., типа, векторный. И вполне что его будут часто использовать (из-за отображаемого качества). Например, когда нужна маленькая надпись не стандартным шрифтом, но чтобы при этом была четкая и легкочитаемая.

      его достоинством является возможность сжатия изображения
      Какого? А у, например, png?

      Самым важным фактором в ранжировании изображений является альтернативное описание картинки. За него отвечает тег alt
      alt — это не тэг, а параметр тэга img.
      Параметр alt — описывает изображения когда еще изображения не успели подгрузиться. Т.е. типа пометки: Тут еще не загрузилось, но это Логотип. Чтобы человек мог шастать по сайту не дожидаясь полной загрузки страницы (её элементов).
      А вот параметр title — как раз и отвечает за то, что описывает что изображено на изображении.
      В ИЕ если нету title то в качестве всплывающей подсказки (при наведении) покажется alt. В Мозиле — ничего не покажеться. ИЕ вообще, на самом деле, пользовательски удобный браузер. Он исправляет много ошибок которые присутствуют в html. Другие обычно покажут так как есть. Есть ошибка? Покажут с ошибкой и не будут её исправлять.

      Тот текст, что размещен под картинкой, также внимательно учитывают поисковые системы и воспринимают его, как заголовок к картинке.
      И чтобы правильно воспринял, лучше обрамить и изображение и текст каким-нить блочным тэгом. Типа div или p.

      однако, он слегка защитит Ваши изображения от краж, и повысит популярность ресурса. Речь идет о водяном знаке, картинке или надписи на самом изображении.
      Тут надо подходить индивидуально. Где-то надо давать (но так, чтобы и было и было еле заметно), а где-то нет.
      И главное не забывать — формат jpg поддерживает скрытый копирайт! (можно "вшить" в изображение и описание, и авторство и... ссылку).
    1. Аватар для FATALITY
      Цитата Сообщение от NoClick Посмотреть сообщение
      И главное не забывать — формат jpg поддерживает скрытый копирайт! (можно "вшить" в изображение и описание, и авторство и... ссылку).
      В этом случае, изображение будет больше весить, а тут тема об оптимизации все же.
  • Последние комментарии Последние комментарии

    ca6aka

    Да чё тут Флуд то разводить??
    Если для своих ресурсов, то предпочитаю сам писать.
    А если на... К последнему сообщению

    Уникальный контент. Копирайтинг или рерайтинг?

    ca6aka в 06.05.2012
Счетчик цитирования Наш twitter