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.
<?php 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 );
<?php
if ( has_post_thumbnail() ) {
the_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="https://gomopress.com/wp-content/uploads/2020/02/20200223_150216-EFFECTS.jpg" alt="" class="wp-image-3822" srcset="https://gomopress.com/wp-content/uploads/2020/02/20200223_150216-EFFECTS.jpg 1400w, https://gomopress.com/wp-content/uploads/2020/02/20200223_150216-EFFECTS-800x600.jpg 800w, https://gomopress.com/wp-content/uploads/2020/02/20200223_150216-EFFECTS-1200x900.jpg 1200w, https://gomopress.com/wp-content/uploads/2020/02/20200223_150216-EFFECTS-768x576.jpg 768w" sizes="(max-width: 1400px) 100vw, 1400px"> </figure>
This will output the 800 x 800 image as long as the image uploaded is bigger than this size.
<?php
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:
<?php
$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() ) : ?>
<?php
$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] ); ?>"
alt=""
class=""
loading="lazy"
srcset="<?php echo esc_attr( $fullsrc[0] ); ?> 1400w,
<?php echo esc_attr( $squaresrc[0] ); ?> 600w"
sizes="(max-width: 1400px) 100vw, 1400px">
</figure>
<?php endif; ?>Alternative with <picture>
<?php if ( has_post_thumbnail() ) : ?>
<?php
$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' );
?>
<picture>
<source
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 ); ?>" />
</picture>
<?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.
Retina
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:
