Archived topic
Properly Scaleing Images
11 replies · Started by Howard on December 30, 2020
I have been fighting this error for years. I follow online proposals, yet on either page speed or metrix, either the full size image on the blog == or the smaller images on home page lineup get called RANDOMLY - USUALLY FOR MOBILE, RATHER than desktop---but how to definitively serve BOTH (IF EVEN POSSIBLE?)
If I knew the definitive way to calibrate this properly, at least I could ignore the test speed notifications, in any event.
Any SOLID ideas?
Howard
Hi there,
are you getting this 'warning' on any particular site ? Or where are you seeing the issue on a test site such as Page Speed Insights or GT Metrix?
Indeed, lol- my site — with close to perfect scores on page speed and / or GT metrix.
https://www.thesoundadvocate.com
Howard
Well that is random - different tests report different images, sometimes no images are reported. Have to love Google lol
All of those images are the Latest Post Widget thumbnails. WP thumbnail size is 150px and they're being displayed at 90px.
You could try changing the Settings > Media > Thumbnail size to 90px, then run the Regenerate Thumbnails plugin to update all of your current images ( new images will automatically use the new size ). Just make sure you don't need a 150px size thumbnail anywhere else.
I was not so sure they were all thumbnail warnings; being under the impression (maybe wrongly) that some were generated from the FEATURE IMAGE on the blog post??
If so (?) would that not mean the feature images are not properly sized? (Are not Related posts generated by the “feature images” ??
WordPress automatically creates the various Media attachment sizes for any image you upload.
The related post widget requests the thumbnail size for the posts. That has nothing to do with GP's featured image controls.
I ran a couple of single post tests and no image size warnings came up.
Hi David
Refering back a while to this above post.
From your knowldege using chrome or firefox inspection tools....what in your opinion is the PROPER IMAGE SIZE for my Blog Posts....e.g. Properly size images: I still can not get the proper hold on this problem as it keeps varying with GT metrix mostly, sometimes Google page speed. I realize it will be different for desktop and mobile but is their a happy or CORRECT SIZE THAT might ????? satisfy both??
Here is example for you to inspect:
https://www.thesoundadvocate.com/2021/04/hapa-audio-analog-interconnects-quiescence-s-and-breathe-s/
I am very curious as to what you see and propose as the CORRECTLY SIZED IMAGE OF THE featured image above
Thanks
Howard
Hi there,
Consider registering smaller image sizes so there are other sizes from the image's srcset to choose image size from. You then regenerate your image/s so WordPress generates image for the newly registered image size.
This has a drawback though. More image means more files. More files mean the site's media files will take more space on your server.
Here's a good read about this:
https://novo-media.ch/en/web-optimization/responsive-images-wordpress/
Hi Elvin
The article is informative yet if I disregard your first advice ( getting more image copies) the author states
“Always insert your images with the size (available in your theme) closest to the dimensions of the image on the large screen! “
So on my dektop, my generate press website width is about say 1100 wide.
Would that mean i should pre size a feature image close to that size or less????? —— so it should properly fill my desktop screen to the width of my site paragraph or “LOGO” which is above first paragraph?????
Howard
Looking at your current post example.
The Featured image occupies a maximum width of:
Desktop: 885px. ( currently using the Full size image of 950px ).
Mobile: 300px.
However this is the kicker.... WP's core src-set sizes function relies on the image filling the width of the viewport - if it doesn't fill the viewport then the browser will generally reach for a larger image size.
So my thoughts would be:
1. Customizer > Layout > Blog --> Featured Images > Posts and disable Display padding around images
2. Increase the WP Media > Thumbnail size to 360px.
3. Run the regenerate Thumbnails plugin.
Now in theory the browser should grab the nearest match image size for Desktop and Mobile devices. You won't need to change your full size image as the current 950px would be about right for the no padding option.
This is fine and hopeful advice David.
After I applying this advice, ( and not regenerating past images, I will be finished finagling with scaled images.....
It is what it is !
Thank you, subject closed!
Howard
Glad to be of help!
