Как реализовать Picturefill адаптивные картинки под ретина в wordpress?

Question

[Сергей]

В данный момент занимаюсь переносом верстки заказчика на wordpress. Столкнулся с проблемой переноса адаптивности изображений под разные экраны, ретина в том числе, реализованной на Picturefill. Конструкция в верстке такая:

<picture>
            <source media="(min-width: 1024px)" srcset="img/[e-mail] 1x, img/[e-mail] 2x">
            <source media="(min-width: 768px)" srcset="img/[e-mail] 1x, img/[e-mail] 2x">
            <img src="img/[e-mail]" srcset="img/[e-mail] 2x" alt="Main_img_Car">
</picture>

Сам wordpress, насколько я знаю, разбивает картинки на несколько разрешений, в итоге получается такая конструкция в коде:

<figure class="about__picture">
<img class="alignnone size-full wp-image-170" src="http://cm09224.tmweb.ru/wp-content/uploads/[e-mail]" alt="" width="1304" height="548" srcset="http://minirent.club/wp-content/uploads/[e-mail] 1304w, http://minirent.club/wp-content/uploads/[e-mail] 300w, http://minirent.club/wp-content/uploads/[e-mail] 768w, http://minirent.club/wp-content/uploads/[e-mail] 1024w" sizes="(max-width: 1304px) 100vw, 1304px" />
<figcaption class="about__features features hide-text">

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

Подскажите пожалуйста, есть ли способ реализовать подобную конструкцию на wordpress, с возможностью загружать фото из админки (на крайний случай, без этого)? А если такой возможности нет, может быть есть другие реализации для адаптивности изображений в этой CMS?

Comments

[ProjectSoft]

Скорее всего придётся делать свой хук на wp_get_attachment_image
У меня "забитый" на всех форумах вопрос - зачем максимальное качество на перевьюхи? Я понимаю, если надо отдать на скачивание или на просмотр оригинала. Но вот в вывод на страницу - это ни кому не нужно. Оптимизируйте изображения перед загрузкой. Например с помощью https://compressor.io/compress (максимальный вес исходного изображения 10мб).

[Сергей]

Я с вами согласен частично, максимальное качество фото не считаю правильным грузить на странице. Но есть заказчик, которому это нужно. У него аренда автомобилей и профессиональные фотографии. Он хочет, чтобы товар был в максимальном качестве. Я находил плагин picturefill на вордпресс и инструкции как его поставить, но это все старая информация и плагин уже не актуален давно. В магазине вордпресс написано, что он устарел после 3 версии вордпресса. В связи со всем этим пытаюсь найти решение!

[Дмитрий]

Сергей, ну так srcset это и делает.
Оно выдает тег img с src="та картинка которую пользователь выбрал вставить из админки" и с scrset="набор разных размеров этой же картинки под разные размеры"

Для браузеров, которые не умеют работать с srcset используется то, что указано в src. Остальные используют то, что больше подходит для текущего размера из srcset.

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

В вашем случае стоит как минимум проверить, почему у вас в src и srcset разные домены у картинок. Затем посмотреть, соответствует ли то, что выводится в sizes="(max-width: 1304px) 100vw, 1304px" лэйауту вашего сайта.

[Сергей]

Дмитрий. Домены разные, потому что сайт делался на одном домене, потом ему добавили второй, а фотки не перезалили. Насчет проверки sizes, как его можно поменять в админке?