Serve Scaled Images

I recently have been doing work on several of my sites and one thing that I am doing to help SEO is work on load times. Aside from the bloated CSS and Java in X theme that slows my site down...one thing that continues to be a problem across all of my X sites is serving scaled images.

There appears to be no support for it nor support to chose a size on my own aside from going to the FTP of my site and viewing and selecting my own custom size to enter via the web address of the media for insertion.

In particular but not limited to this site...


And also on...

Hello @rglohre,

Thanks for asking. :slight_smile:

You can take a look at following plugin:

I also suggest you to take a look at following resources and let us know how it goes.

Please note that the plugins I have shared is not a official Themeco advice. It's just a personal input that I have shared with you to help you get started. 3rd party plugins may cause some issues and we won't be able to provide support in that scenario.

Thanks.

When exporting in Photoshop Lightroom, I applied web sizing to optimize image size.
Add to that, I am already using the plugin ShortPixel Image Optimizer which has downsized my media library and images with +70% compression.

Hi There,

We also do have a Performance guide, please take a look:

Regards!

So basically... "Sorry...not sorry...but we can't really help you with using a feature native to Wordpress (scaled images)."

But the problem is with the theme itself not offering the option of the sized image in the "Image" element as I have already optimized the images. Your second suggestion is nice if you only use an image once on the site in one size, but if we're using images in multiple pages in multiple ways, different sizes are needed for each so why not just use the "scaled" image generated by Wordpress itself. This seems a HUGE miss by X to not include compatibility with a common Wordpress functionality,

Hi @rglohre,

Unfortunately, that's how responsive design works, the scaling. And it's Wordpress image generation that resizes them all (still not related to layout scaling).

And GTMetrix only analyzes it based on its views, example, your image is 300px but it appears to be 150px on its view, then it suggests you that you resized your image to 150px instead of scaling it, matching the 150px from its view.

BUT with responsive design, it responds and that means the width changes based on the device view. On device one, it could be 200px, and on second device it could be 250px. Let's say you really optimized it for GTMetrix which also doesn't mean it's optimized for other devices, what if the 150px is displayed on a 767px view? It will be stretched and become blurry, now, imagine on retina devices where the required size should be doubled. But if you insist, the only workaround for that is uploading the image with its actual size like 150px.

As for the theme image size option, it's automatic based on the layout width so it could work across devices, example, the safe size is 960px since it's not that big from 767px mobile and 1024px tablet and laptop. And the calculation is from the biggest width (full-width) since scaling down a bigger image is still okay than scaling up a small image which will become blurry.

And there is no scaled image generated Wordpress, it has no capability to scale image based on the device being viewed. Maybe there is a confusion between Wordpress resizing/cropping and layout (browser or device view) image scaling.

The scaling mentioned from GTMetrix is a comparison from image actual size and image rendering size (layout size, or CSS based). So fitting the actual image size to the layout width isn't related to Wordpress image processing.

A good example of GTMetrix want you to do is m.facebook.com, a separate and mobile version of Facebook where images don't scale. It doesn't change size even the layout.

Still, it's not limiting you of which image you can upload, you can upload the exact image with the size of your choice (Wordpress image processing will only occur for big images). But remember, you're only optimizing it based on that single view.

Thanks!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.