responsive image tags
please read before use!
this tool is intended to help generate responsive image tags using best practices and formats, just supply which size you intend an image to appear for a given (minimum) viewport width and use the generated image tag just like you would a regular image. you still need to style the image in the CSS to be the size you want, this image tag is only to help the browser load a appropriately sized image to increase page load speeds.
image assets must have public view permissions for this process
if you want more information about web-optimized links available through amber, you can find it here
if you want an image to be the smallest size (no viewport minimum) just set viewport size to 0 for that size
the lazy load option will enable lazy-loading on the image when applicable, ideal for images further down a long page that don't need to be loaded for initial view
the optimized image routes don't current support SVG files, so just use the regular amber link for those rather than trying to optimize them with this tool
if you have any ideas for improving this or questions about operating it, let me know!
output: