Fast loading time in desktop version but slow in mobile version due to image resolution. What’s the best way to add adaptative images on WordPress?

[ad_1]

The default way WordPress deals with adaptative images is garbage. I have this issue where the loading speed in the desktop version of WordPress has a score of 95, but the mobile version has a score of 60. I have turned every image into a .webp format, but now my issue is that the images are too big in mobile version according to PageSpeed Insights.

What I’m trying to do is creating responsive img elements. This could be done by using the attribute srcset, but I’m using gutenberg blocks instead of HTML, and the default image block doesn’t have that option. Also, since my boss wants a wordpress website that could be easily edited by anyone in any moment, I was told to use the least ammount of custom code possible, so I avoid using the HTML block if I can.

This problem is driving me crazy by the fact that this should be like the biggest issue most web developers should face if they want to make a fast, responsive website, but for some reason, there’s absolute zero plugins that solves this issue. I’ve been looking for a CDN or a gutenberg block plugin that deals with this issue, and I didn’t find anything. All the CDNs I’ve tried improves somewhat my page, but they don’t resize my images.

At this point I could make my own plugin, but I find hard to believe nobody figured out an easy way to fix this issue. Any suggestions? (Sorry for my english)

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer