Использование SRCSET с изображениями и миниатюрами записей

Question

Использование SRCSET с изображениями и миниатюрами записей

27 дек. 2016 г., 18:19:00

Просмотры: 944

Голосов: 1

Я пытаюсь заставить SRCSET загружать изображения для разных размеров устройств.

Насколько я понимаю, при изменении ширины устройства или окна, SRCSET должен загружать ТОЛЬКО URL соответствующего размера.

Я вижу, что генерируются URL для каждого изображения, а также их размеры. Это реальные изображения, и они правильно ссылаются на соответствующие размеры:

Генерируемые WordPress URL для SRCSET

Это отлично! Проблема в том, что я не смог ни на одном устройстве доказать, что браузер загружает что-то кроме оригинального (большого) изображения. Другими словами, что другие, оптимизированные для мобильных устройств размеры вообще используются. Если я открываю или сохраняю изображение, это всегда оригинал. Меньшие размеры изображений, похоже, вообще не используются.

Вопрос: есть ли JavaScript компонент, или, возможно, какая-то конфигурация, которую я упускаю? Что-то, что нужно подключить в WordPress? Я использую собственную тему, но замечаю то же самое с TwentyFifteen. Нужно ли что-то регистрировать в файле functions.php? Я пишу это после долгих исследований и до сих пор совершенно не понимаю, какой шаг я пропустил.

TwoLunch

11

изображения мобильный адаптивный retina

Комментарии

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

cybmeta

27 дек. 2016 г. 19:54:11

Я использую инструменты разработчика, и они показывают загрузку только оригинального изображения, независимо от ширины устройства, даже в Chrome Device Toolbar. На вкладке Network единственный ресурс, который загружается в таймлайне — это оригинальное большое изображение на всех размерах. Проверял также в Firefox. Нет момента, когда что-то "переключается" или заменяется. Я мог бы понять, если бы это происходило в десктопных браузерах (которые не воспринимают уменьшенное окно как реально меньший вьюпорт), но я не знаю, как ещё проверить, что это действительно работает.

TwoLunch

29 дек. 2016 г. 16:57:41

Все ответы на вопрос

JHoffmann 1.86K · Answer 1 · 2016-12-27T19:32:10Z

Браузеры, которые понимают атрибут srcset, автоматически выберут изображение, соответствующее заданным размерам и доступному пространству. Большинство современных браузеров поддерживают эту функцию, тогда как старые браузеры, которые всё ещё можно встретить, откатятся к запасному варианту и просто загрузят изображение, указанное в атрибуте src. Для активации этой функции не требуется дополнительного JavaScript — достаточно наличия корректного атрибута srcset.

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

Ещё один способ визуализировать, какие изображения загружаются, — заменить версии разных размеров на изображения с разным содержимым напрямую через FTP. Это позволит легко определить, какая версия была загружена.