The method
To use these prompts effectively, provide them to ChatGPT with context about your website and the specific images you want to optimize. Tailor the prompt by specifying image formats, dimensions, and compression levels that align with your site’s needs.
The prompts
Prompt 1
Analyze the following image URLs from my website [insert website URL here]: [insert image URLs here]. Identify potential causes of Cumulative Layout Shift (CLS) related to these images. Provide specific recommendations for optimizing these images, including suggested dimensions, formats (e.g., WebP, JPEG), and compression levels. Also, suggest CSS strategies (e.g., aspect-ratio property, reserved space) to prevent layout shifts caused by these images loading.
Prompt 2
I'm trying to improve the CLS score of my website [insert website URL here]. I suspect my images are contributing to the problem. Generate a list of actionable strategies to prevent image-related CLS, focusing on techniques like setting explicit dimensions in HTML, using the `aspect-ratio` CSS property, and preloading critical images. Provide code examples where applicable and prioritize approaches that balance image quality with optimal loading performance. Consider different image formats (JPEG, PNG, WebP, AVIF) and their suitability for various image types on my site.
Prompt 3
Create a detailed guide on implementing the `aspect-ratio` CSS property to prevent image-related CLS. Include a step-by-step process for calculating the correct aspect ratio for different image sizes and how to apply it in CSS. Provide examples of how to handle responsive images and ensure consistent layout across different devices and screen sizes. Include best practices for maintaining image quality while minimizing file size and potential layout shifts. Focus on practical implementation for a website using [mention CMS or framework, e.g., WordPress, React].