ai / ai/webp-in-css

Not compatible with SSR

Open
#17 10 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
343
Forks
26
PR merge metrics
No merged PRs in 30d

Description

Well, this library is not SSR compatible, and there are only two reasons why not:
- `README` tells to add it to the `head` or `bundle`, while it has to be inlined just after `body` tag
- it uses `onLoad/onError` handlers which are __async__

## Let's make it work right!
Long story short - here is working sandbox - https://codesandbox.io/s/crazy-ganguly-hmhe8

- it __inlines__ `base64 img` before the body to tell the browser about it. The `img` is __invisible__.
- it "checks" `img` synchronously after creating, and it does work! (only with a real `img` tag, preload does not help).
- so it sets class to the body __here and now__, and the following HTML would use `webp`
- as long as dataURI inlined in the same document - it does not affect gzip size.

## Tested
In `Chrome`(webp ✅), `FireFox`(webp ✅), and `Safari`(no webp, as expected)

## Outcome

This library becomes SSR friendly!

Happy to open PR with a more compact version of the sandboxed example, however, the main changes are expected at the README level

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.