Как обслуживать масштабированные изображения в Laravel?

Question

Я отображаю изображения как:

 <img class="card-img-top" style="max-height: 121px; 
 border:1px solid #eee;"
 src="{{ $post->image == null ? url('img/default.png') : url($post->image)}}

Но при анализе скорости страницы появляется рекомендация «PageSpeed: обслуживать масштабированные изображения» для некоторых изображений, таких как:

Размер следующих изображений изменен в HTML или CSS. Обслуживание масштабированных изображений может сэкономить 353,7 КБ (сокращение на 90%).

Знаете ли вы, как исправить эту проблему?

https://....ngrok.io/uploads/posts/img1.png is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 173.3KiB (90% reduction).
https://....ngrok.io/uploads/posts/img2.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 40.2KiB (90% reduction).
https://....ngrok.io/uploads/posts/img3.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 38.3KiB (90% reduction).
https://....ngrok.io/uploads/posts/img4.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 31.6KiB (90% reduction).
https://...ngrok.io/uploads/posts/img5.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 28.9KiB (90% reduction).
https://....ngrok.io/uploads/posts/img6.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 28.0KiB (90% reduction).
https://....ngrok.io/uploads/posts/img7.jpg is resized in HTML or CSS from 800x400 to 251x119. Serving a scaled image could save 13.4KiB (90% reduction).

Answer 1

Это означает, что на вашем сервере должно быть изображение размером с контейнер, в котором вы его просматриваете, например, максимальная ширина изображения на мобильном устройстве должна составлять 425px

Если изображения статичны, вы можете создать каждое изображение для ширины контейнера, отображаемой в отчете pageSpeed.

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

Answer 2

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