I am trying to get my head around image sizes in Wordpress. I have a selection of products that will be displayed as either products images, large feature masonry images on the home page or sometimes in the hero image across the top of the page.
I am making this for a client and ideally they would be able to have a size that would cover all of these so they could change each one when they wanted.
Can I just add the largest size for each one (the hero size of say 1920px) and then wordpress will pick appropriate sizes for each use or do I need to do one set of hero images, one set of masonry images and one set of products or a combination of these.
I find it a bit confusing and I don't want to add unnecessary file sizes.
I have tried to clear this up reading other posts around this topic but can't seem to find a definitive answer.
Thanks
By default, WordPress will create a thumbnail, medium, and large images, in addition to the original image. Four images in total for each upload.
If it's a featured image, in code you can tell WP which image to use. See the example at https://codex.wordpress.org/Post_Thumbnails:
// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_thumbnail();
the_post_thumbnail('thumbnail'); // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium'); // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large'); // Large resolution (default 640px x 640px max)
the_post_thumbnail('full'); // Original image resolution (unmodified)
the_post_thumbnail( array(100,100) ); // Other resolutions
Some themes add their own sizes for hero images, products, etc., in addition to the default https://codex.wordpress.org/Function_Reference/set_post_thumbnail_size:
set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode
This approach can work well if you just need the same image in different sizes, but if the images are different, let's say the hero image is different than the product image, than the featured image, then you may want to use custom fields.
With custom fields, you can have a different image for each use case.
I'd recommend using http://www.advancedcustomfields.com/ to add image fields. I wrote an article on how to use the image object in ACF (http://www.aliciaramirez.com/2014/03/advanced-custom-fields-image-object-tutorial/)