https://www.youtube.com/watch?v=hQZ7Xg7q7zw
Images are by far the greatest bottleneck to performance on the web, and with the average web page size now about 2.5MB large—images taking up 65% of that.
WebP is a new image format which is smallest and provdes either lossless or lossy compression.
<img
src="dog-800w.jpg" alt="A dog"
srcset="
dog-320w.jpg 320w,
dog-400w.jpg 400w,
dog-800w.jpg 800w"
size="
(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
/>
- Cloudinary https://cloudinary.com/
- ImgIX https://www.imgix.com/
- mozjpeg, 10 - 16% smaller https://github.com/mozilla/mozjpeg
- optinpng, 18% smaller https://github.com/papandreou/node-optipng
- webpack, img-loader
- Downloading Image
- Reading header
- Decoding image
- VRAM upload
- Composition
- Display
- PNG magic number:
89 50 4E 47
Scale down the image to a fraction of the original size, then applying a blur filter for the transition.
https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
Turn the image into black and white to reduce the size
Not support on IE edge yet.
.color::after {
background: linear-gradient(to left, red, blue);
z-index: -1;
}
.color img {
mix-blend-mode: luminosity
}
A lightweight lib to recreate Instagram filters. https://una.im/CSSgram/
Darken highlight + Ligten shadow
img {
--duo-highlight: #ff3ebf;
--duo-shadow: #4000ff;
}
- Reduce size by around 20%
- Small impact for repainting on browser
- Improve compression
- Correct via shader multiply
img {
filter: contrast(100%);
}
Never use gif on frontend. Use mp4 or webm instead.
<video>
<source
src="src/video.mp4"
type="video.mp4" />
<source
src="src/video.webm"
type="video.webm" />
</video>