Results 1 to 5 of 5

Thread: GTmetix Serve scaled images (resize thumbnails from one img)

  1. #1
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default GTmetix Serve scaled images (resize thumbnails from one img)

    Hi

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

    Click image for larger version. 

Name:	thumbnails.jpg 
Views:	93 
Size:	30.0 KB 
ID:	6207

    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

    Code:
    #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
    Code:
    #thumbs img{float:left;margin-top:15px;margin-right:10px;width:80px;height:53px;}
    to
    Code:
    #thumbs img{float:left;margin-top:15px;margin-right:10px;}
    All the thumbnails are now see as "largeImage"

    Code:
    <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:
    Code:
    <!--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.....
    Last edited by simonf; 10-23-2017 at 10:50 AM.
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2004
    Location
    Little Falls, Roodepoort, South Africa
    Posts
    411
    Thanks
    4
    Thanked 1 Time in 1 Post

    Default

    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:
    Click image for larger version. 

Name:	di big.jpg 
Views:	21 
Size:	27.5 KB 
ID:	6208

    Using this code in my CSS File
    Code:
    .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
    Code:
    #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
    Code:
    .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
    Last edited by jscheuer1; 10-24-2017 at 04:37 PM. Reason: format
    Very Best Rgds, Simonf :cool:
    __________________________________
    My Site | E-Mail Me

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2017
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    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.

Similar Threads

  1. Replies: 5
    Last Post: 03-03-2013, 04:22 PM
  2. 3 minor issues with thumbnails, text wrapping and enlarged images
    By angel1 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-13-2011, 05:11 AM
  3. Create thumbnails for images
    By Sliight in forum Graphics
    Replies: 8
    Last Post: 04-20-2010, 12:11 PM
  4. One content Div should serve multiple tabs !
    By hasankaz in forum Looking for such a script or service
    Replies: 3
    Last Post: 04-24-2008, 08:20 AM
  5. RESOLVED: image always sized/scaled to body
    By brentnicholas in forum CSS
    Replies: 1
    Last Post: 12-21-2007, 06:20 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •