Best Practice Frontend "Avoid Base64" misleading

[midnightsyntax]

Roadmap URL

https://roadmap.sh/best-practices/frontend-performance

Suggestions

First of, excellent website! 😊 🫶

The text about Base64, specifically browser caching, is somewhat incorrect/misleading.

Base64 encoded images are ... included in the initial page load, which can cause delays for users with slower internet connections.

I find the "initial page load" part a bit confusing since it is not clear what it means.
The Page Load is a well defined metric but what is the 'initial" part?

Using Base64 images increases the filesize of the resource its being used on, which affects downloading time.
By itself these images does not slow down rendering since once the HTML is loaded, the images are immediately available with no extra requests.

So while filesize is increased, the number of requests can be reduced by using Base64 images.

Base64 encoded images do not benefit from browser caching

They do (indirectly) when the document or stylesheet defining it is being cached.
Since the image data is included with the data for the file it contains in, caching that file also caches the image.

Every time the page is loaded, the images will be re-downloaded

If the browser has cached the resource defining the image, the image is cached (within the data of the resource).
If the browser has not cached that resource the whole resource needs to be downloaded.
There is no download (or re-download) of just the image part