Как заставить srcset распознавать, что изображение не будет отображаться в полном размере на маленьких дисплеях? - PullRequest
Новая
       19

Как заставить srcset распознавать, что изображение не будет отображаться в полном размере на маленьких дисплеях?

0 голосов
/ 12 июня 2019

У меня есть изображения, которые отображаются на 100% ширины области просмотра, вплоть до максимальной ширины 960 CSS-пикселей. Я использую srcset для доставки версии каждого изображения шириной 960 пикселей на обычные дисплеи и версию шириной 1920 пикселей для дисплеев с высокой плотностью пикселей.

Проблема в том, что, когда дело доходит до окон просмотра меньше 960 пикселей, изображения уменьшаются в размерах, чтобы соответствовать. Это приводит к тому, что узкие окна просмотра получают обслуживаемые изображения с более высоким разрешением, чем им требуется, потому что srcset не осознает, что эти изображения не будут отображаться с шириной 960 пикселей.

Я бы хотел избежать сценариев на стороне сервера, но в случае необходимости можно использовать легкие (без JQuery) сценарии на стороне клиента. Было бы предпочтительным чисто HTML / CSS решение.

Edit:

Как и предполагалось, я собрал пример. Возможно, вам лучше скопировать это в локальный файл: 

<picture>
    <source type="image/webp" srcset="https://dummyimage.com/960x540/000/fff, https://dummyimage.com/1920x1080/000/fff 2x">
    <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">
</picture>

Чтобы понять, что я имею в виду, попробуйте следующее. Отрегулируйте эти цифры соответствующим образом, если у вас высокий показатель PPI, и перед каждым шагом выполняйте надлежащее обновление, если используете Chrome с отключенным кешем из инструментов разработчика (Ctrl + F5 не сбрасывает, какое изображение загружается!). Firefox автоматически переключается в зависимости от уровня масштабирования:

  1. Начните с увеличения 100%. Изображение размером 960 пикселей должно загрузиться.
  2. Начните с увеличения 200%. Изображение в формате 1920px должно загрузиться.
  3. Начните с 200% -го увеличения с областью просмотра, столь узкой, как Вы смеете. 1920px все еще загружается!

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

Другое редактирование:

Выполнение следующих действий с использованием sizes и w выглядит многообещающе: 

<picture>
    <source type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://dummyimage.com/960x540/000/0f0 960w, https://dummyimage.com/1920x1080/000/0f0 1920w">
    <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/480x270/000/0f0" width="960" height="540" alt="">
</picture>

Тем не менее, он всегда возвращает самое большое изображение, которое он может найти на мобильном телефоне (да, если убедиться, что разрешение первого изображения установлено как минимум на разрешение устройства), так что это не вариант.

1 Ответ

0 голосов
/ 21 июня 2019

Ну, я немного подумал об этом, и с 2019 года, похоже, в CSS нет подходящего способа сделать это.Медиа-запросы возможны, но могут быть получены только размер области просмотра (в пикселях CSS) и плотность пикселей, а не собственное разрешение, так что было бы необоснованное количество комбинаций для учета.

Я включунемного грязный пример, с которым смогут работать любые другие, включая меня.Он имеет только эти два разрешения, но вы всегда можете добавить больше размеров для учета общих разрешений по горизонтали, таких как 720px, 1080px и 1440px. 

<picture>
    <noscript>
        <source type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://dummyimage.com/960x540/000/fff">
        <img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">
    </noscript>
    <script>
        document.write('<source id="myImage" type="image/webp" sizes="(min-width: 960px) 960px, 100vw" srcset="https://spacergif.org/spacer.gif"><img style="width: 100%; max-width: 960px; height: auto;" src="https://dummyimage.com/960x540/000/fff" width="960" height="540" alt="">');

        var screenWidth = window.screen.availWidth * window.devicePixelRatio;
        var imageWidth;

        if (screenWidth <= 1080) {
            imageWidth = 960;
        } else {
            imageWidth = 1920;
        }

        document.getElementById("myImage").srcset = "https://dummyimage.com/" + imageWidth + "x" + imageWidth * 0.5625 + "/000/fff";
    </script>
</picture>

Сначала у нас есть запасной вариант без JS, который всегда составляет 960pxширокий.Затем JavaScript пишет то же самое, чтобы гарантировать, что пользователи без JS не получат его - в качестве альтернативы вы могли бы просто скрыть это от пользователей без JS с <noscript> ed CSS - но с разделительными GIF-файлами в качестве источников.Вы можете использовать GIF-код base64 для сохранения HTTP-запроса.Затем источники заменяются версиями на 960 или 1920 пикселей, в зависимости от собственного разрешения веб-страницы.Помните, что это также включает пространство, используемое инструментами разработчика в Chrome.

...