What is the ideal URL format to use for images served at multiple sizes

Question

I am building responsive image functionality for a site (written ASP.NET MVC, although that is almost irrelevant here). My question is not technical, but about the most semantic way to serve images at different resolutions.

I would be uploading the maximum resolution images to the blog and then it will dynamically re-size depending on the format of the requested image URL. I want to know what is the most semantic / SEO friendly format of URL to use. Say my original image has the url www.example.com/picture.jpg Some ideas are:

www.example.com/picture.jpg?w=300&h=150
www.example.com/picture-300-150.jpg
www.example.com/picture-w300-h150.jpg
www.example.com/300/150/picture.jpg
www.example.com/picture.jpg/300/150

Answer 1

You could also handle sizing this way and make your image names simpler:

<img srcset="small.jpg 256w,
                 medium.jpg 512w,
                 large.jpg 1024w"
         sizes="(max-width: 30em) 30em, 100vw"
         src="medium.jpg"
         alt="keyword image" />

Or you could use a responsive image service like Cloudinary to handle the manipulation. In any case, make sure that you have your keyword in your alt text for the image and if possible in your image title and caption. Adding the keyword to your image metadata will improve SEO.