npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@dankolz/webp-detection

v1.0.16

Published

detects a browser's ability to show webp images

Downloads

12

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

	__::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

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

and then in the markup use like:

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

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