Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Img proposals #12

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Img proposals #12

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47facf8
a start :)
wolframkriesing Jan 22, 2018
4a45a6e
Update 0012-enhanced-img.md
wolframkriesing Jan 22, 2018
3e3eafa
Add couple of features
smolak Jan 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions proposals/0012-enhanced-img.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
- Start Date: 2018-01-22
- RFC PR:
- Elix Issues:


# Summary

Build an enhanced version of the `<img>` tag, the `<eix-img>` and provide features that mainly improve performance.
The usage will be compatible to the standard HTML element `<img>`, so it can be a drop-in replacement.
Just use `<elix-img src=whatever.jpg></elix-img>` instead of `<img src=whatever.jpg>`.


# Motivation

The use of `<img>` might have a serious impact on user experience, we want to improve that where possible.
We want the `<elix-img>` to improve web page speed and optimize network usage where possible,
without sacrificing but improving the user experience.

It is not a goal to provide enhanced visual features, like text overlay or alike. ???? Opinions requested !!!!

# Use cases

1. Gallery website
2. Banner carousel
3. Mix of content, e.g. news articles, etc.
4. Side-by-side comparison of native <img /> element, e.g. logo


# Detailed design

Features
1. Lazy-load - Don't download/render anything below the fold
2. Pre-cache - Pre-cache images below the fold ready for when the user needs them (Look at different ways to do this, Fetch, Cache, native async/decode attribute)
3. Loader - none by default, configurable by attribute and a little CSS (with default styles provided?).
4. All attributes of native img - see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
5. Various formats - provide best possible format for given browser? E.g. WebP if Chrome detected, with a fallback, perhaps reuse srcset attribute?
6. Downloadable - via attribute and a little CSS to show Download icon (with default styles provided?). We often do right click and hit download.
7. Licence - attribute with value to set given licence. Perhaps some CSS to show it (on / off). Attribute itself is just informative.
????


# Drawbacks

????

# Alternatives

If there is no interestion observer API available just fallback to a native <img /> element.


# Unresolved questions