{"version":"https://jsonfeed.org/version/1.1","title":"Stephen Ajulu","home_page_url":"https://ajulu.netlify.app/","feed_url":"https://ajulu.netlify.app/tags/optimization/feed.json","description":"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.","icon":"https://ajulu.netlify.app/images/me.jpg","authors":[{"name":"Stephen Ajulu","url":"https://stephenajulu.com","avatar":"https://ajulu.netlify.app/images/me.jpg"}],"items":[{"id":"https://ajulu.netlify.app/posts/image-optimization-demo/","url":"https://ajulu.netlify.app/posts/image-optimization-demo/","title":"How to Use Optimized Images","summary":"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.\nWhy use the img shortcode? WebP Support: It automatically generates a WebP version of your image, which is significantly smaller. Responsive Loading: It creates a srcset so mobile devices download smaller versions of the image. Lazy Loading: Images only load when they are about to enter the viewport. 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:\n","content_html":"\u003cp\u003eTo keep your site fast and achieve high scores on Google PageSpeed Insights, you should use the new \u003ccode\u003eimg\u003c/code\u003e shortcode for any local images you add to your posts.\u003c/p\u003e\n\u003ch2 id=\"why-use-the-img-shortcode\"\u003eWhy use the \u003ccode\u003eimg\u003c/code\u003e shortcode?\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eWebP Support:\u003c/strong\u003e It automatically generates a WebP version of your image, which is significantly smaller.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eResponsive Loading:\u003c/strong\u003e It creates a \u003ccode\u003esrcset\u003c/code\u003e so mobile devices download smaller versions of the image.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eLazy Loading:\u003c/strong\u003e Images only load when they are about to enter the viewport.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eAutomatic Dimensions:\u003c/strong\u003e Prevents layout shifts (CLS) by adding \u003ccode\u003ewidth\u003c/code\u003e and \u003ccode\u003eheight\u003c/code\u003e attributes.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"how-to-use-it\"\u003eHow to use it\u003c/h2\u003e\n\u003cp\u003eInstead of standard Markdown like \u003ccode\u003e![Alt](path)\u003c/code\u003e, use this:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-markdown\" data-lang=\"markdown\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\n\n\n\n  \n  \n  \n    \u003cimg src=\"/images/me.jpg\" alt=\"Stephen Ajulu\"  loading=\"lazy\"\u003e\n  \n\n\n\n\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003cp\u003e\u003cem\u003eNote: The \u003ccode\u003esrc\u003c/code\u003e path should be relative to the \u003ccode\u003eassets/\u003c/code\u003e or \u003ccode\u003estatic/\u003c/code\u003e directory depending on where you store them, but it works best with images in \u003ccode\u003eassets/\u003c/code\u003e for full processing.\u003c/em\u003e\u003c/p\u003e\n\u003ch2 id=\"example-in-action\"\u003eExample in Action\u003c/h2\u003e\n\n\n\n\n\n  \n  \n  \n    \u003cimg src=\"/images/me.jpg\" alt=\"Stephen Ajulu\" class=\"author-demo\" loading=\"lazy\"\u003e\n  \n\n\n\n\n\u003cp\u003eYou can also pass a custom CSS class:\u003c/p\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-markdown\" data-lang=\"markdown\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\n\n\n\n  \n  \n  \n    \u003cimg src=\"/images/me.jpg\" alt=\"Alt text\" class=\"my-custom-class\" loading=\"lazy\"\u003e\n  \n\n\n\n\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e","date_published":"2026-04-25T10:00:00Z","image":"https://ajulu.netlify.app/images/me.jpg","tags":["tech","hugo","optimization"]}]}