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

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

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

8 ответов

5 просмотров

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

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

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

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

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

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

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

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

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

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

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

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

Обсуждают сегодня

Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
70
Всем доброго дня, ребят подскажите пожалуйста, если в курсе по ассемблеру используется MASM32, могу ли я использовать FASM? В чем явная разница и будет ли у меня все работать?
Botsman
17
Хотел бы спросить у знающих, правильную ли я выбрал книгу для начала изучения ассемблера Юрова В.И ? Или есть более лучшие книги для начала обучения?
Botsman
25
Книга Юрова В.И пойдёт для обучения?
Botsman
24
$params = [ 'formid' => 'feedbackForm', 'formTpl' => '@CODE: <form class="form-validate" data-id="ajax_form"> <fieldset class="margin-bottom-md"> ...
Pathologic
1
Люди добрые, помогите с идеями, потому что свои закончились. У клиента падает софтина в момент инициализации модуля OtlEventMonitor на RegisterWindowMessage('Gp/OtlTaskEvents/...
Михаил Усков
7
> Примечательно, что новый владелец удаляет из GitHub любые жалобы, указывающие на подозрительную активность или смену владельца, и, видимо, рассчитывает на то, что пользовате...
Alex Sherbakov
2
GridView fully ignored first parent(SizedBox), and take width from second parent(Container). How can I constrain GridView by first parent? Widget build(BuildContext context) {...
Hamster
1
Коллеги, добрый день. Есть такой вопрос: Есть модуль, который надо запустить через супервизор как дочерний процесс. Пока инстансов было нужно 8, всё было окей, но когда их ст...
Δημήτηρ
4
Hey there Which is the best Linux destro for developers (coding)? To my research on reddit, they said Linux mint is good for mid level spec and Ubuntu for high Lev hardwar...
Wiz 🪄
11
Карта сайта