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

• UUID: e5f4a591-ff7b-4a5f-bfd6-24c411c1f6ed
• Links
  • Is Included by
    • JH-Articles: Web Packages ~ qia-browser-libraries
  • Includes
    • JH-Articles: Web Components ~ qia-image
    • JH-Articles: Web Components ~ qia-image-gallery
    • JH-Articles: Web Components ~ qia-image-compare-pair
• Timestamps
  • 20231102.Started this article
  • 20231211.Split this articles into linked pages
  • 20231211.Re-published this article

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

Related References

Web browser built-in image elements

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

• 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.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

• 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.

<figure>
  <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>