GTmetix Serve scaled images (resize thumbnails from one img)

[simonf]

Hi

On my website I need to show more that one img of a home, so what I wanted to do was the following:



So I found some code and thought that's perfect, Yeah I thought.... but when I then run my page on GTmetix is gives me

Serve scaled images

for all those imgs, I have only loaded one property so far, but thought I need to resolve this prior to doing all listings. http://www.silvertreeestates.co.za/#P105691903

I also thought, well this should be easy, I would just define the thumbnail size in css right... well that sucked

#thumbs{padding-top:1px;padding-left:1px;overflow:hidden;}
#thumbs img, #largeImage{cursor:pointer;height:249px;width:446px;}
#thumbs img{float:left;margin-top:15px;margin-right:10px;width:80px;height:53px;}
.tpic{border-radius:10px;border:2px solid #748178;float:left;height:80px;width:53px;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}
.tpic:hover{border-radius:10px;border:2px solid #FF0000;float:left;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}

as when I change this line from

#thumbs img{float:left;margin-top:15px;margin-right:10px;width:80px;height:53px;}

to

#thumbs img{float:left;margin-top:15px;margin-right:10px;}

All the thumbnails are now see as "largeImage"

<script>$('#thumbs').delegate('img','click', function(){$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));$('#description').html($(this).attr('alt'));});</script>

html code for the section:

<!--Property Listing Start-->
<div class="divborder col-md-1" id="P105691903"><div class="divTable"><div class="divTableBody"><div class="divTableRow">
<div class="divTableCell"><div class="divTableCell"><a href="https://www.property24.com/for-sale/honeydew-ridge/roodepoort/gauteng/819/105691903" target="_blank">&nbsp;<img class="tpic" id="largeImage" src="img/listing/105691903.jpg" alt=""></a></div><div></div>
<div class="divTableRow" id="thumbs"><img class="tpic clearleft" src="img/listing/105691903.jpg" alt=""/><img class="tpic" src="img/listing/105691903a.jpg" alt=""/><img class="tpic" src="img/listing/105691903b.jpg" alt=""/><img class="tpic" src="img/listing/105691903c.jpg" alt=""/><img class="tpic" src="img/listing/105691903d.jpg" alt=""/></div></div></div>
<div class="divTableRow"><div class="divTableCell"><p class="htext">Stunning newly renovated unit with quality finishes throughout</p><h1>Honeydew Ridge</h1><h3><span class="zar zarsprite currtextsprite">R 1,150,000</span></h3>
<div class="divTableCell receptionsprite imgsprite"><div class="textsprite">2</div></div><div class="divTableCell bedsprite imgsprite"><div class="textsprite">3</div></div><div class="divTableCell bathsprite imgsprite"><div class="textsprite">2</div></div>
<br><div class="divTableCell sizesprite imgsprite"><div class="bigtextsprite">116m²</div></div><div class="divTableCell ratesprite imgsprite"><div class="bigtextsprite">R 385</div></div><div class="divTableCell levysprite imgsprite"><div class="bigtextsprite">R 1,423</div></div><p class="hbond">Can you afford this mortgage (based on 20 Years @ Prime) per month - R 11,289</p>
<br><div class="divTableCell dianesprite imgsprite"></div></div></div><div class="divTableRow"><div class="divTableCell"><div class="social"><h4>&nbsp;</h4></div></div></div></div></div></div>
<!--Property Listing End-->

I hope I have explained myself clearly and someone can offer a fix, or alternative (John / Beverley) rgds, and thanks as always in advance.....

[jscheuer1]

What's GTmetix? I see a GTmetrix, is that what you mean? In any case, what I think you are talking about is that, yes - it's more efficient for the site to serve images that have been resized by image software than to have the css or attributes resize them using the browser. That is unless you will always be showing the full sized image as well. Then it doesn't really matter. But no analytic program I know about will recognize that situation. Usually though these are thumbnails and you will only see the larger image if the thumbnail is clicked. At that point it's a toss up as to which is more efficient. It really depends upon how many thumbnails are clicked on. Clearly, if they all all, then it would have been more efficient to have the browser resize them, saving on loading two versions of the same image. At what point does it become less efficient to use the full size images as the thumbnails? I don't know. If you could guess which are most likely to be clicked on and use only the full size image there and guess those least likely to be viewed and use two images for those, with only the smaller one being seen if not selected, that would be best. Analytics of your website traffic and click patterns could tell you that.

One other consideration, the page will always load faster initially if it uses true thumbnails that have been resized and optimized using image software.

[simonf]

HI John

Yes I meant https://gtmetrix.com/ as this is my main test tool

It is just strange that with other images it does not show an error example:


Using this code in my CSS File

.featurepic{border-radius:15px;border:2px solid #748178;margin:auto;height:150px;width:230px;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}
.featurepic:hover{border-radius:15px;border:2px solid #FF0000;margin:auto;height:150px;width:230px;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}

And with the thumbs I dont get the error is I remove the size from line line

#thumbs img{float:left;margin-top:15px;margin-right:10px;}

but then my thumbs are normal size and not scaled down. as they should be when using

.tpic{border-radius:10px;border:2px solid #748178;float:left;height:80px;width:53px;padding:1px;box-shadow:0px 40px 15px -25px rgba(0, 0, 0,.25)}

as I stated in original post.

So I will admit, I understand what your saying but at the same time, don't fully understand why one works but other doesn't. Every img I serve to the page is sized for the max it will ever be viewed (@100% zoom) and Responsive.

So if you can offer some advise, as I do not want to create 220+ thumbs to resolve this LOL, and also serve double the volume of images.... but I'm open to another solution if someone has a concept I could use....

Best rgds, Simon

[jscheuer1]

Well that's pretty much what you would have to do*. You could try making your thumbnails div's and give them background images, using css 3 they could resize themselves to the divs. That might get around this warning (but won't fix any potential issues related to it), that's all it should be considered as, a warning. It's not really an error, not in the same way that - say, not closing a div tag is an error. To a degree it depends upon whether or not you're willing to let it slide. It's not like your users are likely to notice anything other than slower page loads, and with today's higher internet speeds, generally that shouldn't be a problem. How many of these do you load at a time? That's the real issue. If you're loading all 220+ at once on one page, that's not such a great idea. At the very least, if you are doing that, you should make sure each image is optimized for minimum byte size.

*And it's really not a bad idea. But unless you have a program that can bulk resize your images (think there are some cheap and some free programs like this still around), it's probably a lot of work. With a program that will do that, you just make a bunch of thumbs, set it to add something like tmb to the filename, and then use a global search and replace to update the HTML code. It will double the number of images, but not the number of bytes devoted to them, and, unless you're certain most visitors will look at all of the full size images, it really saves on server load. Even if they all do view all images, it still speeds page load unless all thumbs and all larger images are loaded as the page loads.

[jymony]

The theme uses default image size in order to make sure that the image fits well in the container.
If resized, the image can either look squished or stretched so to avoid such issues we use add_image_size.
Please contact our WPmatic service in case that you need specialized help with the site optimization.