Logos Bible Software
Sign In

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!

this asset is not set to public



output: