Serve scaled images – Optimization

Hey!

First, the reason those thumbnails are that big is because it looks better on high-resolution devices, and also scales up nicely if a person decides to use only 1 sidebar, or none.

Now, to change this to 262×123, first see the Theme Options > Help dropdown documentation, under the section “Child Theme”. Copy over the whole alx_setup function to your child theme as described there, and modify this line:

add_image_size( 'thumb-medium', 520, 245, true );

To what you want.

Then run the regenerate thumbnails plugin once, and bam, you should now have smaller images. Slightly blurry on high-resolution, but faster indeed.

If you don’t want to use a child theme, you will lose the changes when you update the theme – but then you’d just need to go directly to functions.php of the parent theme and edit that line, and then run the plugin.

Thanks very much sir!
Cheers

I’m considering applying this hack to my site but I’m hesitant to lose the high resolution as you point out.

Could it be possible to fine tune the theme in next releases so that it detects which column setting is being used and split image usage into 520 and 262 images depending on setting? I guess that would bring the best of the two worlds.

Yeah, it would be great if something like that were possible. Or even a theme option for high-res/low-res. If high-res is selected, it uses thumb_medium of 520×245, and if low-res reverts back to the resized version.

I’m going with the ‘low-res’ option as currently I’m wasting about 230kb of page size because all the small thumbnails go from 160×160 to 80×80, as well as six or so of the medium ones.

Hey, during these last weeks I came up with some optimizations that might be useful to someone else. First of all, I realized that If I were to use pictures that have a limited number of colors and are not a real photo, it could be useful to save them as 8 bits PNG files.

The key point here is that it needs to be a small palette of colors in order to get a high quality image. Since my images are kind of pre-designed, they fit more or less ok this precondition.

Even like this, I used some caching and CDN with the W3 Total Cache wordpress plugin. These two things improved performance quite a bit when it comes to serve the images ??

I’m not a web developer by any means, but have created our website https://www.bearcountrybees.com.

I’m trying to optimize the images on the homepage, but I have no clue what “……is resized in HTML or CSS from 1500×1000 to 200×150. Serving a scaled image could save….” means.

Can someone explain to a non-programmer what that means and what I can do to fix it? I’ve read the threads, but just can’t understand all the coding lingo.

Thanks

Hi brycemac. This forum is supporting the Hueman theme. Since you’re using an Elegant Themes theme you might have better luck posting there next time. In any case, take a look at this thread for some information regarding your question.