Selecting Image Size

Forgot to add link to page:

http://www.celebrityhealthcritic.com/

Hi Stefan. Yeah, I noticed under the mobile section of pagespeed it says that the images are optimized, but it says that they are not optimized for the desktop. Very strange that Google should report it this way. Do you know why this happens with pagespeed? Does it not recognize srcset properly? The obvious question here is if google thinks the images are not optimized for desktop and returns a low pagespeed score, will this not then have a negative effect on rankings?

I do use Wp Smush already, but disabled all my plugins just so i can focus on this issue to make sure nothing was causing a conflict with Responsify WP.

Looking at the debug info i’m not sure if retina is being outputted as i don’t see any @2x in the image sizes. Is this something i would only see using a retina screen? My screen is 1080p so i don’t have a retina display currently. Here are my outputted image sizes for the homepage:

<img srcset="http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-273x184.jpg 273w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-285x192.jpg 285w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-322x217.jpg 322w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-496x334.jpg 496w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-546x368.jpg 546w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-570x384.jpg 570w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-585x394.jpg 585w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-644x434.jpg 644w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-676x455.jpg 676w, http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-800x539.jpg 800w" sizes="(min-width: 676px) 800px, (min-width: 644px) 676px, (min-width: 585px) 644px, (min-width: 570px) 585px, (min-width: 546px) 570px, (min-width: 496px) 546px, (min-width: 322px) 496px, (min-width: 285px) 322px, (min-width: 273px) 285px, 273px">

and my debug:

### RWP Debug ###
Attachment ID: 135
Image sizes: thumbnail, medium, medium_large, large, et-builder-portfolio-image@2x, Homepage-iPad-Portrait, Homepage-iPad-Portrait@2x, Homepage-iPad-Landscape, Homepage-iPad-Landscape@2x, Homepage-iPhone6-Portrait, Homepage-iPhone6-Portrait@2x, Homepage-iPhone6-Landscape, Homepage-iPhone6-Landscape@2x, Homepage-iPhone5-Portrait, Homepage-iPhone5-Portrait@2x, Homepage-iPhone5-Landscape, Homepage-iPhone5-Landscape@2x, logo-small, logo-small@2x, logo-large, logo-large@2x, related-posts, smallest, small, medium-large-1200, largest, et-builder-post-main-image, et-builder-post-main-image-fullwidth, et-builder-portfolio-image, et-builder-portfolio-image-single, extra-image-huge, extra-image-single-post, extra-image-medium, extra-image-small, extra-image-square-medium, extra-image-square-small, full
Image width: 950
Image height: 640
Image sizes found: thumbnail, medium_large, et-builder-portfolio-image@2x, Homepage-iPad-Portrait, Homepage-iPad-Landscape, Homepage-iPad-Landscape@2x, Homepage-iPhone6-Portrait, Homepage-iPhone6-Portrait@2x, Homepage-iPhone6-Landscape, Homepage-iPhone5-Portrait, Homepage-iPhone5-Portrait@2x, Homepage-iPhone5-Landscape, logo-small, logo-small@2x, logo-large, logo-large@2x, related-posts, smallest, small, et-builder-post-main-image, et-builder-portfolio-image, extra-image-single-post, extra-image-medium, extra-image-small, extra-image-square-medium, extra-image-square-small, full
Images found:
- thumbnail: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-150x101.jpg,
- medium_large: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-768x517.jpg,
- et-builder-portfolio-image@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-800x539.jpg,
- Homepage-iPad-Portrait: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-676x455.jpg,
- Homepage-iPad-Landscape: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-285x192.jpg,
- Homepage-iPad-Landscape@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-570x384.jpg,
- Homepage-iPhone6-Portrait: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-322x217.jpg,
- Homepage-iPhone6-Portrait@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-644x434.jpg,
- Homepage-iPhone6-Landscape: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-585x394.jpg,
- Homepage-iPhone5-Portrait: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-273x184.jpg,
- Homepage-iPhone5-Portrait@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-546x368.jpg,
- Homepage-iPhone5-Landscape: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-496x334.jpg,
- logo-small: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-104x70.jpg,
- logo-small@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-208x140.jpg,
- logo-large: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-184x124.jpg,
- logo-large@2x: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-368x248.jpg,
- related-posts: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-212x143.jpg,
- smallest: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-479x323.jpg,
- small: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-768x517.jpg,
- et-builder-post-main-image: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-400x250.jpg,
- et-builder-portfolio-image: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-400x284.jpg,
- extra-image-single-post: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-950x640.jpg,
- extra-image-medium: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-627x376.jpg,
- extra-image-small: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-440x264.jpg,
- extra-image-square-medium: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-440x440.jpg,
- extra-image-square-small: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6-150x150.jpg,
- full: http://www.celebrityhealthcritic.com/wp-content/uploads/2016/07/6.jpg

At the end of the debug i noticed the following media queries. Could you tell me if these are set by Responsify WP automatically or is this due to my theme css?

Media queries:
- Use Homepage-iPad-Landscape when min-width: 273px,
- Use Homepage-iPhone6-Portrait when min-width: 285px,
- Use Homepage-iPhone5-Landscape when min-width: 322px,
- Use Homepage-iPhone5-Portrait@2x when min-width: 496px,
- Use Homepage-iPad-Landscape@2x when min-width: 546px,
- Use Homepage-iPhone6-Landscape when min-width: 570px,
- Use Homepage-iPhone6-Portrait@2x when min-width: 585px,
- Use Homepage-iPad-Portrait when min-width: 644px,
- Use et-builder-portfolio-image@2x when min-width: 676px

I was also trying to do something similiar with my logo by adding custom sizes to the code you gave me but was having trouble getting those sizes to appear as i do for the homepage images. Could you tell me how to correctly add sizes to my code please? The code i tried was:

<a class="logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" data-fixed-height="<?php echo esc_attr( et_get_option( 'fixed_nav_logo_height', '51' ) ); ?>">
                <?php
                    echo rwp_img( 153, array(
                    'attributes' => array(
			'sizes' => 'imagesize1', 'imagesize2', 'imagesize3' ,
                    'id' => 'logo',
                    'alt' => esc_attr( get_bloginfo( 'name' ) )
                    )
                    ) );
                ?>
        </a>

Thanks, will try this tomorrow. Head hurts from trying to figure out all this stuff today!

Just realized though that i totally overlooked the custom media queries section in the plugin. I saw this before but didn’t really understand it’s use until now when trying to figure out why certain image sizes weren’t showing as expected. Looks like a very useful feature!

Could you tell me if Responsify WP has some sort of caching enabled in it? I was changing image sizes in my template code and this wasn’t being reflected immediately when the page was displayed, even after refreshing the page.

I’m working with a local test site and was clearing browser cache after making the changes, but it was like the old code was still being displayed for some reason?

I think the problem i’m having is due to not setting the media queries properly.

What i’m trying to do is display a certain image size only for a certain viewpoint using the following code:

<a href="<?php echo get_permalink( $post->ID );?>">
            <?php
            $thumbnail_id = get_post_thumbnail_id( $post->ID );
            echo rwp_img( $thumbnail_id, array (
                'sizes' => array( 'et-builder-portfolio-image', 'Homepage-iPad-Portrait', 'Homepage-iPad-Landscape' ),

'media_queries' => array(
            'et-builder-portfolio-image' => 'min-width: 1405px',
            'Homepage-iPad-Portrait' => 'min-width: 768px', 'max-width: 980px',
            'Homepage-iPad-Landscape' => 'min-width: 981px', 'max-width: 1100px'
        ))

);
            ?>
            </a>

For example, I would like to display et-builder-portfolio-image for desktops only starting with min-width: 1405px for the viewport size, and display Homepage-iPad-Portrait only for viewport sizes min-width: 768px-max-width: 980px, and Homepage-iPad-Landscape only for viewport sizes min-width: 981px-max-width: 1100px.

But when i look at the debug it shows the following media queries:

Media queries:
– Use et-builder-portfolio-image when max-width: 980px,
– Use Homepage-iPad-Portrait when max-width: 980px

For some reason in the debug the media query for et-builder-portfolio-image is being outputted as max-width: 980px when i specified min-width: 1405px. Homepage-iPad-Portrait seems to be outputting correctly at max-width: 980px, but Homepage-iPad-Landscape is absent from the media query debug info entirely.

I’m not sure what i’m doing wrong here? How i can specify a certain image size to only be shown at a specified viewport size?

Homepage-iPad-Portrait would be used on screens smaller than 768px. Homepage-iPad-Landscape will be selected when the screen is larger than 981 (but smaller than 1405 of course). et-builder-portfolio-image will be used when the screen is larger than 1405px.

Should the code include Homepage-iPad-Portrait also as it’s missing from the code you wrote:

echo rwp_img( $thumbnail_id, array (
    'sizes' => array( 'et-builder-portfolio-image', 'Homepage-iPad-Portrait', 'Homepage-iPad-Landscape' ),
    'media_queries' => array(
        'et-builder-portfolio-image' => 'min-width: 1405px',
        'Homepage-iPad-Landscape' => 'min-width: 981px'
    )
) );

Would i include it like this?

echo rwp_img( $thumbnail_id, array (
    'sizes' => array( 'et-builder-portfolio-image', 'Homepage-iPad-Portrait', 'Homepage-iPad-Landscape' ),
    'media_queries' => array(
        'et-builder-portfolio-image' => 'min-width: 1405px',
        'Homepage-iPad-Landscape' => 'min-width: 981px',
'Homepage-iPad-Portrait' => 'min-width: 768px'
    )
) );

Example.

Using the code i pasted previously but taking out the other image sizes (leaving everything else in place just for this example) produces images that are all the same height.

<a href="<?php echo get_permalink( $post->ID );?>">
            <?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array( 'et-builder-portfolio-image' ),
    'media_queries' => array(
        'et-builder-portfolio-image' => 'min-width: 1405px'
    )
));
?>
            </a>

ok, this appears to be working! Code you please check my code to make sure all is in order:

<a href="<?php echo get_permalink( $post->ID );?>"
<?php
$thumbnail_id = get_post_thumbnail_id( $post->ID );
echo rwp_img( $thumbnail_id, array(
    'sizes' => array('et-builder-portfolio-image', 'Homepage-Laptop', 'Homepage-Tablet-Portrait', 'Homepage-Tablet-Landscape', 'Homepage-Smartphone-Large-Portrait', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Landscape' ),
    'attributes' => array(
        'sizes' => '(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 1024px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 568px) 496px, (min-width: 375px) 322px, 273px'
    )
));
?>
</a>

The Last image size (273px-Homepage-Smartphone-Small-Portrait) I did not specify the min-width as you said this is not required for the smallest image size.

This is based on the viewport size and the resulting image size displayed at that viewport as follows:

Desktop (viewport min=1405+) (image=402x285)
Laptop (viewport min=1100) (image=354x252)

Tablet Portrait (viewport=768x1024) (image=676x480)
Tablet Landscape (viewport=1024x768) (image=285x203)

Smartphone Large Portrait (viewport=375x667) (image=322x229)
Smartphone Large Landscape (viewport=667x375) (image=585x415)

Smartphone Small Portrait (viewport=320x568) (image=273x194)
Smartphone Small Landscape (viewport=568x320) (image=496x352)

(I am using et-builder-portfolio-image (400 x 284) for desktop (min=1405px) which was built into my theme).

And with that information i took the minimum viewport size for each viewport and listed the image size name followed by the image width as follows:

Desktop (viewport min=1405+) = et-builder-portfolio-image 400
Laptop (viewport min=1100) = Homepage-Laptop 354
Tablet Landscape (viewport min=1024) = Homepage-Tablet-Landscape 285
Tablet Portrait (viewport min=768) = Homepage-Tablet-Portrait 676
Smartphone Large Landscape (viewport min=667) = Homepage-Smartphone-Large-Landscape 585
Smartphone Small Landscape (viewport min=568) = Homepage-Smartphone-Small-Landscape 496
Smartphone Large Portrait (viewport min=375) = Homepage-Smartphone-Large-Portrait 322
Smartphone Small Portrait (viewport min=320) = Homepage-Smartphone-Small-Portrait 273

Creating the following for functions.php

add_image_size( 'Homepage-Laptop', 354, 252, true );

add_image_size( 'Homepage-Tablet-Portrait', 676, 480, true );
add_image_size( 'Homepage-Tablet-Landscape', 285, 203, true );

add_image_size( 'Homepage-Smartphone-Large-Portrait', 322, 229, true );
add_image_size( 'Homepage-Smartphone-Large-Landscape', 585, 415, true );

add_image_size( 'Homepage-Smartphone-Small-Portrait', 273, 194, true );
add_image_size( 'Homepage-Smartphone-Small-Landscape', 496, 352, true );