#image-optimization

#image-optimization

Google's selection of an image preview is completely automated and takes into account a number of different sources to select which image on a given page is shown on Google (for example, a text result image or the preview image in Discover). You can influence which image gets selected by providing your preferred image through one of the following metadata sources: Specify the schema.org primaryImageOfPage property with a URL or ImageObject, or specify an image URL or ImageObject property and attach it to the main entity, or specify the og:image meta tag.

I'm currently building a web app using NuxtJS 2 for the frontend and NestJS for the backend, relying on third-party APIs (like Replicate) for the heavy lifting. I'm using Cloudflare R2 to store the generated output images. I'm running into some performance bottlenecks when rendering specific landing pages that contain heavy, dynamic image galleries. For instance, I'm trying to optimize the SEO and load speed for my AI Pet Portrait Generator free tool page.

Slow pages frustrate visitors, increasing bounce rates and reducing conversions, while fast-loading sites enhance engagement, mobile experience, and revenue potential. Page load improvement involves compressing files, caching assets, and minimizing code, all contributing to performance gains that retain users and satisfy search algorithms. Beyond technical tweaks, user-centric strategies such as lazy loading and prioritizing above-the-fold content ensure visitors experience immediate value without waiting for every element to render.

The technique emphasizes creating low quality image placeholders (LQIPs) using a single CSS custom property, making it simple and non-invasive.