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

#html #css #css3 #оптимизация #оптимизация_сайтов

На сайте используется ряд изображений с высоким разрешением от 2500px.

pageSpeed конечно же ругается, поэтому пытаюсь использовать современный атрибут srcset
для изображений:



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  margin: auto;
}

  





Для высоко разрешения так и использую в 2500px, а для обычного делаю эти же картинки
в уменьшенным в 2 раза разрешением.

Пример записи img для реального проекта:




В итоге по всем "возможностям" pagespeed ругается на эти изображения и ругается на
img-1-2x.jpg Т.е. на телефонах вместо того чтобы отображать  img-1-1x.jpg отображается
большая картинка.





И такие проблемы только для моб. девайсов:



Для десктопа все отлично, скорость 90+!

По совету использую Echo.js lazy load, но этот lazy load на телефонах (особенно при
плохом интернете) не все фото грузит.



Update:

Как оказалось запись: 




не валидна! 

При использовании атрибута sizes запись должна быть подобна этой:

 


Просмотрев видеоурок с рекомендацией о сжатии изображения в squoosh.app, сделала
изображения с разрешением .webp. Подключила с использованием picture:

   
     

     
   


Изображения в формате .webp весят около 200-300 кб, это при том что в большом разрешении
около 2 Мб.

В итоге скорость на страницах упала до 10 - 13, и изображения отображаются только
в хроме. Стоит последняя версия firefox, но почему-то и в нем не отображаются картинки. 

caniuse.com/#feat=picture 

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



Вопрос: 
Почему срабатывает огромное разрешение для телефонов, а не уменьшенное при записи

Ответы
Ответ 1

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

Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное
сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения
PNG и JPEG. 

Вариант с picture наиболее кроссбраузерный.

 
   
   



Сначала даете ему на съедение картинку в формате webp (как я вам в примере написал),
если он не поддерживает такой тип, то будет грузить jpg. 

Но гугл пейдж спид это расценит как ХОРОШО.


Ответ 2

Вообще можете тестировать и оптимизировать изображения в gtmetrix, но если поищите
можете найти другие сайты для оптимизации, и еще в photoshop сохраните изображение
с таким качеством что бы было оптимально размер -> качество.

И еще один важный момент. Это для мобильного сайта.

Изображения которые не должны быть видны в мобильном. сделайте фоном блока(если это
возможно) в место тега img. И в определенный момент когда блок скрывается ОБЯЗАТЕЛЬНО
для этого разрешения экрана поставьте для этого блока с фоновым изображением background-image:
none;. 

Вот таким образом в вы достаточно оптимизируете свою страницу.


Ответ 3

А если в src ставить уменьшенную картинку, или заглушку и после загрузки скриптом
менять из атрибута, причем можно и с проверкой разрешения окна и для мобильных брать
например из data-mobile меньшего размера? Не знаю такой вариант обманет ли pageSpeed.
Можно переписать на чистом JS   



$(function() {
  $('.big').html(function() {
      $(this).attr("src", $(this).attr('data'));
  });
});