Performance & Caching

Choose the right image format

SVG is a good default for scalable icons and flags. PNG is available when a platform explicitly needs raster images or when you want the 72×72 emoji image variant. Set the dimensions in your UI so the browser can reserve space before the file loads.

Prevent layout shift

Set width and height on images whenever possible. This reserves the image's space in the layout before the file is downloaded.

<img
  src="https://softhoursdiary-emojis.pages.dev/[emojis/svg/1f632.svg"
  alt="Surprised face"
  width="36"
  height="36"
  loading="lazy"
  decoding="async"
/>

Lazy loading and decoding

Use loading="lazy" for images below the fold. For the main content visible immediately on page load, eager loading can be appropriate. Async decoding helps keep image decode work from blocking unrelated rendering.

const image = SoftHoursDiary.createImage({
  type: "flag",
  id: "IN",
  quality: "l",
  alt: "Flag of India",
  width: 48,
  height: 32,
  loading: "lazy",
  decoding: "async"
});

Cache behaviour

The Pages configuration uses a one-day browser cache with stale-while-revalidate for raw emoji and flag files. It is shorter than a year because the URLs are stable filenames and an asset may be replaced by a future repository update.

Avoid unnecessary JavaScript

• For one known image, use a direct img URL; the helper is optional.
• Load the UMD helper once per page rather than once per component.
• Do not call fetch() just to display an image; the browser can load the image URL directly.
• Reuse the same resolved URL when rendering repeated instances.
• Keep alt text and dimensions in the original markup.

A reusable production style

.emoji-reaction {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  vertical-align: -0.25em;
}

.flag-icon {
  display: inline-block;
  width: 2rem;
  height: 1.5rem;
  object-fit: contain;
  border-radius: 3px;
}