Image with placeholder animation

You can display a temporary placeholder image while the scaled image is waiting to be requested and received. By adding an aspect-ratio style (or width/height) to the image, you can also prevent Cumulative Layout Shift (CLS).

The placeholder is applied with the src attribute. Refer to the Responsive Image placeholder documentation for more examples.

Tip: the desired image loads so fast that you won't notice the placeholder animation - show it for a longer period by simulating a throttled 2G connection via the Network tab of your browser console.

Code to embed gallery

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script> <img src="data:image/svg+xml;base64, PHN2ZyBpZD0iZUhvdk1wRWo0VDIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTAwJSAxMDAlIiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgdGV4dC1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6I2Y1ZjVmNSI+DQo8c3R5bGU+PCFbQ0RBVEFbDQojZUhvdk1wRWo0VDIyX3RvIHthbmltYXRpb246IGVIb3ZNcEVqNFQyMl90b19fdG8gMTYwMG1zIGxpbmVhciBpbmZpbml0ZSBub3JtYWwgZm9yd2FyZHN9QGtleWZyYW1lcyBlSG92TXBFajRUMjJfdG9fX3RvIHsgMCUge3RyYW5zZm9ybTogdHJhbnNsYXRlKC0yMDAwcHgsNTAwcHgpfSA1MCUge3RyYW5zZm9ybTogdHJhbnNsYXRlKDUwMHB4LDUwMHB4KX0gMTAwJSB7dHJhbnNmb3JtOiB0cmFuc2xhdGUoMjAwMHB4LDUwMHB4KX19DQpdXT48L3N0eWxlPg0KPGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJlSG92TXBFajRUMjItZmlsbCIgeDE9IjAiIHkxPSIwLjUiIHgyPSIxIiB5Mj0iMC41IiBzcHJlYWRNZXRob2Q9InBhZCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSI+PHN0b3AgaWQ9ImVIb3ZNcEVqNFQyMi1maWxsLTAiIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMTc4LDE4OCwxOTQsMCkiLz48c3RvcCBpZD0iZUhvdk1wRWo0VDIyLWZpbGwtMSIgb2Zmc2V0PSIyMCUiIHN0b3AtY29sb3I9InJnYmEoMTc4LDE4OCwxOTQsMC4yKSIvPjxzdG9wIGlkPSJlSG92TXBFajRUMjItZmlsbC0yIiBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0icmdiYSgxNzgsMTg4LDE5NCwwLjQpIi8+PHN0b3AgaWQ9ImVIb3ZNcEVqNFQyMi1maWxsLTMiIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSJyZ2JhKDE3OCwxODgsMTk0LDAuMikiLz48c3RvcCBpZD0iZUhvdk1wRWo0VDIyLWZpbGwtNCIgb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDE3OCwxODgsMTk0LDApIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgaWQ9ImVIb3ZNcEVqNFQyMl90byIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTUwMCw1MDApIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiByeD0iMCIgcnk9IjAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01MDAsLTUwMCkiIG9wYWNpdHk9IjAuOCIgZmlsbD0idXJsKCNlSG92TXBFajRUMjItZmlsbCkiIHN0cm9rZS13aWR0aD0iMCIvPjwvZz48L3N2Zz4NCg==" data-src="https://demo.sirv.com/womens-fashion-sneaker.jpg" class="Sirv" style="aspect-ratio:6/4">

Footer

Here is some text at the bottom of the page.