Separate the hero from the gallery
The image visible at the top of a page has a different job from the twentieth image in a gallery. Google recommends eager loading for images in the first viewport, especially the Largest Contentful Paint image, and lazy loading for images farther down the page.
Reserve the space
Include width and height attributes so the browser can allocate space before an image arrives. This helps avoid content jumping as images load. In responsive layouts, preserve the intended aspect ratio while allowing the displayed width to adapt.
Review an actual upload
Our suggested audit: choose one large editorial photograph, one transparent graphic and one product image. Compare exported versions at the sizes your layout actually displays. Inspect faces, text and fine edges rather than judging quality only by file size. Keep the original available so you can revise the export later.
Verify on a phone
Check the opening viewport on a narrow screen and a slower connection. Does the main image appear promptly? Does the title move when it arrives? Scroll through a gallery to check that later images load in time. Avoid applying one blanket loading rule to every image on the site.
AI-assisted educational content prepared for the Velonic resource library. How these guides are prepared.