Ребят. Делаю сайт с уроками. В нем есть картинки PNG.

Question

Ребят. Делаю сайт с уроками. В нем есть картинки PNG.

Google page speed говорит что они большие. Я могу как-то через мидл варе сделать конвертер картинок. Чтоб они конвертировались на лету для телефона и для компа с разными параметрами.. И как потом их кешировать ?

#laravel #programming #russian

0

25.09.2023

8 ответов

4 просмотра

Andrey Helldar

Можно и через мидлварю, но тогда будут проблемы: 1. Нужно на лету парсить user agent с целью понять с мобилы запрос или нет (это всегда); 2. Проверить существование обрезанного файла; 3. Если файл не существует - на лету его обрезать (https://image.intervention.io/v2/usage/cache) По времени первая нарезка ещё больше займёт при отрисовки страницы. Поэтому лучше резать при создании записей, а фронтенд сам на стороне браузера сможет определить мобила это или нет, и отправит либо один урл, либо другой для загрузки того или иного изображения. А вообще для веба рекомендую формат картинок webp и формат видео webm. У них вес в разы меньше jpg, не говоря уже о png.

0

8 месяцев назад

Vitalii Lebedynskyi Автор вопроса

Andrey Helldar
Можно и через мидлварю, но тогда будут проблемы: ...

а для SEO урлы картинок должны быть одинаковые? и просто в контроллере отдать правильный байты? или на фронте прям ставить разные урлы?

0

8 месяцев назад

PSYTRGLES

Vitalii Lebedynskyi
а для SEO урлы картинок должны быть одинаковые? и ...

клиент должен иметь возможность закешировать изобрадение. поэтому конечно разные

0

8 месяцев назад

Andrey Helldar

Vitalii Lebedynskyi
а для SEO урлы картинок должны быть одинаковые? и ...

В идеале разные. Грубо говоря: device.isMobile ? '/images/some.webp' : '/images/some-small.webp' Или device.isMobile ? '/images/some.webp' : '/images/some.webp?mobile=1'

0

8 месяцев назад

Vitalii Lebedynskyi Автор вопроса

Andrey Helldar
В идеале разные. Грубо говоря: device.isMobile ...

понял. спасибо

0

8 месяцев назад

Andrey Helldar

Vitalii Lebedynskyi
а для SEO урлы картинок должны быть одинаковые? и ...

Если браузер закэширует изображение у себя (а он закэширует), поэтому лучше разные.

0

8 месяцев назад

PSYTRGLES

https://zaiste.net/network/nginx/howtos/howto-resize-on-the-fly-cache-images-nginx/

0

8 месяцев назад

Vitaliy · Accepted Answer

Vitaliy

https://image.intervention.io/v2/introduction/installation - вот есть пакет. Реализуйте экшон с ресайзом и конвертацией в нужыне форматы. При обращении с фронта - проверяете файлы - если есть - отдаёте , если нет - создаете и отадёте.

0

8 месяцев назад

169 похожих чатов

Ребят. Делаю сайт с уроками. В нем есть картинки PNG.

8 ответов

Похожие вопросы