Serve webp / size images responsively

[fgeierst]

Originally posted by @fgeierst in #1 (comment)

• Test https://wordpress.org/plugins/webp-express/
• Test Jetpack image optimzation
• Serve webp, converted with https://wordpress.org/plugins/webp-converter-for-media/ via GD lib
• Properly size images: WP media manager
• Properly size images: srcset/sizes

[fgeierst]

Resources

• https://css-tricks.com/video-screencasts/133-figuring-responsive-images/
• https://rudrastyh.com/wordpress/responsive-images.html
• https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/

[fgeierst]

• Understand srcset & sizes https://codepen.io/fgeierst/pen/yLaPwWW
• There is a WP specific problem "#Wordpress adds proper srcset attribute, but the sizes attribute is pretty useless" Enhancement: images handling WordPress/gutenberg#6177
• Possible solutions: https://gist.github.com/fgeierst/70df98736c3181005f550f79d2d6e84f

[fgeierst]

Load properly size images by adding more media conditions / slot sizes

Set $sizes corresponding to settings in /wp-admin/options-media.php
Note that medium_large (768px) is available, but not displayed in options-media.php

function adjust_image_sizes_attr( $sizes, $size ) {
	$sizes = '(max-width: 500px) 500px, (max-width: 768px) 768px, 1024px';
	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );