# @dankolz/webp-detection

> detects a browser's ability to show webp images

Latest version **1.0.17** (published 2025-04-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dankolz/webp-detection
pnpm add @dankolz/webp-detection
yarn add @dankolz/webp-detection
bun add @dankolz/webp-detection
```

Provides the commands `gen-image-pictures-and-styles`, `gen-image-pictures-and-styles-scss`.

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.17 |
| Published | 2025-04-03 |
| First published | 2020-12-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 162.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dan Kolz |
| Maintainers | dankolz |
| Keywords | browser, webp |

## Links

- npm: https://www.npmjs.com/package/@dankolz/webp-detection
- Repository: https://github.com/EmergentIdeas/webp-detection
- Homepage: https://github.com/EmergentIdeas/webp-detection#readme
- Issues: https://github.com/EmergentIdeas/webp-detection/issues
- npm.io page: https://npm.io/package/@dankolz/webp-detection

## Dependencies (2)

- [minimist](https://npm.io/package/minimist.md) ^1.2.5
- [@dankolz/escape-html-attribute-value](https://npm.io/package/@dankolz/escape-html-attribute-value.md) ^1.0.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.17 (latest) — 2025-04-03
- 1.0.16 — 2024-07-29
- 1.0.15 — 2024-07-24
- 1.0.14 — 2024-03-23
- 1.0.13 — 2024-03-21
- 1.0.12 — 2024-03-21
- 1.0.11 — 2023-11-29
- 1.0.10 — 2023-08-24
- 1.0.9 — 2023-08-04
- 1.0.8 — 2023-08-03
- 1.0.7 — 2023-03-07
- 1.0.6 — 2023-03-07
- 1.0.5 — 2023-03-03
- 1.0.4 — 2022-09-29
- 1.0.3 — 2021-05-17
- … 3 more at https://npm.io/package/@dankolz/webp-detection/versions

## README

# WebP Detection

Tools to detect webp support in the browser and tools to generate images, templates, and styles
which display the correct formats of the image in various browsers, including handling screens
which have a higher density (apple mostly) than 1 LED dot per pixel.




## Including an image via the template


```html
	__::images/thinking-of-getting-a-cat-big__
```

## Background pictures

It's possible to set a picture as the background of a box with the same functionality as the CSS
`background-image` property. This has some performance 
advantages in page load and image size. A class which does this can be imported like 


```less
@import "../node_modules/@dankolz/webp-detection/less/picture-background.less";
```

and then in the markup use like:


```html
	<div class="use-picture-as-background">
		__::images/thinking-of-getting-a-cat-big__
		Some other text
		<p> This is some text.</p>
	</div>

```

By default the template will suggest to the browser that the image will be displayed at its natural size. This
may not be correct if the image is being used as the background for a different sized box. While it will look 
like a background image, the file loaded may be too low rez if the box is bigger than the natural size or will
be larger than is necessary if the box is a smaller size.

While the CSS controls how the image is positioned and scaled, the picture element will determine what file is
loaded. This happens before the dimenions of the image as shown on the screen are determined. So, if we want
the browser to load the most efficient image possible, we need to hint in the markup. 

However, this is only import if the box is not the same width as the screen or the natural size of the image is
narrower than the width of the screen. This template will hint to the browser to use the correct size without 
your intervention in most mobile / small-screen layouts.



```html
	<div class="use-picture-as-background">
		__let v = {imageWidth: 800, imageHeight: 250, imageStyle: ';'}; v::images/thinking-of-getting-a-cat-big__
		Some other text
		<p> This is some text.</p>
	</div>

```

---
_Source: https://npm.io/package/@dankolz/webp-detection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._