https://github.com/steren/simply-img

Why use <picture> or srcset when <img src> does the job?
https://github.com/steren/simply-img

Last synced: about 1 month ago
JSON representation

Why use <picture> or srcset when <img src> does the job?

• Host: GitHub
• URL: https://github.com/steren/simply-img
• Owner: steren
• License: apache-2.0
• Created: 2023-02-13T01:36:39.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-22T00:33:24.000Z (over 1 year ago)
• Last Synced: 2024-10-05T11:41:48.361Z (about 2 months ago)
• Language: JavaScript
• Size: 3.24 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Simply use ``

When was the last time you had to worry about HTTP request / response compression? Probably never.

That's because your browser [does all of that for you](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding):

1. On every request, your browser tells the server which compression it supports by sending an `Accept-Encoding` header.

2. The server responds with the content compressed with best the algorithm that the browser supports.

Why not do the same for image formats? 

Instead we have to do things like this for images:

```html

  

  

  

```

(and that's without even considering `1x` and `2x` images)

This complexity pushed onto developers leads them to either have to thing very hard about images or to use an image library (like [next/image](https://nextjs.org/docs/api-reference/next/image)).

Why not simply do this instead?

```html



```

The browser should tell the server all it needs to know to decide which image is best to return:

- [x] which image formats it supports

- [x] which screen density is used (1x, 2x, etc.)

- [ ] which size the image will be rendered (if known)

- [x] if the client has enabled [data saver](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data)

- [ ] if the user is on a slow connection

- [ ] if dark mode is used

- [ ] ...

This is called [content negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation).

This repository explores an implementation of that.

## Read more:

* [Accept-Encoding header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding)

* [Content negotiation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation)

* [`Accept` Values that browsers send for images](https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values#values_for_an_image)

* [HTTP Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) as a way to extend `Accept-*`

* [Responsive Image Client Hints](https://wicg.github.io/responsive-image-client-hints/)

* [Client hints on web.dev](https://web.dev/performance-optimizing-content-efficiency-client-hints/)