DPiCSS

The main idea behind DPiCSS is to beautifully display large-sized images or animated images only on user demand without bloating and reducing page performances.

Poppy cinemagraph

Here is a simple usage example of DPiCSS © Olive White Photographies

DPiCSS achieves this combining modern native HTML5 and CSS features:

• Uses fully semantic HTML5 with <details>, <picture> and <img> tags to display an animated or higher definition image.
• As a details tag HTML5 element, DPiCSS can display extra summary content and toggled content.
• Uses native lazy loading of <img> tag that allows to download the thumbnail only when it is into the viewport and the larger asset only when its thumbnail is clicked.
• Responsive type scale: Primary font size of every DPiCSS instance adjusts automatically based on its container.
• Automatic color contrast: Set your preferred primary color and DPiCSS automatically adjusts the proper contrasted black or white color.
• Works with any animated or still image.
• Integrates seamlessly into existing pages.
• Works without JavaScript, works even if JavaScript is disabled.
• Main parameters are customizable with few CSS variables.
• Displays a loader while thumbnail and large sized image are being loaded.
• Supports light and dark color scheme preferences.
• DPiCSS is easy to use and has a nice range of parameters and customizations. You can view some examples and the gallery.

Installation

Just include the CSS file dpicss.css into the page.

CDN:

https://cdn.jsdelivr.net/gh/olivier3lanc/dpicss/dist/dpicss.css

npm:

npm install dpicss

Local:

git clone git@github.com:olivier3lanc/dpicss.git
cd dpicss
npm install
npx @11ty/eleventy --serve

Now you can go to usage.

How it works

The following demo logs what happens during the multiple steps to the final display of the large sized image:

A simple log to monitor what happens:
🕙 Waiting for thumbnail into the viewport