Image Best Practices
Learn to implement image best practices for critical images, lazy loading, and low quality image placeholder.
Critical Images
We recommend using native responsive images combined with the TwicPics API for images that are displayed at the top of the page. The picture element with an img fallback is the best choice in this case.
By writing API requests, you can easily create responsive variants of your images.
<picture>
<source
media="(max-width: 767px)"
srcset="
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=1:1/resize=300 300w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=1:1/resize=500 500w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=1:1/resize=700 700w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=1:1/resize=900 900w
"
/>
<source
media="(min-width: 992px)"
srcset="
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:4/resize=1000 1000w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:4/resize=1500 1500w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:4/resize=1900 1900w
"
/>
<source
media="(min-width: 768px)"
srcset="
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:9/resize=800 800w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:9/resize=1000 1000w,
https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:9/resize=1200 1200w
"
/>
<img src="https://<sub>.twic.pics/asset.jpg?twic=v1/cover=16:9/resize=1024" />
</picture>
<link rel=preload>
declarative fetch feature.
Lazy-load off-screen media
All assets handled by the TwicPics Script are lazy-loaded by default so off-screen images are ideal candidates for pure Script-backed markup.
<img style="object-fit: cover" data-twic-src="image:asset.jpg" />
Remember: the TwicPics Script can also handle backgrounds!
<div
style="background-size: cover"
data-twic-background="url(image:asset.jpg)"
></div>
LQIP / Blurry Image Placeholder
LQIP stands for Low Quality Image Placeholder.
A great implementation of the low quality image placeholder pattern is to display a blurier version of the final image while the real image is loading.
You can get the blurry version of an image by using the output=preview transformation.
<!-- Using background -->
<div
style="
object-fit: cover;
background-size: cover;
background-image: url(https://<sub>.twic.pics/asset.jpg?twic=v1/output=preview)
"
data-twic-background="url(image:asset.jpg)"
></div>
Both examples load the blurry version by default and replace it with the optimized image when the JavaScript will handle the data-twic- attribute.
src for your blurry images. Search engines will index img tags but not those implemented via CSS. Read our 6 tips to optimize images for SEO.
