[Resolved] Responsive Images – Load different on each screen size

[Author]

Posts

[tomS-10]

Our server frequently goes down because of loading time because of Toolset plugins combined with featured images. Have been in contact with the server host, and they said we should either disable plugins, or try to do something about the featured images. Since our website is completely run by Toolset, we can`t disable the plugins.

Basically all our featured images on front page are set to 750px wide because they need to fit the screen size on ipad. However, mostly of the featured images does not reach 750px at all. Our articles are build up with displaying 3 items, and are divided up with ads or other parts. Please see attachments and code below:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
		<wpv-loop wrap="3" pad="true">
        [wpv-item index=1]
        <div class="row blacklink"><!-- Open Row -->
            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 item maximg">
				<div class="bordertop"></div>
				<a href="[wpv-post-url]">
					<div class="merkelapp-holder">
						[wpv-post-featured-image size="artikler_thumb"]
					</div>
				</a>
				<div class="littluft">
                  	[wpv-conditional if="( $(wpcf-undertittel) ne '' )"]
                  		<a href="[wpv-post-url]"><h2 class="undertittel-small">[types field="undertittel"][/types]</h2></a>
                  	[/wpv-conditional]
					<a href="[wpv-post-url]"><h1>[wpv-post-title]</h1></a>
				</div>
			</div>
        [wpv-item index=other]
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 item maximg">
				<div class="bordertop"></div>
				<a href="[wpv-post-url]">
					<div class="merkelapp-holder">
						[wpv-post-featured-image size="artikler_thumb"]
					</div>
                </a>
				<div class="littluft">
                  	[wpv-conditional if="( $(wpcf-undertittel) ne '' )"]
                  		<a href="[wpv-post-url]"><h2 class="undertittel-small">[types field="undertittel"][/types]</h2></a>
                  	[/wpv-conditional]
					<a href="[wpv-post-url]"><h1>[wpv-post-title]</h1></a>
				</div>
        </div>
     </wpv-loop>
    </div><!-- Close Row -->
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"][/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

So, as this states, the first article in each view is small on medium and large screen, and bigger on ipad and mobile. Those images are around this size:
Large - 260px
Medium - 215px
Small - 540px
Extra-small - 715px

The last 2 articles in each view are behaving different. This does not vary alot, but 125px goes to waste here aswell:
Large - 260px
Medium - 215px
Small - 250px
Extra-small - 340px

This means alot of image sizes are overkill. Since image are twice as big as they need to be on large screen, we can actually reduce the image size of 50% by making the images responsive according to the screen size.

So my question is, how do we solve this problem? Is there a way we do not resize, but load different images on different screen sizes?

Looking forward to hear from you again

[Shane]

Hi Tom,

Thank you for contacting our support forum.

I understand the concern here but what you can do is to use the WP-Total Cache plugin to ease the load on your server.

Regarding your images now, so the issue is that they dont fit well on mobile or they are not being responsive?

Would you mind sending me a link to the site so that I can have a look ?

Thanks,
Shane

[tomS-10]

The problem is that they are oversized. They are responsive in terms of fitting well on mobile, tablet and desktop, but they are not responsive in terms of the image size since they are twice as big (in kB) as they need to be.

The website is hitra24.no.

[Shane]

Hi Tom,

What you can try optimising the image using the EWWW image optimizer plugin below.
https://wordpress.org/plugins/ewww-image-optimizer/

Please let me know if this helps.
Thanks,
Shane

[tomS-10]

Hello again Shane,

Testet out the plugin and the images are still oversized. But I think I am not explaining it good enough. When looking into the code it looks like thumbnails are being created, but only one show no matter what screen width it is.

Example of big image on desktop. The 750x501 is being loaded here. Please see screenshot.

<img width="750" height="501" src="<em><u>hidden link</u></em>" class="attachment-artikler_thumb size-artikler_thumb wp-post-image" alt="" srcset="<em><u>hidden link</u></em> 750w, <em><u>hidden link</u></em> 350w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 1438w" sizes="(max-width: 750px) 100vw, 750px">

Example of a small image on desktop. The 750x500 image is being loaded here. Please see screenshot.

<img width="750" height="500" src="<em><u>hidden link</u></em>" class="attachment-artikler_thumb size-artikler_thumb wp-post-image" alt="" srcset="<em><u>hidden link</u></em> 750w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 350w, <em><u>hidden link</u></em> 1440w" sizes="(max-width: 750px) 100vw, 750px">

So how do I make sure a smaller thumbnail is being loaded on only the desktop, and on mobile a bigger thumbnail version is being loaded?

[Shane]

Hi Tom,

From this it seems that you are hardcoding the image dimensions . Are you displaying the images using our Types shortcode ?

Would you mind sending me a link to the exact page that has this issue?

Thanks,
Shane

[tomS-10]

I am mainly thinking about the main page, hitra24.no

But it`s the same problem for other pages as well: hidden link

Images are being loaded this way:

[wpv-post-featured-image size="artikler_thumb"]

Thank you,

[Shane]

Hi Tom,

Ok so i'm a little bit confused, so essentially after looking at this you want our shortcode to load a different image size on mobiles correct?

Loading different image sizes won't be possible unless you have some script to check whats the browser screen size. The responsive css reduces the images display size based on the screen size but that doesn't change their loaded dimensions.

Also since you're displaying the image straight from what is stored it should just display the uploaded dimension.

Whats the issue this is causing with your server?

Thanks,
Shane