Featured image filesizes, Index and Carousel

I am having a question about the featured image. I understand the featured image to be of decent quality so it looks clear and crisp on the related post.

Disadvantage is the huge file size. It does not matter so much, when there is a single picture that is 160kb, but when there is 6 posts and 5 on the carousel it would matter a lot to only use cropped versions of the featured image there.

Is there a way to achieve that, or can I suggest this as a feature request?

It somehow does not make sense to make a theme Mobile friendly, responsive and AMP compliant and at the same time deal the largest images you can get.

Thank You in advance,

Michael

Hey,

Thank you for writing in!

You can check this article to learn some tricks: https://wpengine.com/blog/site-speed-make-wordpress-lightning-fast/

I am not sure if it was misunderstood. I wanted to know why X Theme delivers full size images on index pages and on the carousel. Would you please care to tell me which of the 15 tricks mentions a solution?

Hello @Goeller,

Thanks for writing in! Allow me to provide a little more context for why the post carousel on Ethos outputs images in the size that it does. As with most decisions related to resource usage in X, we have to carefully consider the options available to users and how they might set up that feature, along with how any of those number of settings might work responsively across a wide range of devices.

Regarding the post carousel for Ethos, not only do we have the input in the theme options allowing users to specify how many posts in total should appear in the carousel, users also have the option to specify how many posts should display at once for various screen sizes under the Post Carousel – Screen Display section. It is certainly a possibility that a user may wish to only display 2 or 3 posts at a time, even on larger screens, which would necessitate a larger graphic to ensure that it looks okay (especially on devices with a high pixel density display). Furthermore, at 549px, users can specify how many photos they would like to show, which will likely only be 1 at this point. Even at this breakpoint, you would want an image that were at least double the size of this pixel value potentially so that on high pixel density devices the image still appears crisp.

As you can see, there are numerous outcomes to take into account when developing a feature like this, and there is no way to know for certain how a user will set things up, so we opt to ensure that images will more than likely be large enough so that they look great across all devices and screen widths out of the box (as most users will more readily take issue with “poor” quality graphics than filesize). That being said, if you have ended up at a place where you know what your ultimate settings for this feature will be, you can certainly customize any views you wish via a child theme to further improve any output:

You may also want to look into an improved caching setup on your server, utilizing a CDN, et cetera, all of which are outlined to some extent in the article above. Site performance is always a bit of a moving target, and depends on many factors for different users in how they setup their site. Hopefully all of this has provided a bit more context on this situation and gives you a clear direction forward.

Cheers!

1 Like

Thank You for your elaboration. This will help me further. I am using wordpress since 2006 and have CDN, Caching, AMP, used Opcode Caching for quite a few years, have most requested Data on an SSD and minify images as well as possible.

I am also using a child theme… with some adjustments.
I set up wordpress to crop pictures at 400px, medium size at 800px and full size… and I wonder why a featured picture in the index is 400px wide but serves the fullsize 1200px (full width) .jpg and would like to know how and where I can change this… The difference in file size from 1200 to 800 or even 400px is significantly enough for me to try to improve this.

Right now the homepage loads 3,3mb mobile traffic, I think this can and should be improved…

Thank You for reading

Hi There,

To adjust featured image size, please follow the guide suggested by Kory. We can find the original functions on this file: \wp-content\themes\x\framework\functions\global\featured.php. Feel free to copy the functions on your child theme and adjust accordingly.