Вопрос по html, srcset – «Бесконечный» или «умный» srcset при использовании изменения размера на стороне сервера?

1

Я использую серверное изображение, изменяющее размер динамически через URL-адреса, такие как<img src="converter/500w/picture.jpg">, Это означает, что у меня есть практически бесконечное количество размеров изображений, которые я могу обслуживать. Щас пользуюсь<img srcset="..."> (так же как<picture> теги), чтобы обслуживать множество более или менее случайно выбранных размеров изображения. Однако это приводит к большой разметке и не очень гибко.

Можно ли использоватьsrcset (или другая разметка HTML), чтобы сообщить браузеру, как запрашивать изображения произвольного размера? Если нет, возможно ли сделать это с помощью JavaScript / jQuery надежно во всех браузерах?

Можно ли быть умным о том, какие размеры включить в вашsrcsetили вы просто должны включить что-то вроде 5-10 разрешений в диапазоне от маленького до большого / оригинального? Я думал, что ширина, относящаяся к вашим точкам останова, будет хорошим кандидатом для включения, но это не учитывает устройства с высоким разрешением.

Я осознаю "бесконечность"srcset придет по цене. Обработка может быть тяжелой на сервере, хотя это сильно зависит от ваших посетителей (количество и различия в характеристиках экрана). Дисковое пространство также является проблемой, но может быть уменьшено сборкой мусора (хотя это увеличит влияние первой проблемы). Тем не менее, мне интересно, если это возможно, и если есть разумный выбор разрешений, если нет.

Ваш Ответ

1   ответ
1

Нет, вы не можете указать браузеру конкретный шаблон для запроса разных кандидатов. Я также сомневаюсь, что было бы полезно генерировать бесконечное количество изображений-кандидатов.

То, что вы можете использовать на стороне клиента, чтобы сделать работу за вас, будет следующий скрипт: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>
Может быть, чит в атрибуте размеров вместо? Или это имеет такой же потенциальный риск? donquixote
Интересное решение. Задокументирован ли где-либо под этим именем «шаблон сжимающего изображения»? donquixote
А знаете ли вы, как браузер выбирает, какое изображение отображать? Например. если он знает, что ширина макета будет 700px, он предпочтет версию 800px или 600px? Можем ли мы как-то сказать ему использовать версию с гораздо более высоким разрешением (но более низким качеством сжатия) для лучшего уменьшения масштаба? Например. путем "обмана" в srcset и продажи изображения 1600px за 800 Вт. donquixote
О мошенничестве: этот метод следует использовать с осторожностью, поскольку алгоритм браузера обманут и работает с неправильными значениями, что может привести к непредсказуемым и плохим результатам. (github.com/aFarkas/lazysizes/tree/gh-pages/plugins/...), Смотрите также:github.com/ResponsiveImagesCG/picture-element/issues/273 alexander farkas

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