Image loading and device sizes

In our css we set ‘img {width:100%; height:auto;}’ to makes images scale based on the screen size.

For Native Lazy loading we are currently testing this plugin by google

With recent changes to Chrome and Firefox image loading, if the image width and height are set the pages should load these with the space blocked out for the image until it has loaded.

Currently, the WordPress Image block does not output the width and height of an image in an image block so we are watching to see if this is changed in a future WordPress core update.

Our default WordPress media settings

By default, thumbnails are set to 150 x 150 pixels

We set Medium to be 800 x 800 (bigger than a common device size of 768px and close to our 960px medium breakpoint)

Large, 1000 or 1200 – this makes it big enough for the common 1024 device size

Our default media query breakpoints:

$breakpoint-small: 600px;
$breakpoint-medium: 960px;
$breakpoint-large: 1200px;
$breakpoint-xlarge: 1440px;

Custom image size

The above sets good defaults but we add additonal image size in the Theme Functions file.

add_image_size( 'gomo-hero', 1600, 800, true );
add_image_size( 'gomo-four-by-three', 800, 600, true );
add_image_size( 'gomo-square', 800, 800, true );
if ( has_post_thumbnail() ) { 

Based on the above WordPress will output the following HTML for a full-size image.

<figure class="wp-block-image size-full">
<img src="" 
alt="" class="wp-image-3822" 
srcset=" 1400w, 800w, 1200w, 768w" 
sizes="(max-width: 1400px) 100vw, 1400px">

This will output the 800 x 800 image as long as the image uploaded is bigger than this size.

if ( has_post_thumbnail() ) { 
    the_post_thumbnail(  'gomo-square' );

This will output a different attributes

<?php if ( has_post_thumbnail() ) : ?>

    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    <img src="<?php echo esc_attr( $src[0] );?>"
        srcset="<?php echo esc_attr( $srcset ); ?>"
        sizes="<?php echo esc_attr( $sizes );?>"
        alt="<?php echo esc_attr( $alt );?>" />

<?php endif; ?>

ACF image with srcset

Setup an ACF image field with Image ID not Image Array, then:

$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
    echo wp_get_attachment_image( $image, $size );

Read more about ACF image fields

Art direction with srcset

With the above settings, it is also possible to output and image in the scrset format with different ratios for screen widths (eg square for mobile and more letterbox 2:1 for bigger screens)

<?php if ( has_post_thumbnail() ) : ?>
	$id = get_post_thumbnail_id();
    $fullsrc = wp_get_attachment_image_src( $id, 'gomo-hero' );
    $squaresrc = wp_get_attachment_image_src( $id, 'gomo-square' );
<figure class="wp-block-image size-full">
<img src="<?php echo esc_attr( $fullsrc[0] ); ?>" 
srcset="<?php echo esc_attr( $fullsrc[0] ); ?> 1400w,
<?php echo esc_attr( $squaresrc[0] ); ?> 600w"
sizes="(max-width: 1400px) 100vw, 1400px">
<?php endif; ?>

Alternative with <picture>

<?php if ( has_post_thumbnail() ) : ?>
 $id = get_post_thumbnail_id();
    $alt = get_post_meta( $id, '_wp_attachment_image_alt', true);

    /* get the width of the largest cropped image to 
       calculate the breakpoint */
    $hero_cropped_info = 
        wp_get_attachment_image_src( $id, 'gomo-square' );
    $breakpoint = absint( $hero_cropped_info[1] ) + 1;

    // pass the full image size to these functions
    $hero_full_srcset = 
        wp_get_attachment_image_srcset( $id, 'full' );
    $hero_full_sizes = 
        wp_get_attachment_image_sizes( $id, 'full' );

    // pass the cropped image size to these functions
    $hero_cropped_srcset = 
        wp_get_attachment_image_srcset( $id, 'gomo-square' );
    $hero_cropped_sizes = 
        wp_get_attachment_image_sizes( $id, 'gomo-square' );

        media="(min-width: <?php echo $breakpoint; ?>px)"
        srcset="<?php echo esc_attr( $hero_full_srcset ); ?>"
        sizes="<?php echo esc_attr( $hero_full_sizes ); ?>" />
    <img srcset="<?php echo esc_attr( $hero_cropped_srcset ); ?>"
        alt="<?php echo esc_attr( $alt );?>"
        sizes="<?php echo esc_attr( $hero_cropped_sizes ); ?>" />
<?php endif; ?>

Limiting image upload size

We prefer to upload images into our site at about the size the image will be used, however when you have users who do not have photoshop or knowledge about image resolution its a good idea to use a plugin like imsanity to limit the size of images being used on the site. We are trying to avoid bloating the server file size, backup sizes and killing page performance (especially mobile)

When using imsanity we can set the max size to be about 1400-2000 px wide.


At the moment we don’t use retina jpg images on most sites, this would create a much bigger file size and impact page performance, however if we do use .gif files for small infographics, icons, background images etc we load in a 2x image and then set it to display in size required.

There are retina plugins available but we don’t use that unless the site has very few images.

Example Gutenberg image blocks:

Medium size Image Alt text
Medium image
Big image
Bigger than a large image – full size
Medium Image with Circle mask style

Search the site


123 Main Street
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899


Copyright 2023. Blah blah blah Company Limited