Image Code Generator

Paste the address of an image you uploaded to Blogger, write its alt text and caption, and press Generate. The tool writes fast image code for you: the right size for every screen, space reserved so the page doesn't jump, and lazy loading for images further down. Paste the result in the post editor's HTML view.

Image address In the post editor, upload the image, click it, and copy its address. Or right-click an uploaded image and choose "Copy image address". Alt text 0 / 125 Describe what the image shows for readers who can't see it and for Google. Be specific, keep it under 125 characters, and don't start with "Image of". Caption (optional)

Caption style Width Height

Main image of the postTick this only for the first big image near the top of the post. It loads first with high priority, which helps your LCP score. Every other image loads lazily when the reader scrolls near it. Click to zoomReaders can click the image to see it full size. Cover only (hidden in the post)For a cover that shows on the home page, in related posts and in share cards, but not inside the post. Paste it as the very first thing in the post. Best at 1200 × 675. Decorative imageOnly for images that add nothing to the text. The alt text is left empty so screen readers skip it.

Code

Why this code is faster

Right size for every screen. Blogger can resize an image from its address. The code lists four sizes, and each phone or computer downloads only the one it needs.
No jumping. The width and height tell the browser how much space to keep, so text doesn't move when the image appears.
Cover only. A cover image marked this way still becomes the post thumbnail and share image, but the theme hides it inside the post, and loading="lazy" keeps readers from downloading it. See the Post Images guide for sizes and the safe zone.
Main image first. The image you mark as main loads with high priority. The rest wait until the reader scrolls near them.