How to Use Optimized Images.

To keep your site fast and achieve high scores on Google PageSpeed Insights, you should use the new img shortcode for any local images you add to your posts.

Why use the img shortcode?

1. WebP Support: It automatically generates a WebP version of your image, which is significantly smaller.
2. Responsive Loading: It creates a srcset so mobile devices download smaller versions of the image.
3. Lazy Loading: Images only load when they are about to enter the viewport.
4. Automatic Dimensions: Prevents layout shifts (CLS) by adding width and height attributes.

How to use it

Instead of standard Markdown like ![Alt](path), use this:

1

Note: The src path should be relative to the assets/ or static/ directory depending on where you store them, but it works best with images in assets/ for full processing.

Example in Action

You can also pass a custom CSS class:

1