Preload Largest Contentful Paint Image

Hi @erskine4730

So my question is, what is the correct image size that I should use for this setting in the Preload Featured Images plugin for the TwentyFifteen theme? Are you aware of any reasons to NOT use this plugin?

The recommended size for featured images on the Twenty Fifteen theme is 954 × 1300?pixels this information can be found in Appearance > Customiser > Header Image.

I don’t know enough about the plugin or how it works to provide more information, I would suggest checking the plugin’s documentation and reviews.

This brings up a more general question on the best image size to be uploaded to the media library for use with the TwentyFifteen theme. Images are currently being automatically scaled to 2560 x 1920 pixels, but is this larger than needed for TwentyFifteen, or the best setting to use?

This depends on where you want to add the images, if you are adding images to your page it depends on the display. You can keep the image size small if you are adding the image to a small area and large when it’s a large area. However, it’s the weight of the images that actually affect the speed of your site. This isn’t done automatically by the theme, you can use image editing software to reduce the weight of images before adding them to your site.

What is the ideal image size that I ought to specify in a plugin like?Short Pixel Image Optimizer?or?Smush?

These plugins are usually used to reduce the weight of images so that your site loads faster. The weight of the image you want to use depends on your preferences for image quality.

Thank you for the response, thelmachido!

I’ve got a couple more questions related to images on the TwentyFifteen theme.

First of all, I know it sounds crazy, but I only recently acquired my first smartphone. Until very recently I’d never before seen my site, adventuresoflupe.com on a small screen. Didn’t even realize, or long ago forgot, that the “header image” moves from the side bar on large screens to the header on small screens.

Now that I’ve seen the header image on a small screen, I realize that it’s been cropped terribly wrong all these years! Take a look at it on a smartphone, and you’ll see what I mean. Without affecting the image’s appearance on the side bar, which is already exactly how I want it, is there a way that I can adjust where the image gets cropped when it appears on a small screen? If not, what can you suggest? How do I fix this?

My second question is what is the minimum image size width that will completely fill the standard TwentyFifteen main column width? I am still using the Classic Editor plugin, so there are no blocks, just a single column width that all images used in the body of each post need to fill. Seems to me that this would be the maximum width that I ought to be resizing images to as long as I’m using the TwentyFifteen theme, isn’t it?

Hi @erskine4730 –

Without affecting the image’s appearance on the side bar, which is already exactly how I want it, is there a way that I can adjust where the image gets cropped when it appears on a small screen?

You could add some custom CSS to target small screens, at Appearance > Customize > Additional CSS. By adjusting the background-position of the header, you can shift it up or down.

/* Header - smaller screens */
@media screen and ( max-width: 46.24em ) {
  .site-header {
    background-position: 50% 25%;
  }
}

Alternatively, you might want to choose a new header image that is more flexible on a variety of screen sizes, such as a pattern, abstract, or other decorative-type image.

My second question is what is the minimum image size width that will completely fill the standard TwentyFifteen main column width?

1. The main content width is 660px
2. Featured Images are 825px wide by 510px high

For images to look sharp on high density screens (such as retina) I’d suggest you double the image width, so upload content images for the main column at 1320px minimum, and featured images at 1650px minimum.

Let me know if this answers all your questions!

Thank you for the response, Kathryn P!

Unfortunately, I don’t know anything at all about CSS or html, so I don’t dare attempt making the needed modification you’ve provided to adjust the position or cropping of the header image in order to correct its appearance on small screens. Too afraid I’d just break something serious in the process. However, hopefully the information you provided will help someone else with more skills and a similar problem with their header image. Guess my site’s header image has been terrible on small screens for nearly 8 years now, so although I would have liked to have fixed this issue, it’s probably not the end of the world to leave it as is. Not going to change images at this point. It’s perfect, and just what I want on large screens.

The other data you provided on main content column width and featured image size along with the recommendation to double these image widths on upload is fantastic information! Exactly what I was looking for! I’ve always wondered how I was supposed to know what size all my large images should ideally be re-sized to in order to minimize excessive memory use while still maintaining acceptable image quality. Can’t believe I finally have the answer after all these years!

Wish I’d realized the significance of these issues and found the answers way back when I started this blog. Would have saved a ton of server space and my site would be working much better than it is now. At last check, I have over 24,000 original images (not including thumbnails) using 185 GB of my host’s server space, significantly slowing down site speed. Could have been using a fraction of that much memory all this time. Thank you so much, Kathryn! Nice to know a genius!

Thank you for the response, Kathryn P!

You’re very welcome!

Unfortunately, I don’t know anything at all about CSS or html, so I don’t dare attempt making the needed modification you’ve provided to adjust the position or cropping of the header image in order to correct its appearance on small screens. Too afraid I’d just break something serious in the process.

No worries! For what it’s worth, you won’t break anything. ?? Even if things didn’t look right after adding the code in the editor, you can just remove it. But I understand if you’re hesitant!

You might like to look at my second suggestion instead, which is to choose a different image that works better when cropped at different screen sizes.

The other data you provided on main content column width and featured image size along with the recommendation to double these image widths on upload is fantastic information! Exactly what I was looking for!

Awesome, I’m so glad!

Thank you so much, Kathryn! Nice to know a genius!

Aw, you’re most welcome. And definitely not a genius, I’ve just been helping people with WordPress for a long, long, time. ??

I’ll mark this thread as resolved but feel free to start a new one if you have other questions!