Re-SRC is a tool that allows you to automatically serve responsive images for your website from their cloud servers. It delivers a new image file each time the browser window (viewport) is resized.
To use it in your HTML when linking to an image, you would do the following:
Some more background for SEO considerations:
As an example, looking at their demo page's code, the
src of the Arc de Triomphe photo — when the browser window is resized to be at a tablet-width — shows this particular file at it's widest. It is found under the following URL:
If the viewport is increased to desktop-width, then a smaller image is served in line with the design; see this URL:
If I change the viewport to be about half-way between those two, then the image's URL is:
In other words, I found that there is a separate file for every 10-pixel increment of the image width. Very cool for saving bandwidth on mobile devices and service responsive/retina images on others, but...
Here are two problems I see for SEO:
imgon your site, part of your semantic markup, will not be hosted on your site at all, or even a server you control. Any links to these images will pass on "link juice" to Re-SRC's site instead.
- You are serving a vast array of different image files to different people — some may link to one, others to another size. Then there's the question of what different search engine crawlers will see.
- There seems to be no fallback option if their servers are down.
Do you see any other concerns? Or, perhaps, do you not see those as concerns?