Lazy Load Placeholder Generator
Generate Lazy Load smallest responsive placeholder image & background pattern.
Dummy Generator
For <img> src attribute.Original image size (px):
Aspect ratio: 1:1 Full sizeRatio
base64 Image: Download GIF
data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==
CSS Hack / 100%
.parent { position: relative; padding-top: 100% }
img.lazy { position: absolute; top: 0; left: 0; width: 100% }
img.lazy { position: absolute; top: 0; left: 0; width: 100% }
Background Pattern
For <img> or .parent background-image.Select file pattern (gif, png, jpg)
Preview:
base64 background-image:
data:image/gif;base64,R0lGODlhCgAIAIABAN3d3f///yH5BAEAAAEALAAAAAAKAAgAAAINjAOnyJv2oJOrVXrzKQA7
