Optimization on Stephen Ajuluhttps://ajulu.netlify.app/tags/optimization/Hello, I'm Stephen Ajulu, a seasoned multidisciplinary tech professional with over a decade of experience. I build impactful solutions using design, tech, and engineering in the pursuit of impact.Hugo -- gohugo.ioen-usajulu.b22uf@aleeas.com (Stephen Ajulu)ajulu.b22uf@aleeas.com (Stephen Ajulu)Stephen Ajulu.Sat, 25 Apr 2026 10:00:00 +0000How to Use Optimized Imageshttps://ajulu.netlify.app/posts/image-optimization-demo/Sat, 25 Apr 2026 10:00:00 +0000https://ajulu.netlify.app/posts/image-optimization-demo/<p>To keep your site fast and achieve high scores on Google PageSpeed Insights, you should use the new <code>img</code> shortcode for any local images you add to your posts.</p> <h2 id="why-use-the-img-shortcode">Why use the <code>img</code> shortcode?</h2> <ol> <li><strong>WebP Support:</strong> It automatically generates a WebP version of your image, which is significantly smaller.</li> <li><strong>Responsive Loading:</strong> It creates a <code>srcset</code> so mobile devices download smaller versions of the image.</li> <li><strong>Lazy Loading:</strong> Images only load when they are about to enter the viewport.</li> <li><strong>Automatic Dimensions:</strong> Prevents layout shifts (CLS) by adding <code>width</code> and <code>height</code> attributes.</li> </ol> <h2 id="how-to-use-it">How to use it</h2> <p>Instead of standard Markdown like <code>![Alt](path)</code>, use this:</p>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






  
  
  
    Stephen Ajulu

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

Stephen Ajulu

You can also pass a custom CSS class:

1






  
  
  
    Alt text
]]>