A note on https://www.youtube.com/watch?v=hQZ7Xg7q7zw

image_optimization-beyond_the_basics.md

Image Optimization: Beyond The Basics

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"
/>

Shader Playground

https://www.shadertoy.com/

Cloud Service

• Cloudinary https://cloudinary.com/
• ImgIX https://www.imgix.com/

Optimizer

• mozjpeg, 10 - 16% smaller https://github.com/mozilla/mozjpeg
• optinpng, 18% smaller https://github.com/papandreou/node-optipng
• webpack, img-loader

Image Liftcycle

1. Downloading Image
2. Reading header
3. Decoding image
4. VRAM upload
5. Composition
6. Display

• PNG magic number: 89 50 4E 47

Blur Up Technique

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/

Histogram Scope Reduction

Turn the image into black and white to reduce the size

CSS: mix-blend-mode

Not support on IE edge yet.

.color::after {
  background: linear-gradient(to left, red, blue);
  z-index: -1;
}
.color img {
  mix-blend-mode: luminosity
}

CSSgram

A lightweight lib to recreate Instagram filters. https://una.im/CSSgram/

Duo Tone

Darken highlight + Ligten shadow

img {
  --duo-highlight: #ff3ebf;
  --duo-shadow: #4000ff;
}

Constrast Swap Technique

• Reduce size by around 20%
• Small impact for repainting on browser

1. Improve compression
2. Correct via shader multiply

img {
  filter: contrast(100%);
}

Never use gifs

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>