[Resolved] Recommended Image Sizes

[miednr]

Hello,

I am using GeneratePress Theme “Marketer” and I try to customize it, but I won’t change the padding and the image sizes. What I found with my page inspector (Firefox, Safari) are the actual sizes in your theme:

The thumbnails are 50×50
The medium size is 321×213
and the medium-large size is 748×496

So my question:

Would it be a good practice to change settings in Settings / Media to EXACTLY these sizes or would you recommend to have bigger (different) sizes for any circumstance in the future?

I would like to have a fast loading site, but I would like to have pictures I could use in a different layout in the future as well.

Thank you for any advice.

[miednr]

Update:

I changed the settings back to

thumbnails 150×150
medium 300×300
medium-large 1024×1024

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

– thumbnails 150×150 are taken and displayed 50×50 as expected. CHECK!
– pictures in the archive should be medium, but the theme takes 798×512 – Why that? Why not 300?
– pictures in posts should be medium-large, but the theme takes 1536×1024 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!

[Tom]

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?

[miednr]

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!

[Tom]

Glad I could point you in the right direction.

Thanks! You too 🙂

[miednr]

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).

768×509 to 358×237. Serving a scaled image could save 35.6KiB (78% reduction).
768×511 to 358×238. Serving a scaled image could save 34.3KiB (78% reduction).
768×512 to 358×239. Serving a scaled image could save 25.4KiB (78% reduction).
1080×720 to 238×159. Serving a scaled image could save 18.9KiB (95% reduction).
768×512 to 358×239. Serving a scaled image could save 17.8KiB (78% reduction).
150×150 to 50×50. Serving a scaled image could save 2.9KiB (88% reduction).
150×150 to 50×50. Serving a scaled image could save 2.0KiB (88% reduction).
150×150 to 50×50. Serving a scaled image could save 1.8KiB (88% reduction).
150×150 to 50×50. Serving a scaled image could save 1.3KiB (88% reduction).
150×150 to 50×50. 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

[David]

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.

[miednr]

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 1536×1024 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.

[David]

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

[miednr]

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.

[David]

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

[miednr]

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 768×0?

[miednr]

Hi,

I got the solution.

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

Thanks again.

[David]

Glad to hear you found the solution – and thx for spotting my code error 🙂

[Author]

Posts