Hey Brian - for a lot of our CMS builds we can’t trust the end users upload a reasonably-sized image, so we use expressionengine’s built-in file-upload image manipulation functionality to create a specific re-sized image automatically on upload - the output url from simple-grid is just the original un-optimized image that was uploaded (i’ve lost count of the number of times people upload 10Mb+ PNG files as photos and wonder why the site is slow!), where we would write it as follows (assuming the image manipulation is called “1200px”):
{photo}
{path}_1200px/{file_name}
{/photo}
So that we can explicitly access the resized version of the image (expressionengine puts the resized images in subdirectories - so that translates to /uploads/hero-images/_1200px/my-file.jpg instead of /uploads/hero-images/my-file.jpg

On top of that for better google lighthouse scores we’ll generally also use a JS plugin called lazysizes that allows us to specify multiple different-sized image urls and have the page dynamically lazy-load the version best sized for the size of the screen width for better download speed/rendering time - for example:

{photo}
<a href="{path}/_thumbs/{file_name}dKX57pxE7HPJrbqE9JTJAGr8j9b0qLqqtypography_img_src_end               data-src={path}/_post_1440w/{file_name}               data-srcset={path}/_post_375w/{file_name} 375w,                            {path}/_post_750w/{file_name} 750w,                            {path}/_post_768w/{file_name} 768w,                            {path}/_post_1024w/{file_name} 1024w,                            {path}/_post_1440w/{file_name} 1440w,                            {path}/_post_1536w/{file_name} 1536w,                            {path}/_post_2048w/{file_name} 2048w,                            {path}/_post_2880w/{file_name} 2880w alt={description} class=lazyload hero__bg               data-sizes=auto               data-low">{path}/_thumbs/{file_name}dKX57pxE7HPJrbqE9JTJAGr8j9b0qLqqtypography_img_src_end               data-src={path}/_post_1440w/{file_name}               data-srcset={path}/_post_375w/{file_name} 375w,                            {path}/_post_750w/{file_name} 750w,                            {path}/_post_768w/{file_name} 768w,                            {path}/_post_1024w/{file_name} 1024w,                            {path}/_post_1440w/{file_name} 1440w,                            {path}/_post_1536w/{file_name} 1536w,                            {path}/_post_2048w/{file_name} 2048w,                            {path}/_post_2880w/{file_name} 2880w alt={description} class=lazyload hero__bg               data-sizes=auto               data-low</a>

And also very increasingly clients are looking for WCAG-2 spec accessible websites - so we need to be able to output a good image {description} or {title} attribute of the uploaded image - the easiest way it to take it from the file’s title and description attributes so they’re defined in one place.
(ideally we also need the built-in {location} attribute associated with an image as we often use that within the html of an image too)

Note it’s not a super-urgent issue for us at the moment (but presumably is still limiting for other people) as i’ve written a simple custom plugin routine i’m using to wrap your file url output to look up the file in the database and template it’s attributes from the exp_files and exp_upload_prefs tables, but obvs it’s a dirty hack:

{exp:chatter_helpers:parse_file_attributes parse="inward" file="{photo}"}
{path}{file_name}
{/exp:chatter_helpers:parse_file_attributes}