0

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
  • Definitely not the first one but the rest is just opinion. – Rob Jan 3 '18 at 14:16
-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.

  • Assuming they have many images, they can't use just "small", "medium", and "large" as the names for all of them. Are you suggesting "picture-small.jpg"? Your suggestion doesn't pass the dimensions through to the image, which would seem to be a requirement for a server side script that dynamically resizes images. – Stephen Ostermiller Jan 3 '18 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.