-
Posts
-
Hello there,
I’m wondering if you can help me, I’m currently finishing up a website and I’m running it through GTmetrix to work on its performance and I noticed that the images for the recent posts shortcode that I’m using are all being served at original size then being resized using CSS, sometimes by up to 90-95%! This is really bad for page loading speed and I’m wondering if there is a way around it?
I imagine that it’d be theoretically possible by using more than one field to set the image, so that there’s an original size image for the single post and a thumbnail for the shortcodes/etc. Or maybe even just creating an appropriately sized image whenever a post is created/modified.
Thank you 🙂
JackHey Jack,
You must upload an image that is already optimized or run WP Smush.it on your site. The reason why we’re using original size images is for quality display in retina devices.
Thanks.
Hello,
I already have all of my images optimised and in various sizes, the issue I’m having is that I can’t specify a thumbnail image to use, so it’s using the full size image. I mean I could have an image that’s 900px across being resized by the browser using CSS to fit into a 150px box – this is incredibly inefficient, no? There has to be a reasonable way to specify a different image to use for thumbnails or for the theme to serve a different image automatically…?
Thanks,
JackThis reply has been marked as private.Hi Jack,
The problem with the GTMetrix report is that it doesn’t test multiple screen sizes, or retina devices. It’s not the best test for responsive websites.
Have you tried viewing that image on mobile? Especially tablet sizes, and high density (retina) screens. Those images will actually need more resolution. It might be 168×95 on desktop, but when reduced down to one column, it could need somewhere in the range of 450×250 on a mobile device. If that device is retina, then we can say 900×500
Responsive design requires serving larger images, because you don’t know who is viewing your site.
This is one of the biggest challenges in responsive design today. The problem at large hasn’t been solved in an efficient manner yet. Browsers don’t have a way to load a different image depending on their screen size. “Source Sets” (http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/) are a work in progress for the HTML spec, but it will probably be a few years before it’s consistent.
For now we’ll just have to deal with oversized images if we want websites to be responsive.
Ah okay, I understand. Thanks for your help 🙂
You’re welcome Jack.
