Images for all sizes

WordPress helps create images in a range of sizes which are then served up with a srcset attribute so that browsers may pick the appropriate size for their display.  Google prefers sites which serve images in the right size, format and compression.   So managing and optimizing images is high on website priorities.

Size, Compression and Optimization

Size Control

• php .ini settings (separate for each version and partly overridable at site level) control the ability to upload and size in bytes of files which can be uploaded via the settings file_uploads, upload_max_filesize and post_max_size.  The phpinfo for your site should show both the site local and master values – if you don’t have one, add a .php file with the following contents:

  <?php
  header('Cache-Control: no-cache, must-revalidate');
  header('Pragma: no-cache');
  phpinfo();?>

• Imsanity is a simple tool which allows control over maximum dimensions by downsizing the “original” version of any uploaded images to the maximum size set.  This helps if your users upload large pictures directly from digital cameras, though of course the picture must be within the maximum uploaded size permitted by php.

• Simple Image Sizes: out of the box WordPress Media generates and serves different sizes for images (Thumbnail, Medium, Large), additionally different Themes and Plugins – especially WooCommerce and image gallery tools add their own sizes for their own galleries.  Then when images are uploaded, WordPress generates copies in all the different configured sizes.
  This plugin helps a lot here by:
  • extending Settings Media to be able to review and manage all the configured media sizes from all plugins and selectively regenerate selected sizes.  Where appropriate some of the sizes can also be aligned to reduce somewhat the proliferation of extra files being generated.
  • allowing selective regeneration of different sizes of image – a great help when redesigning and wanting a new image size for the new design

Optimization

• EWW Image Optimizer / Cloud will look after formats, compression, lazy loading and webp – see also Google says “webp”
• “Native” Lazy loading via Loading attribute supported by many modern browsers is due to arrive in WordPress 5.5 and is available to preview via Lazy Loading Feature Plugin.  If using with EWW Image Optimizer this has little effect as the EWWW code is modifying the output and including Loading or not based on its own settings.

CDN

• WP Offload Media Lite will copy files to S3 or similar as they are uploaded – see also not my Web Front End.

Image Management

Having used various solution for this including my own customisations for completing ALT tags, I have now deactivated in favour of reduced system complexity and increased user education.

• Enhanced Media Library offers additional categorisation and bulk image management features and extension of the WordPress built in gallery shortcodes to support taxonomy queries.
• Media File Renamer attempts to automatically rename files to match title/caption, which is helpful but only if someone added the captions to begin with.
• Clean Image Filenames attempts to remove additional problematic characters from filenames for valid and cleaner urls.

Image Galleries and Lightboxes

In 2016 I switched to PhotoSwipe image lightbox and swipe gallery which was later also integrated into WooCommerce.  Originally I extended the Thrive Photoswipe Masonry with the ability to lightbox all the images on the page. After an unfortunate code restructure, further contributions were left forked and wanting to update back to a main thread.  LightBox with Photoswipe is a promising alternative which supports the ability to lightbox all the linked images on the page though without the Masonry option – which means a separate gallery display tool such as foogallery can be used.

Lightbox with Photoswipe Settings:

• General, enable except Add native lazy loading
• Captions, uncheck Get the image captions from the database, enable User alternative text of images.
• Sharing, disable Facebook and Tweet as these no longer respect sharing of individual images (shares now only show the principal image of the page).
• disable on WooCommerce pages to avoid conflict with WooCommerce Photoswipe implementation

To add the featured image to the slideshow, output it surrounded with an <a> tag pointing to the image source – code for that will depend on the theme but would look something like this:

/**
* Filters the post thumbnail HTML to wrap in <a> tag to work with photoswipe
*
* @param string $html The post thumbnail HTML.
* @param int $post_id The post ID.
* @param string $post_thumbnail_id The post thumbnail ID.
* @param string|array $size The post thumbnail size. Image size or array of width and height
* values (in that order). Default 'post-thumbnail'.
* @param string $attr Query string of attributes.
*/
function thumbnail_lightbox( $html, $postID, $post_thumbnail_id, $size, $attr ) {
  if ( $post_thumbnail_id ) {
    $image = wp_get_attachment_image_src( $post_thumbnail_id, 'full', false );
    if ( $image ) {
      list($src, $width, $height) = $image;
      $html = '<a class="post-thumbnail" href="' . $src . '" data-size="' . $width . 'x' . $height . '">' . $html . '</a>';
    }
  }
  return $html;
}

This can then be hooked in on override to the current theme thumbnail eg version of twentyfifteen_post_thumbnail(), storefront_post_thumbnail() etc

add_filter( 'post_thumbnail_html', 'thumbnail_lightbox', 10, 5 );
the_post_thumbnail( 'post-thumbnail', array( 'alt' => get_the_title() ) );
remove_filter( 'post_thumbnail_html', 'thumbnail_lightbox', 10 );

The filters which add the image link are dynamically added and removed only when outputting the post thumbnail on the page itself because when the post thumbnail appears in other contexts it is surrounded by a link to the post.