omnitools.ru
главная  |  оптимизация сайтов  |  оптимизация изображений на сайте

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

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

Существующие методы

В отношении оптимизации изображений на сайте можно предпринять следующие меры:

  • использование современных графических форматов;
  • объединение маленьких картинок в один большой файл;
  • отложенная загрузка.

Современные форматы

Одним из наиболее популярных современных форматов передачи изображения является .webp. Графические данные в этом формате при одинаковом качестве от 2 до 10 раз меньше популярных .jpg и .png. С точки зрения оптимизации скорости загрузки страницы использование этого формата вполне оправдано. К сожалению не все современные браузеры поддерживают данный формат. Впрочем, среди не поддерживающих - всего два, это: Safari и IExplorer. Для обеспечения совместимости с этими браузерами рекомендуется использовать вместо элемента img элемент picture. Последний требует более детального изучения, так как имеет широкие возможности.

Маленькие картинки в большую

Следует понимать, что загрузка отдельного файла создает отдельное соединение с сервером, чем увеличивает на него нагрузку. Для того, что бы снизить нагрузку на сайт рекомендуется маленькие картинки объединять в большие сеты(наборы). Одна картинка загрузится значительно быстрее чем множество маленьких. Объединение в сет хорошо использовать для элементов дизайна и далее в css большое изображение разбивать на маленькие фрагменты. Например, мы загружаем один большой файл и далее стилями делим на необходимые фрагменты:

#soc1, #soc2, #soc3, #soc4, #soc5 {
	background:url('/img/socials3.png') no-repeat;
	background-size: 300px;
	margin: 5px;width:60px; 
	height: 60px;
}

#soc1{background-position:0px 0px;}
#soc2{background-position:-60px 0px;}
#soc3{background-position:-120px 0px;}
#soc4{background-position:-180px 0px;}
#soc5{background-position:-240px 0px;}

Отложенная загрузка

Этот метод применяется совместно с Javascript технологиями или средствами браузера. Смысл отложенной загрузки в том, то бы загружать изображение только тогда, когда оно попадает в поле просмотра. Для организации отложенной загрузки средствами браузера элементу img необходимо добавить атрибут loading="lazy". Для организации отложенной загрузки изображения средствами Javascript применят переименование атрибута src в data-src. При появлении элемента в видимой области экрана данные из data-src записываются в атрибут src. После этого изображение загружается.

Рекомендация

Если Вы затрудняетесь самостоятельно выполнить рекомендованные оптимизации на своем сайте, обращайтесь к нам. Будем рады Вам помочь. support@omnitools.ru

pub:
upd:
Заказать оптимизацию сайта

Это интересно

Дополнительно по теме

https://omnitools.ru/img/optimizatsiya/optimizatsiya-bzobrajeniy-na-sayte.jpg
Продвижение сайтов в Москве заказать от 10 000 рублей. Тел. +7 (925) 120-35-52 115093, г. Москва, ул. Павловская, д. 18 +7 (925) 120-35-52
Оптимизация изображений на сайте
Оптимизация изображений на сайте https://omnitools.ru/optimizatsiya/optimizatsiya-izobrajeniy-na-sayte.html

Написать нам

имя:
e-mail:
телефон:
должность:
регион:

главная  |  оптимизация сайтов  |  оптимизация изображений на сайте