Несколько советов по оптимизации изображений для сайта.

Недавно я написал статью “Скорость загрузки сайта, проверить и увеличить ее”, в которой рассказал, какие факторы влияют на скорость загрузки сайта в большей степени. Одним из факторов я указал графику, а точнее изображения которые публикуются на ресурсе.

Если посмотреть большинство сайтов в интернете, то можно заметить, что оптимизации изображений не придают большого значения, но этот фактор один из наиболее влияющих на скорость загрузки сайта (страницы). Как правило картинки есть на всех сайтах и они довольно таки сильно замедляют его работу. Можете проверить свой ресурс с помощью gtmetrix.com и в этом убедиться.

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

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

Советы по оптимизации изображений для сайта.

Для начала давайте посмотри какие шаги необходимо сделать:

  1. Выбирайте правильный формат;
  2. Подберите качество изображения;
  3. Используйте только понятные названия файлов;
  4. Используйте название (alt) и описание (title) для картинки;
  5. Выбирайте правильный размер изображения;
  6. Не делайте размеры изображений в стилях (css), указывайте их в коде html.

Выбирайте правильный формат

Мало кто думает про выбор формата. Их не так уж много и можно посмотреть и почитать по каждому информацию. Как правило в интернете наиболее популярны 3 вида форматов:

  • jpeg
  • png
  • gif

Но их на самом деле на много больше. Я же рекомендую использовать всегда формат jpeg, так как его можно хорошо сжимать без потери качества, при этом его вес достаточно мал и он отлично подойдет для сайта. Png так же можно использовать в малом количестве, там где без него не возможно обойтись например: логотип, шапка сайта, футер и т.д.

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

Качество изображения.

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

Используйте только понятные названия файлов.

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

Например у вас картинка по мультфильму Лёлик и Болик, понятное название будет “мультфильм Лёлик Болик” или “мультфильм” а не “images_1_Lolek

Такая проблема есть у большинства сайтов и наш не исключение, но мы работает над устранением данной проблемы и Вам рекомендуем.

Используйте название (alt)  и описание (title) для картинки.

В пункте выше мы уже затронули один параметр название (alt), к нему рекомендуется добавлять описание (title) картинки, для того, что бы поисковик понял полную суть передачи информации, которая изображена на картинке.

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

Правильный размер изображения.

Всегда подбирайте правильный размер изображений. Если на сайте максимальные изображения 650х350 то старайтесь их подгонять под данный размер, а не вставлять изображения 1200×700. Тем самым будет экономится место на хостинге и скорость загрузки страницы, чего мы и добиваемся.

Мы на своем блоге Loleknbolek.com используем изображения 720×340, которые с помощью плагина режутся на миниатюры и подгоняются под необходимые размеры. Хорошо выходит и не нужно тратить свое время.

Указывайте размеры изображений в коде html.

Не задавайте какие либо размеры изображений с помощью таблиц стилей (css). Такое применение сжимает картинку до нужного размера, но тем самым не уменьшает его вес. Лучше всего задать необходимый размер в самом html коде. С помощью такого метода изображение будет весить меньше и так будет правильнее.

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

Оцените статью:

Очень плохоПлохоНормальноХорошоОтлично (10 Рейтинг: 4,60 из 5)
Loading...Loading...

Если Вам понравилась статья, поделитесь с друзьями в соц. сетях:

Вам также может понравиться...

Не хотите пропустить новую статью? Тогда подписывайтесь...

Комментариев: 2

  1. Aztec:

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

  2. Bolek:

    Согласен, что влияют на продвижение и на благоприятное впечетление пользователя на 100%.

Добавить комментарий

Уважаемые пользователи!


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


С уважением, Администрация сайта.


Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Связаться с нами

Если у Вас возникли какие либо вопросы, предложения и пожелания для развития нашего ресурса, связаться с нами Вы можете по e-mail: loleknbolek.com@gmail.com, или заполните форму что находиться ниже.

Пишите мы будем рады Вам ответить!