Recommended Image Sizes

Update:

I changed the settings back to

thumbnails 150x150
medium 300x300
medium-large 1024x1024

But I get the following results with GeneratePress Marketer (with Plugin Latest Posts):

- thumbnails 150x150 are taken and displayed 50x50 as expected. CHECK!
- pictures in the archive should be medium, but the theme takes 798x512 - Why that? Why not 300?
- pictures in posts should be medium-large, but the theme takes 1536x1024 CHECK!

I am still quite new to Wordpress and do not understand why Wordpress produces so many different sizes, when they are actually not all in use. And how to optimize image sizes for GeneratePress Marketer. Would really appreciate advice on which sizes I should use.

Thanks a lot!

Hi there,

You can change the image sizes as much as you want, you just need to regenerate your thumbnails after: https://wordpress.org/plugins/regenerate-thumbnails/

WordPress creates so many image sizes so your images can take advantage of srcset: https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

In your Customize > Layout > Blog settings, what do you have set for the featured images? Are you using the width and height fields, or are you only changing the attachment size value?

Any chance you can link us to your site?

Hi Tom,

thank you for your message.

I used the plugin for regeration of thumbnails, you recommended. I start to understand, that image sizes in wordpress have not to be in perfect size for the theme at all, because image resizing is quite normal. I did have the approach to make the sizes exactly fit in the GeneratePress-Theme, but now I know, that is not necessary and usual to let the browser resize it to the optimum.

I used medium_large for the featured images and did the "tuning" in Settings / Media not in Customize / Layout / Blog.

I could give you the URL of my site, because it's no secret... ;-) But sorry, it's still under construction and closed for public access.

But you helped me a lot to understand the use of "image sizes" in Wordpress. I additionally bought a book to get more information about this topic. We could say, the topic ist resolved.

Wish you a nice day!

Glad I could point you in the right direction.

Thanks! You too :)

Hello Tom,

sorry, but I'm still confused. I work a lot with pagespeedtests the last days. And I still get the Message: The following images are resized in HTML or CSS. Serving scaled images could save 140.8KiB (80% reduction).

768x509 to 358x237. Serving a scaled image could save 35.6KiB (78% reduction).
768x511 to 358x238. Serving a scaled image could save 34.3KiB (78% reduction).
768x512 to 358x239. Serving a scaled image could save 25.4KiB (78% reduction).
1080x720 to 238x159. Serving a scaled image could save 18.9KiB (95% reduction).
768x512 to 358x239. Serving a scaled image could save 17.8KiB (78% reduction).
150x150 to 50x50. Serving a scaled image could save 2.9KiB (88% reduction).
150x150 to 50x50. Serving a scaled image could save 2.0KiB (88% reduction).
150x150 to 50x50. Serving a scaled image could save 1.8KiB (88% reduction).
150x150 to 50x50. Serving a scaled image could save 1.3KiB (88% reduction).
150x150 to 50x50. Serving a scaled image could save 767B (88% reduction).

Please let me know the recommended image sizes for generate press / marketer. What are using. It's not visible for me in the demo.

Are you working with the default sizes, as I do again? Or do you have chosen a smaller size?

Kind regards,
Maik

Hi there,

the 150x150 to 50x50 scaled images are being added by the Recent Posts with Thumbnails Widget.
Not much that can be changed there. Without adding a Smaller Thumbnail size to WP media attachments.

For the featured images.

Largest size to cover single post: 700px.

Then i would edit the Customizer > Layout > Blog --> Featured Imagdes >> Archives, remove the width value from the field, and select the Medium Attachment size.

Hi David,

thank you for your friendly reply. I guess, I found a bug in GeneratePress.

I am using the extension "Blog" with a column view and the first entry highlighted, the theme uses a big image for the highlighted post. I like what I see, but you should implement, that users can resize the medium and the medium_large as well. I hope, that you can understand me.

The point is, that If I enter a width to the field, it touches the both sizes (medium and medium_large) and it loads a picture in both cases, that is 1536x1024 in size.

David, this image size issue is a real important topic to me. Would be great, if you could find a solution. I guess, it needs some tests on your side, debugging and an update in one of the next versions.

If you're using the featured column then Tom provides a solution to its image size here:

https://generatepress.com/forums/topic/image-size-of-pinned-post-on-blog/#post-1267748

Hey David,

I did everything recommended. Changed functions.php of my child theme. Yes, now I have an option for "my-archive-featured-image" in the customizer. Great, but, if I change the width it also changes the width for all the other images as well.

For now the only function you need to add is this:

add_filter( 'generate_page_header_default_size', function( $size ) {
    $classes = get_post_class();

    if ( in_array( 'featured-column', $classes ) ) {
        return 'large';
    }

    return $size;
}, 20 );

This will see the Large attachment size for the Featured Column.

In Customizer you would just set the Attachment size you want for ALL other posts eg. medium

Wow David, great progress. The medium sizes images are now served correctly and also the featured image is served as medium_large.

I found a small bug in your code. It's a "'" missing behind "large", but I changed it to "medium_large". It's fine for me.

But last question. How to resize the featured image? I can't enter the width in the customizer. Could you please provide a code for resizing to 768x0?

Hi,

I got the solution.

.resize-featured-image .post-image img {
   width: 768px;
}

Thanks again.

Glad to hear you found the solution - and thx for spotting my code error :)