qia-image - A Set of Utilities for Images on The Web

What is qia-image in brief?

  • It is developed for a bigger blueprint than just this qia-image library.
  • It includes HTML custom elements (as known as web components) to enrich image representations in HTML documents
    • <qia-image>
    • <qia-image-gallery>
    • <qia-image-compare-pair>
  • It is developed in a separate project on its own in TypeScript and React.js for some advanced components, packaged as well as other qia libraries in qia-browser-libraries and released as a part of it together with other qia libraries
    • which is a more resonable model for component development and distribution in my opinion
    • I developed the idea model in my last job but abandoned by my team therefore I am giving this model a new shine in my private projects

qia-image code workspace screenshot on 20231103

Related References

Web browser built-in image elements


  • The <img> HTML element embeds an image into the document.
  • See also
    • <picture>, <object>, and <embed> elements
    • object-fit, object-position, image-orientation, image-rendering, and image-resolution: Image-related CSS properties.


  • The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element.


  • The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element.
  • The figure, its caption, and its contents are referenced as a single unit.
  • Usage notes
    • Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.
    • A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child).
      • The first <figcaption> element found in the figure is presented as the figure's caption.
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>

* cached version, generated at 2024-01-08 17:41:48 UTC.

Subscribe by RSS