Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. Web Performance Optimization

Using ffmpeg to compress, convert, and resize videos

Imago voragine.net
• , , ,

To compress for web at a reasonable broadband bitrate of about 1.5Mbps video / 128kbps audio:

ffmpeg -i source.mp4 -c:v libx264 -b:v 1.5M -c:a aac -b:a 128k target.mp4

To scale down a high-resolution source video to something more reasonable for Web (qHD for cellular, HD for broadband), the -filter:v argument is used:

ffmpeg -i source.mp4 -c:v libvpx-vp9 -b:v 0.33M -c:a libopus -b:a 96k \
-filter:v scale=960x540 target.webm

Native image lazy-loading for the web!

Imago voragine.net
• , ,

The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:

lazy: is a good candidate for lazy loading.
eager: is not a good candidate for lazy loading. Load right away.
auto: browser will determine whether or not to lazily load.

Not specifying the attribute at all will have the same impact as setting loading=auto.

Five Ways to Lazy Load Images for Better Website Performance

Imago voragine.net
• , ,

Native lazy loading of images and iframes is super cool. Nothing could be more straightforward than the markup below:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

As you can see, no JavaScript, no dynamic swapping of the src attribute’s value, just plain old HTML.

The loading attribute gives us the option to delay off-screen images and iframes until users scroll to their location on the page. loading can take any of these three values:

lazy: works great for lazy loading
eager: instructs the browser to load the specified content right away
auto: leaves the option to lazy load or not to lazy load up to the browser.