[Resolved] Recommended Image Sizes

Home Forums Support Recommended Image Sizes

  • This topic has 13 replies, 3 voices, and was last updated 1 month ago by David.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1411396
    Maik

    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.

    #1411642
    Maik

    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!

    #1411818
    Tom
    Lead Developer
    Lead Developer

    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?

    #1416354
    Maik

    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!

    #1416751
    Tom
    Lead Developer
    Lead Developer

    Glad I could point you in the right direction.

    Thanks! You too 🙂

    #1416886
    Maik

    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

    #1417230
    David
    Staff
    Customer Support

    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.

    #1417349
    Maik

    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.

    #1417374
    David
    Staff
    Customer Support

    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

    #1417417
    Maik

    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.

    #1417423
    David
    Staff
    Customer Support

    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

    #1417437
    Maik

    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?

    #1417759
    Maik

    Hi,

    I got the solution.

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

    Thanks again.

    #1418118
    David
    Staff
    Customer Support

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

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.