Полноразмерное изображение из srcset ВСЕГДА используется на мобильных устройствах НЕСМОТРЯ на установку размера изображения в редакторе.

У меня есть чрезвычайно раздражающая проблема, когда на мобильных устройствах (проверено в Chrome на Android и iOS, а также в Safari на iOS) всегда используется изображение наибольшего размера из srcset (даже если меньший размер ЯВНО выбран в редакторе).

Вот краткое описание проблемы:

• В редакторе WordPress, при вставке изображения, я выбираю КРУПНЫЙ (720px x 480px) как размер изображения
• На мобильном устройстве загружается и отображается изображение полного размера из srcset каждый раз

Таким образом, проблема двоякая:

1. Во-первых, что полное изображение каким-то образом используется, НЕСМОТРЯ на активный выбор большого размера (почему это вообще возможно?)
2. Во-вторых, Chrome все равно не учитывает набор src и загружает изображение полного размера

Это проблематично, потому что я намеренно генерирую множество различных размеров изображений, так как оригинальные изображения для этого блога часто довольно большие, часто пара мегабайт. Так что у меня есть запись с 30 изображениями, каждая с сложным набором srcset, и тем не менее Chrome на Android загружает версию в 1.5Mb для каждой из них (это 45Mb на мобильном, хотя есть размеры изображений и srcset — а также лайтбокс и ленивую загрузку, которые я отключил для тестирования — именно по этой причине).

Изображение ниже является скриншотом из инспектора Chrome с использованием удаленной отладки через USB (так что это на самом деле с телефона, а не симуляция браузера). Вы можете увидеть, что фактический атрибут SRC изображения является правильной, меньшей версией изображения (обратите внимание на ‘-720×480’):

http://media.londolozi.com/wp-content/uploads/2017/08/10130833/DSC_3855-720x480.jpg

Однако, Chrome на Android фактически загрузил и обслуживает полное изображение. Я знаю это потому что:

1. Изображения в сетевой вкладке показывают статус 200 (не из кеша) и являются изображениями полного размера

2. Изображение (и пост) загружается долго (я могу видеть, как изображения загружаются постепенно)
3. Нажатие и удерживание для загрузки изображения на телефоне сохраняет полное изображение
4. Нажатие и открытие изображения в новой вкладке открывает изображение полного размера

Некоторые другие вещи:

• На настольном компьютере (firefox и chrome) загружается только маленькое изображение
• При каждом тесте я полностью очищаю кеш
• Проблема все равно возникает, если LINK TO установлен на NONE (чтобы исключить возможность вмешательства тега a с атрибутом href)
• Ширина устройства составляет 420px
• Вы можете видеть, что размер изображения «large» был выбран в редакторе WordPress посредством класса ‘size-large’ на изображении, поэтому изображение полного размера не должно загружаться вообще
• Я протестировал это на другом сайте WordPress и та же проблема… выбор размера изображения не влияет на Chrome на Android
• Вы можете сами увидеть это в действии здесь: blog.londolozi.com/2017/08/04/the-week-in-pictures-295/

Так что я не знаю, как объяснить это поведение.

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

Есть идеи, почему это происходит?

Я ошибся с моим комментарием и не могу его исправить. Поэтому пишу в виде ответа:

Это, вероятно (99,99%), не проблема WordPress, а проблема Chrome, связанная с его CSS и/или эвристикой изображений. Поэтому:

1. Возможно, вам повезёт больше, если вы будете искать помощь на другом сайте сети Stackexchange
2. Возможно, ваше время загрузки страницы и CSS-правила заставляют алгоритм/эвристику Chrome отдавать предпочтение полному изображению, и вам следует настроить ваш CSS и ускорить процесс
3. Попробуйте использовать изображения уменьшенного размера, небольшого или среднего размера в src, чтобы снизить вероятность использования полных размеров в Chrome на мобильных устройствах/планшетах, потому что по умолчанию будет использоваться маленькое изображение. И увеличивая шансы на использование полных картинок, которые найдутся в srcset, только когда пользователь находится на большом экране.

Дайте мне знать, поможет ли это вам.

браузеры учитывают

коэффициент пикселей

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