Image Best Practices
Learn to implement image best practices for critical images, lazy loading, and low quality image placeholder.
Critical Images
We recommend using the TwicPicture component for critical images as it involves the native picture element under the hood.
<TwicPicture
src="your-master-image.jpg"
ratio="3/4, @md 1, @xl 16/9"
/>
In case you're not using any JS framework client-side, 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 and the
fetchpriority
attribute.
Lazy-load off-screen media
Off-screen or content images are ideal candidates for TwicPics Components and TwicPics Native. Your assets will be automatically resized and lazy-loaded by default.
However, the <TwicImg> component offers many benefits out-of-the-box, like optimized Cumulative Layout Shift (CLS), aspect-ratio modifier, Low-Quality Image Placeholder (LQIP), or transitions:
<TwicImg src="your-image.jpg"
mode="cover"
ratio="4/3"
placeholder="preview"
transition="fade"
/>
With TwicPics Native, you can achieve the same result even if it requires more effort and CSS knowledge.
Here is an HTML / CSS example template to integrate LQIP and CLS optimization into your websites using TwicPics Native:
<head>
<!-- Twicpics script installation -->
<script src="https://<your-own-twicpics-domain>/?v1" async defer></script>
</head>
<style>
/* required when using the padding-trick */
.isolation {
overflow: hidden;
}
.media,
.placeholder {
/* reset border, margin and padding */
border: none;
margin: 0;
padding: 0;
/* preview and final image must stack and fill their container */
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.media {
object-fit: var(--twic-mode, cover);
}
.placeholder {
background: no-repeat;
background-position: center;
background-size: var(--twic-mode, cover);
opacity: 1;
transition-property: opacity; /* makes transition smooth */
transition-duration: var(
--twic-duration,
400ms
); /* makes transition smooth */
will-change: opacity; /* makes transition smooth */
}
.media.twic-done + .placeholder {
opacity: 0; /* hides placeholder once image is loaded */
}
.cls-optimization {
overflow: hidden; /* allows border-radius for example */
position: relative;
padding-top: calc(
100% / var(--twic-ratio, 1)
); /* padding trick : reserves the display size */
width: 100%;
}
.cls-optimization img:not([src]) {
/* avoid broken images */
visibility: hidden;
}
/* YOUR OWN CSS */
.a-custom-class {
--twic-duration: calc(500ms);
--twic-mode: cover;
--twic-ratio: calc(4/3);
}
</style>
<body>
<div class="isolation a-custom-class">
<!-- makes the template work even in display:grid -->
<div class="cls-optimization">
<img class="media" data-twic-src="image:<your-asset>.jpg" />
<div
class="placeholder"
style="background-image:url(https://<your-own-twicpics-domain>/<your-asset>.jpg?twic=v1/output=<preview|main|mean>);"
></div>
</div>
</div>
</body>
