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

@graphcommerce/image

v9.0.1

Published

Since we're using a ton of images on the website we wanted to optimize the images further than what `next/image` has to offer.

Downloads

6,590

Readme

@graphcommerce/image

Since we're using a ton of images on the website we wanted to optimize the images further than what next/image has to offer.

Goals

  • Only provide an image, no wrapping divs which changes how images work.

  • Support the next/image layout properties.

  • Optimize images further than what next/image does.

Optimizing the images on high dpi sreens (1.5x-2.5x)

It seems that it doesn't really matter if we lower the quality of images for 2x screens. So we lowered the quality to 44 as recommended.

To view the difference between quality=100 and quality=44, open this on a high dpi screen: https://u5uol.sse.codesandbox.io/ and see the difference between the 'High resolution' variants.

Serving the right images for low dpi screens (1x)

Jake Archibald's blog https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/ recommends serving high quality, but low resolution images on low dpi screens: high resolution screens and low resolution screens

  • high dpi screens need high res images but it is very acceptable to have quality=44 images
  • quality=80: low dpi screens need low res images but also need to have high quality images.

In our testing (code), for low dpi screens it doesn't really seem to matter if we serve high res, quality=44.

Advantage: We need significantly less resizes, which is good for the backend. Disadvantage: The image size for the low res, quality=44 images is about 30% larger than high res, quality=80

We deemed this to be acceptable for desktop as internet connections are fairly acceptable and we're winning a great deal by lowering the quality already.

Capping image fidelity on ultra-high resolution devices (2.5x-+)

https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html

Defaulting to 50vw the sizes attribute <img sizes=".."/>

The sizes attribute allows browsers to download images even before the CSS has finished loading. This means that the browser is able to download images as early as an img with only an src attribute.

When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. Why can't we just do this using CSS or JavaScript?