Ajax Thumbnails Rebuild
I’ve been building a few sited on Genesis using some of their Responsive theme designs. One thing I noticed as I ran page speed tests on each of the conversions had to do with the thumbnail images usually displayed on the custom home page. I thought I’d share this insight and dig into how images are handled by various Studiopress themes and what you should do to help your page speed score once you switch.
Genesis Child Themes and Images
There are two places you set image size defaults when using a genesis child theme.
First, there is the Settings > Media where we can all set the default sizes for Thumb, Medium, Large, images. When you upload an image to the media library WP adds the original image and then adds three more copies in the sizes indicated in the media settings.
I like to setup my media settings accordingly. I always load my original size images at 1024px wide. I set the Large width then to either 600px or 550px depending on the size of the theme’s content area. I use large images for posts where I want just an image centered at the top of the post. I set the medium size to 300px these I can use in a post and right or left justify and have enough room for text to flow around the image and not look narrow. The Thumb size 150px which is sometimes handy for use in places when I want a small image as a tickler to a paragraph.
I make sure all images are linked to the media file not as an attachment. This way I can use a lightbox effect to allow all images no matter what size to be viewed larger.
Second, each Genesis child theme adds more sized which are determined in the theme function.php file. Genesis then uses these image sized in their custom widget areas for the homepage or the portfolio page if the theme includes one. You can find these sizes listing in the functions.php file. Ex. I’m currently using the Balance theme. There are two additional sizes added in the theme functions.
/** Add new image sizes */
add_image_size( ‘grid’, 295, 100, TRUE );
add_image_size( ‘portfolio’, 300, 200, TRUE );
As long as I’m using this theme every time I add a new image to the media library these two additional sizes will be added.
What Happens when Displaying Older images without these sizes in the media library?
I”m glad you asked that question. If the theme doesn’t find an image in the size designated it picks one that is larger and re-sizes to fit the needed location on the fly. Not so bad you think, right? Well, it is so bad in this sense, You want to only serve images in the size needed to display because they load faster. Larger images that are re-sized by size or percentage of size slow down your page load time and ding your page speed score.
Next, I can hear the wheels turning, “But it is only for a few days till my homepage posts are replaced with new posts and images that are new and have the right sizes.” Good thought, what about search pages? Archive pages, Category pages, almost all of us display the featured image in those display results using a specified size. (If no featured images is designated it uses the first image in the post/page)
Ajax Thumbnails Rebuild is the answer
Install this plugin and then go to Tools > Rebuild Thumbnails. You don’t have to rebuild all thumbnails but you do want to add those new sizes being used by your child theme. Uncheck the ones you don’t need, or check the ones you do need depending on what you see on screen and rebuild the thumbnails. This will add to the media library the new sizes your theme wants to display and there is no need for it to re-size larger images on the fly.
End result your page load time is not effected by displaying images using your new Genesis Child Theme.