S
S
Sergey2018-07-05 00:59:31
css
Sergey, 2018-07-05 00:59:31

How to implement Picturefill responsive retina images in wordpress?

At the moment I am transferring the customer's layout to wordpress. Faced the problem of transferring the adaptability of images to different screens, including retina, implemented on Picturefill. The structure in layout is as follows:

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

Wordpress itself, as far as I know, splits images into several resolutions, resulting in the following construction in the code:
<figure class="about__picture">
<img class="alignnone size-full wp-image-170" src="http://cm09224.tmweb.ru/wp-content/uploads/[email protected]" alt="" width="1304" height="548" srcset="http://minirent.club/wp-content/uploads/[email protected] 1304w, http://minirent.club/wp-content/uploads/[email protected] 300w, http://minirent.club/wp-content/uploads/[email protected] 768w, http://minirent.club/wp-content/uploads/[email protected] 1024w" sizes="(max-width: 1304px) 100vw, 1304px" />
<figcaption class="about__features features hide-text">

But as a result, the pictures on the site are loaded in the maximum quality and the situation is such that the styles of the provided layout are violated, but this is half the trouble. On mobile phones, due to the very large resolution, scrolling starts to slow down terribly.
Please tell me, is there a way to implement a similar design on wordpress, with the ability to upload photos from the admin panel (in extreme cases, without it)? And if this is not possible, maybe there are other implementations for image adaptability in this CMS?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question