Вопрос по html, srcset – «Бесконечный» или «умный» srcset при использовании изменения размера на стороне сервера?
Я использую серверное изображение, изменяющее размер динамически через URL-адреса, такие как<img src="converter/500w/picture.jpg">, Это означает, что у меня есть практически бесконечное количество размеров изображений, которые я могу обслуживать. Щас пользуюсь<img srcset="..."> (так же как<picture> теги), чтобы обслуживать множество более или менее случайно выбранных размеров изображения. Однако это приводит к большой разметке и не очень гибко.
Можно ли использоватьsrcset (или другая разметка HTML), чтобы сообщить браузеру, как запрашивать изображения произвольного размера? Если нет, возможно ли сделать это с помощью JavaScript / jQuery надежно во всех браузерах?
Можно ли быть умным о том, какие размеры включить в вашsrcsetили вы просто должны включить что-то вроде 5-10 разрешений в диапазоне от маленького до большого / оригинального? Я думал, что ширина, относящаяся к вашим точкам останова, будет хорошим кандидатом для включения, но это не учитывает устройства с высоким разрешением.
Я осознаю "бесконечность"srcset придет по цене. Обработка может быть тяжелой на сервере, хотя это сильно зависит от ваших посетителей (количество и различия в характеристиках экрана). Дисковое пространство также является проблемой, но может быть уменьшено сборкой мусора (хотя это увеличит влияние первой проблемы). Тем не менее, мне интересно, если это возможно, и если есть разумный выбор разрешений, если нет.
Нет, вы не можете указать браузеру конкретный шаблон для запроса разных кандидатов. Я также сомневаюсь, что было бы полезно генерировать бесконечное количество изображений-кандидатов.
То, что вы можете использовать на стороне клиента, чтобы сделать работу за вас, будет следующий скрипт:https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias
В случае, если у вас так много ресурсов, я также настоятельно рекомендую доставлять сжатые изображения с более высоким разрешением на устройства Retina. Это можно сделать либо с помощью плагина RIaS, упомянутого выше (см. Документацию), либо с помощью «шаблона сжатия изображения»:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source
srcset="image-w1600-q50.jpg 1600w,
image-w1440-q50.jpg 1440w,
image-w1200-q50.jpg 1200w,
image-w800-q50.jpg 800w,
image-w600-q50.jpg 600w,
image-w400-q50.jpg 400w"
sizes="(your sizes), 100vw"
media="(-webkit-min-device-pixel-ratio: 1.9),
(min-resolution: 1.9dppx)" />
<source
srcset="w1600-q80.jpg 1600w,
image-w1440-q80.jpg 1440w,
image-w1200-q80.jpg 1200w,
image-w800-q80.jpg 800w,
image-w600-q80.jpg 600w,
image-w400-q80.jpg 400w"
sizes="(your sizes), 100vw" />
<!--[if IE 9]></video><![endif]-->
<img
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
sizes="(your sizes), 100vw"
alt="picture but without artdirection" />
</picture>
Похожие вопросы
