Selecting Image Size

  • Resolved Anonymous User 14978628

    (@anonymized-14978628)


    9 years, 11 months ago

    Hi Stefan,

    I’m having some confusion regarding the selected image sizes which i’m hoping you can clarify for me please.

    My understanding is that by having different image sizes in the srcset, the browser will automatically choose the best size for the display device. So smaller image sizes for smaller screens, and larger sizes for larger screens.

    I have tried to apply this logic to my homepage images by adding sizes for phone, tablet and pc screens based on how the image sizes change responsively for each device (including landscape/portrait orientations). I used the chrome extension “window resizer beta” to determine what these image sizes are.

    This gives me the following sizes which i added to my functions.php

    add_image_size( 'Homepage-iPad-Portrait', 676, 480 );
add_image_size( 'Homepage-iPad-Portrait@2x', 1352, 960 );
add_image_size( 'Homepage-iPad-Landscape', 285, 203 );
add_image_size( 'Homepage-iPad-Landscape@2x', 570, 406 );
add_image_size( 'Homepage-iPhone6-Portrait', 322, 229 );
add_image_size( 'Homepage-iPhone6-Portrait@2x', 644, 458 );
add_image_size( 'Homepage-iPhone6-Landscape', 585, 415 );
add_image_size( 'Homepage-iPhone6-Landscape@2x', 1170, 830 );
add_image_size( 'Homepage-iPhone5-Portrait', 273, 194 );
add_image_size( 'Homepage-iPhone5-Portrait@2x', 546, 388 );
add_image_size( 'Homepage-iPhone5-Landscape', 496, 352 );
add_image_size( 'Homepage-iPhone5-Landscape@2x', 992, 704 );
add_image_size( 'et-builder-portfolio-image@2x', 800, 568 );

    And the code i used for the homepage images was the one you gave before but now including these sizes:

    <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@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' ),
            ) );
            ?>
            </a>

    The problem i’m having is that when i run Google PageSpeed Insights, it tells me my images need to be optimized. Specifically the larger sized images and retina images.

    I’m confused as to why this is happening as i thought the whole point of having srcset was to be able to display different sized images to different sized screens. So i thought by doing what i’ve done my images would be optimized, but for some reason Google is saying they are not? I have the retina option enabled in Responsify Wp.

    Am i missing something obvious here?

    https://ww.wp.xz.cn/plugins/responsify-wp/

Viewing 15 replies - 16 through 30 (of 76 total)
1 2 3 4 5 6
  • Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 11 months ago

    Here is the outputted srcset:

    <img srcset=”http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-273×194.jpg 273w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-285×203.jpg 285w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-322×229.jpg 322w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-354×252.jpg 354w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-400×284.jpg 400w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-496×352.jpg 496w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-585×415.jpg 585w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-676×480.jpg 676w” 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”>

    and the debug

    <a href="http://127.0.0.1/wordpress/test-post-6/" <!--="" ###="" rwp="" debug="" attachment="" id:="" 59="" image="" sizes:="" thumbnail,="" medium,="" medium_large,="" large,="" homepage-laptop,="" homepage-tablet-portrait,="" homepage-tablet-landscape,="" homepage-smartphone-large-portrait,="" homepage-smartphone-large-landscape,="" homepage-smartphone-small-portrait,="" homepage-smartphone-small-landscape,="" 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,="" homepage-small,="" homepage-large,="" related-posts-old,="" homepage-ipad-landscape,="" full="" width:="" 950="" height:="" 640="" sizes="" found:="" images="" -="" thumbnail:="" http:="" 127.0.0.1="" wordpress="" wp-content="" uploads="" 2016="" 06="" 6-150x101.jpg,="" medium_large:="" 6-768x517.jpg,="" homepage-laptop:="" 6-354x252.jpg,="" homepage-tablet-portrait:="" 6-676x480.jpg,="" homepage-tablet-landscape:="" 6-285x203.jpg,="" homepage-smartphone-large-portrait:="" 6-322x229.jpg,="" homepage-smartphone-large-landscape:="" 6-585x415.jpg,="" homepage-smartphone-small-portrait:="" 6-273x194.jpg,="" homepage-smartphone-small-landscape:="" 6-496x352.jpg,="" logo-small:="" 6-104x70.jpg,="" logo-small@2x:="" 6-208x140.jpg,="" logo-large:="" 6-184x124.jpg,="" logo-large@2x:="" 6-368x248.jpg,="" related-posts:="" 6-212x143.jpg,="" smallest:="" 6-479x323.jpg,="" small:="" et-builder-post-main-image:="" 6-400x250.jpg,="" et-builder-portfolio-image:="" 6-400x284.jpg,="" extra-image-single-post:="" 6-950x640.jpg,="" extra-image-medium:="" 6-627x376.jpg,="" extra-image-small:="" 6-440x264.jpg,="" extra-image-square-medium:="" 6-440x440.jpg,="" extra-image-square-small:="" 6-150x150.jpg,="" homepage-small:="" 6-330x230.jpg,="" homepage-large:="" 6-686x490.jpg,="" related-posts-old:="" 6-270x182.jpg,="" full:="" 6.jpg="" media="" queries:="" use="" homepage-tablet-landscape="" when="" min-width:="" 273px,="" homepage-smartphone-large-portrait="" 285px,="" homepage-laptop="" 322px,="" et-builder-portfolio-image="" 354px,="" homepage-smartphone-small-landscape="" 400px,="" homepage-smartphone-large-landscape="" 496px,="" homepage-tablet-portrait="" 585px="" --=""><img srcset="http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-273x194.jpg 273w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-285x203.jpg 285w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-322x229.jpg 322w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-354x252.jpg 354w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-400x284.jpg 400w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-496x352.jpg 496w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-585x415.jpg 585w, http://127.0.0.1/wordpress/wp-content/uploads/2016/06/6-676x480.jpg 676w" 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>
    Plugin Author stefanledin

    (@stefanledin)

    9 years, 11 months ago

    Everything looks perfect 🙂

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 11 months ago

    Great! Thanks Stefan!

    I have worked through all the images on my site adapting the code to those locations for various viewpoints. I haven’t added any retina images, but i wanted to do so for the logo because it contains some text. But i’m unsure how to do this correctly?

    Currently the code i have for the logo without retina sizes added is:

    <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(
    'sizes' => array('Logo-Large', 'Logo-Smartphone-Landscape', 'Logo-Smartphone-Large-Portrait', 'Logo-Smartphone-Small-Portrait' ),
'attributes' => array(
        'sizes' => '(min-width: 768px) 566px, (min-width: 568px) 400px, (min-width: 375px) 275px, 225px'
    )
    'id' => 'logo',
    'alt' => esc_attr( get_bloginfo( 'name' ) )
    )
) );
?>
</a>

    Would i add the retina sizes into the sizes array as follows:

    echo rwp_img( 153, array(
    'sizes' => array('Logo-Large', 'Logo-Large@2x', 'Logo-Smartphone-Landscape', 'Logo-Smartphone-Large-Portrait', 'Logo-Smartphone-Landscape@2x', 'Logo-Smartphone-Small-Portrait', 'Logo-Smartphone-Large-Portrait@2x' ),

    But then what about the sizes in the attributes? Do i also add those retina sizes into the code even though this will create duplicate min-width entries as follows:

    'attributes' => array(
        'sizes' => '(min-width: 768px) 566px, (min-width: 768px) 1132px <RETINA>, (min-width: 568px) 400px, (min-width: 568px) 800px <RETINA>, (min-width: 375px) 275px, (min-width: 375px) 550px <RETINA>, 225px'
    )

    I added <RETINA> just so you can see the retina sizes easily.

    With the above i am missing a retina of my final image which would be 450px.

    The above is based on the following minimum viewports and image size:

    Desktop (viewport min=1405+) = Logo-Large 566
Laptop (viewport min=1100) = Logo-Large 566
Tablet Landscape (viewport min=1024) = Logo-Large 566
Tablet Portrait (viewport min=768) = Logo-Large 566
Smartphone Large Landscape (viewport min=667) = Logo-Smartphone-Landscape 400
Smartphone Small Landscape (viewport min=568) = Logo-Smartphone-Landscape 400
Smartphone Large Portrait (viewport min=375) = Logo-Smartphone-Large-Portrait 275
Smartphone Small Portrait (viewport min=320) = Logo-Smartphone-Small-Portrait 225

    with these entries in functions.php to create the new image sizes including retina versions:

    add_image_size( 'Logo-Large', 566, 124 );
add_image_size( 'Logo-Large@2x', 1132, 248 );
add_image_size( 'Logo-Smartphone-Landscape', 400, 90 );
add_image_size( 'Logo-Smartphone-Landscape@2x', 800, 180 );
add_image_size( 'Logo-Smartphone-Large-Portrait', 275, 70 );
add_image_size( 'Logo-Smartphone-Large-Portrait@2x', 550, 140 );
add_image_size( 'Logo-Smartphone-Small-Portrait', 225, 60 );
add_image_size( 'Logo-Smartphone-Small-Portrait@2x', 450, 120 );
    Plugin Author stefanledin

    (@stefanledin)

    9 years, 11 months ago

    You just have to add the retina image sizes to the sizes array. The sizes attribute should remain the same. (Confusing when all the different terms has the same name!)

    Example:

    <img srcset="retina-logo.png 400w, regular-logo.png 200w" sizes="200px">

    The browser knows that the logo should be displayed as 200 pixels wide, but since there’s an image size available that is twice the size, it will know that it should select that one on a retina screen.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 11 months ago

    Great! Thanks Stefan! This sometimes feels like learning a new language (which i guess it is really), although it’s very satisfying to think that users will be served an optimized image for their device. This really should be built into the wordpress core.

    Looking at http://responsifywp.com/ i realised we can also implement this functionality for the background image which is the only image type i have left to optimize.

    Based on your example i replaced the code for my background image in header.php

    <body <?php body_class(); ?>>

    with your code:

    <?php
$background = get_field('header_image');
echo rwp_style( $background, array(
    'selector' => '#page-header'
) );
?>

    This gave me a blank screen as did this:

    <body
<?php
$background = get_field('header_image');
echo rwp_style( $background, array(
    'selector' => '#header'
) );
?>
>

    and this

    <?php
$background = get_field('custom-background');
echo rwp_style( $background, array(
    'selector' => '#header'
) );
?>

    and this

    <body
<?php
$background = get_field('background-image');
echo rwp_style( $background, array(
    'selector' => '#page-header'
) );
?>
>

    and

    <body <?php body_class(); ?> style="background-image: <?php $background = get_field('header_image');
echo rwp_style( $background, array(
    'selector' => '#header'
) ); ?>">

    I’m wondering how i can get this working with my background image as i would like to add image sizes as i was doing before with something like the following the code if possible?

    <?php
$background = get_field('header_image');
echo rwp_style( $background, array(
    'selector' => '#page-header'
'sizes' => array('my-image-sizes' ),
'attributes' => array(
        'sizes' => '(min-width: sizes) sizepx' )
) );
?>

    Plugin Author stefanledin

    (@stefanledin)

    9 years, 11 months ago

    This really should be built into the wordpress core.

    Well, since 4.4, WordPress actually has support for responsive images built in.

    The rwp_style() examples isn’t a copy/paste solution and won’t just work. The examples assumes that the background images is uploaded through a custom field created by Advanced custom fields (which provides theget_field() function).
    Then you’ll need to make the field return the attachment ID of the background and pass it to rwp_style(), just like rwp_img().

    You can of course use whatever solution you want, just as long you’re passing an attachment ID to rwp_style.

    Documentation: https://github.com/stefanledin/responsify-wp#style

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 11 months ago

    Well, since 4.4, WordPress actually has support for responsive images built in.

    I was aware wordpress now has responsive images built in, what i meant was the level of control your plugin offers for different viewports. I realized wordpress was creating different image sizes of an image i uploaded, but it still wasn’t always showing the image size i would expect for a particular device.

    To me the benefits of this plugin are obvious as it allows me to add srcset to images which didn’t have it before. But as you say, since wordpress has responsive images built in why is this plugin as useful as it is? Shouldn’t wordpress now automatically be doing what RWP does?

    Plugin Author stefanledin

    (@stefanledin)

    9 years, 11 months ago

    The native implementation is based on the RICG Responsive images plugin. There’s a lot of “big names” behind it, which makes it very hard for a guy like me to compete against.
    I haven’t looked that much into the native implementation for obvious reasons, but I’ve found the default markup to be a bit strange.
    Since 4.4 I’ve consider RWP to be “beaten”, so I’m not developing it like I used to do. I’m just maintaining it so I can continue using it myself. Of course I know there’s a lot of guys like yourself out there who like what it does 🙂

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 11 months ago

    Well i consider your plugin to be essential for my needs, as the native implementation within wordpress doesn’t come close to offering the level of customization RWP offers.

    As for my background image, after reading your documentation i realize this could easily be done by using custom media queries. So that should be all my images covered.

    Many thanks for taking the time to help me get things working. I really do appreciate the time and effort you put into this.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 10 months ago

    Hi stefan,

    I’m having some trouble getting the following code working on my homepage. My php editor tells me there is a syntax error due to unexpected @ in the ‘sizes’ => array. The program hasn’t been updated in a while so that may not be accurate (phpDesigner8).

    With this code nothing appears on my homepage. When i remove the retina@2x images i get the text displaying but no images? Not sure what is wrong here?

    <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', et-builder-portfolio-image@2x', 'Homepage-Laptop', 'Homepage-Laptop@2x', 'Homepage-Tablet-Landscape', 'Homepage-Tablet-Landscape@2x', 'Homepage-Tablet-Portrait', 'Homepage-Tablet-Portrait@2x', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Large-Landscape@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px'
    )
));
?>
</a>
    Plugin Author stefanledin

    (@stefanledin)

    9 years, 10 months ago

    Looks like you’re missing a ‘ before et-builder-portfolio-image@2x.

    et-builder-portfolio-image@2x’

    Should be:

    ‘et-builder-portfolio-image@2x’

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 10 months ago

    Ah, sorry that was a mistake copying a code i had saved to file which i overlooked. I added the correction but the images still didn’t show.

    I have just however discovered something strange.

    With the code i’m using i don’t get images displayed on my homepage. Playing around with a few settings i accidentally got the images to show by switching on debug mode in RWP.

    For some reason, when debug mode is off, the images don’t show. But when i switch debug mode on, the images show. I can reliably reproduce this by switching debug on or off making my homepage images show or not.

    Before i discovered this i thought it may have been an issue with my local install setup. So i did a clean local install. Used unmodified template files. And have only 2 plugins currently active. Yours and Flexible Posts Widget. But still i had the issue until i enabled debug in RWP.

    I have also just reproduced the exact same problem on my live test site (http://www.celebrityhealthcritic.com/). Here, debug mode is on and images show. But if i switch debug mode off the images disappear. Could this be some kind of bug?

    The code i’m using for the homepage images is:

    <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', 'et-builder-portfolio-image@2x', 'Homepage-Laptop', 'Homepage-Laptop@2x', 'Homepage-Tablet-Landscape', 'Homepage-Tablet-Landscape@2x', 'Homepage-Tablet-Portrait', 'Homepage-Tablet-Portrait@2x', 'Homepage-Smartphone-Large-Landscape', 'Homepage-Smartphone-Large-Landscape@2x', 'Homepage-Smartphone-Small-Portrait', 'Homepage-Smartphone-Small-Portrait@2x' ),
    'attributes' => array(
        'sizes' => '(min-width: 1405px) 400px, (min-width: 1100px) 354px, (min-width: 981px) 285px, (min-width: 768px) 676px, (min-width: 667px) 585px, (min-width: 480px) 496px, (min-width: 375px) 322px, 273px'
    )
));
?>
</a>
    Plugin Author stefanledin

    (@stefanledin)

    9 years, 10 months ago

    The opening <a> tag isn’t closed. You’re missing the >.

    <a href="<?php echo get_permalink( $post->ID );?>"

    Should be

    <a href="<?php echo get_permalink( $post->ID );?>">

    I guess that the HTML comments from the debug mode is closing that tag.
    I noticed that the syntax in the inspector looked strange. (Screenshot)

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 10 months ago

    Yes you are right, that worked! Well spotted, thanks Stefan.

    Thread Starter Anonymous User 14978628

    (@anonymized-14978628)

    9 years, 10 months ago

    I tried to modify the code you gave me for the logo to include media queries but I’m getting another error. I get the following syntax error:

    Parse error: syntax error, unexpected ”id” (T_CONSTANT_ENCAPSED_STRING), expecting ‘)’

    This is the line flagged as causing the error:

    'id' => 'logo',

    When using this code:

    <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(
    'sizes' => array('Logo-Large', 'Logo-Large@2x', 'Logo-Smartphone-Landscape', 'Logo-Smartphone-Landscape@2x', 'Logo-Smartphone-Large-Portrait', 'Logo-Smartphone-Large-Portrait@2x', 'Logo-Smartphone-Small-Portrait', 'Logo-Smartphone-Small-Portrait@2x' ),
'attributes' => array(
        'sizes' => '(min-width: 768px) 566px, (min-width: 480px) 400px, (min-width: 375px) 275px, 225px'
    )
    'id' => 'logo',
    'alt' => esc_attr( get_bloginfo( 'name' ) )
    )
) );
?>
</a>

    Looks like something i’ve missed is causing this?

Viewing 15 replies - 16 through 30 (of 76 total)
1 2 3 4 5 6

The topic ‘Selecting Image Size’ is closed to new replies.

  • 76 replies
  • 2 participants
  • Last reply from: Anonymous User 14978628
  • Last activity: 9 years, 10 months ago
  • Status: resolved