Оптимизация изображений для показателей PageSpeed Insights

@Porto · Регистрация: 14.05.2022

Студворк — интернет-сервис помощи студентам

При верстке для карточек с товарами использована структура с изображениями с подготовленными конвертированными изображениями в формат *.webp

HTML5
1
2
3
<a target="_blank" href="@img/favorite/cozystudio.webp" class="house-minion__poster">
<img src="@img/favorite/cozystudio.webp" class="house-minion__trump"
srcset="@img/favorite/cozystudio@2.webp 2x, @img/favorite/cozystudio@2.webp 3x" alt="Cozy studio"> </a>

Но при проверке оптимизации сервис PageSpeed Insights очень предирчиво относится и выдает ошибки.
Если метод или правила которые бы позволили исключить данные ошибки по изображениям

@Porto · 31.03.2024, 20:23 **[ТС]**

Сообщение от AlexZaw

Кстати, а зачем вам столько брейкпоинтов в медиазапросах и почему они через em сделаны?

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

@AlexZaw · 31.03.2024, 21:30

Сообщение от Porto

При меньшем числе брейкпоинтов картинка начинает плыть, не четкой становится.

Ерунда какая-то, максимум что может случиться это появятся полосы прокрутки из-за того, что заданы фиксированные размеры и контент перестает помещаться на экран. Ну или элементы начнут выстраиваться не очень красиво. Но это гораздо проще решить с помощью резиновой верстки чем использовать столько запросов.
Если картинка (кстати что вы имеете ввиду под картинкой? Общую картинку сайта или именно изображения на сайте?) становится нечеткой, то что-то у вас сделано не так. Первый раз про такое слышу.

@Porto · 01.04.2024, 18:43 **[ТС]**

Сообщение от AlexZaw

Если картинка (кстати что вы имеете ввиду под картинкой? Общую картинку сайта или именно изображения на сайте?) становится нечеткой, то что-то у вас сделано не так. Первый раз про такое слышу.

Возможно из-за малого опыта могу ошибаться.

Имеются ввиду картинки на сайте в разных section

Новые блоги и статьи Все статьи Все блоги /
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последнея моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Nekobox - outbounds[0].transport: unknown transport type: raw damix 01.10.2026 Фикс ошибки Правым кликом по серверу -> отладочная информация -> edit Заменить "net": "raw", на "net": "tcp", Нажать кнопку reload.	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .