Как динамически формировать URL картинки?

Question

[Ross Alex]

Дано: есть тэг img, у которого источник - url сервера картинок.

Нужно: чтобы картинка загружалась именно той ширины, какой ширины является тег через URL вида https://domain.com/img-id/<ширина>.

Srcset и sizes что-то не получается сделать точным, только диапазонами вида 320w, 480w, 640w, 1024w. Цель - удовлетворить Google Pagespeed Insights по размерам изображений.

Спасибо за ваши мысли и опыт!

Comments

[Semantic.Moscow]

я бы не увлекался этим Google Pagespeed Insights
сомнительное писькомерство.

все мои сайты загружаются и готовы к работе менее чем через секунду,
но по мнению гугла, эти сайты хуже, чем те, которые загружаются по 3-5 секунд

для удовлетворения необъективных тестов нужно нагружать документы избыточным кодом?
в странное время мы живём - раньше, хорошим тоном было не делать инлайн-оформление,
теперь от нас требуют наоборот, делать контент неотделимым от представления - это бред!

[Ross Alex]

Semantic.Moscow, что поделать то?! Когда заказчики хотят и платят за это, хотелось бы понимать, как это сделать малой кровью, без скриптов. А вообще, согласен с вами полностью.

Answer 1

[Semantic.Moscow]

не очень понимаю суть вопроса.

если в момент формирования документа размер картинки передаётся в тег,
то и в юрл тега должен передаваться какой-то параметр (такой же)

т.е.:

$size = '200';
$name = 'image_1223';
$alt = 'описание картинки';
echo '<img width="'.$size.'" src="/images.php?'.$name.'&'.$size.'" alt="'.$alt.'"/>

ну а в images.php уже принимаете значения из $_GET и в ответ отдаёте нужный файл

ну а про "https://domain.com/img-id/<ширина>" это уже софистика и имеет отношение только к .htaccess

Comments

[Ross Alex]

Чуток не то… это со стороны фронта и я не знаю размер документа. Размер картинки динамический. Но, думаю, вопрос скорее из разряда маразма уж, чем здравого смысла :)

[Semantic.Moscow]

Ross Alex, ну так если всё сводится к размеру вьюпорта, то это исключительно CSS - делаем @media(max-width:640px){....
@media(max-width:1000px){...
и тд.
подставляем нужные изображения.

ну, или через JS - нужно только спросить у клиента ширину его окна через window.innerWidth,
седлать выводы и подставить нужные значения в DOM

[Ross Alex]

Semantic.Moscow, смысл в динамике! Не в статике. Как сделать в статике понятно. Смысл в том, что в данной задаче мы не знаем размер экрана, соответственно и размер тега img и название фотографии, которая не является частью дизайна, а загружается человеком в CMS.

[Semantic.Moscow]

Ross Alex, размер экрана мы знаем - выше я написал про window.innerWidth