How to build an image block (with ALT + caption) in a Blogger theme
Images are a key part of a site that looks good and reads well, but a good image is not just pretty. It needs correct ALT for SEO and accessibility, and a suitable ratio for a tidy look. This article teaches you how to add an image block to a Blogger theme with BlogKub, with ALT, a caption, and ratio choices.
Quick summary: the Image block in BlogKub lets you set the image URL, ALT text (important for SEO/accessibility), a caption below the image, and choose a 16:9 / 4:3 / 1:1 ratio. The system crops the image to fit the chosen ratio for a tidy look, then you Export it to use.
What the image block is, and when to use it
The image block is an element for placing a single image in the theme, with ALT, caption, and ratio settings. Use it when you want to place an image on a page (such as the homepage, a static page, or parts of the theme) with control over how it displays. Unlike inserting an image into article content through the Blogger editor, the image block is part of the theme structure you arrange.
The image block is valuable because it handles the details people often forget, especially ALT and the ratio. Having a clear field for ALT reminds you to add it every time, and choosing a ratio keeps images in the same spot at a consistent size instead of jumping around, so the page looks tidy and professional.
ALT: the small detail that matters for SEO and accessibility
ALT (alternative text) is text that describes what the image is. It does not show to general readers, but it plays two important roles. The first is SEO: search engines cannot read what an image depicts, so they rely on ALT to understand it, which affects whether your image appears in image search (Google Images). The second is accessibility: users who cannot see use screen readers that read the ALT aloud, so they can perceive the image content.
Writing good ALT means describing the image meaningfully and concisely. For example, "Sunset view at Patong Beach, Phuket" is better than "image" or "image1", and you should not stuff keywords unnaturally, because it looks like spam. Good ALT states what is really in the image, which helps both search engines and readers using a screen reader. This connects to the principle of making images show in Google that we mention in the Lightbox and image slider articles too.
How to add an image block, step by step
- Add the image block. Drag the "Image" block from the library into the spot you want, such as the homepage or a section of the theme.
- Set the image URL and ALT. Paste the image URL and add ALT that conveys the real meaning of the image. Do not leave it blank, because it matters for SEO and accessibility.
- Add a caption and choose a ratio. Add a caption below the image if you want, and choose a 16:9, 4:3, or 1:1 ratio to match the image type and position.
- Export the XML and check. Click Export, upload it to Blogger, then check that the image shows at the right ratio, crisp, with correct ALT and caption.
Choose a ratio to match the image type
The image block offers three ratios, and the system crops the image to fit the chosen ratio for a tidy look. Choosing one that matches the image type makes it look its best.
- 16:9 (wide landscape): good for scenery, atmosphere shots, banners, or cover images, giving a spacious, cinematic feel.
- 4:3 (standard): a classic, balanced ratio, good for general images that do not need to be especially wide or square.
- 1:1 (square): good for product images, profile pictures, or images that want symmetry, a ratio popular on social media.
The benefit of locking the ratio is consistency. When images in the same spot share a ratio, the page looks orderly, with no oddly tall or short images. That said, cropping to a ratio means part of the image may be cut, so choose an image with the important subject centered, or a ratio close to the original, to reduce cutting out something important.
ALT vs caption: how they differ
Many people confuse ALT with the caption, because both concern the text of an image, but they serve different jobs. ALT is alternative text that general readers do not see, used by search engines and screen readers. The caption is text shown below the image that every reader sees, used to give context or describe the image further.
The two complement each other well. ALT describes what the image is for those who cannot see and for search engines, while the caption gives information every reader benefits from, such as the source, a place name, or an interesting note. You do not need to write both the same, because they serve different jobs. ALT focuses on describing the image content directly, while the caption adds context for the reader. Using both appropriately makes your images both SEO-friendly and informative for readers.
Speed: keep images light
Images are one of the biggest factors in site speed. A large image makes the page load slowly and affects Core Web Vitals, especially LCP (Largest Contentful Paint), which is often affected by a big image near the top of the page. So before uploading, resize the image to fit what will actually display and compress the file smaller without losing too much quality.
Using an image sharp enough to be crisp but not larger than necessary is a good balance. An image much larger than what displays wastes loading for no benefit. There are plenty of free image compression tools that reduce file size. Keeping images light is a good habit that affects both the reader experience and your speed-side SEO score. When images are beautiful, have correct ALT, and are light, you benefit on every front.
Images, storytelling, and engagement
Images are not just decoration, they are a powerful storytelling tool. Research finds that people remember information with visuals much better than plain text, and content with images tends to get higher engagement and shares. Good images explain what text struggles to, create emotion, and make a page more readable. Caring about choosing and placing images therefore affects both the reader's understanding and impression.
That said, an image should support the content, not just fill space. A relevant, meaningful image is worth more than a pretty one unrelated to the subject. Choosing images that fit the content and placing them at the right moments lets images do real storytelling. Combined with good ALT and a suitable ratio, images become elements that are beautiful, meaningful, and SEO-friendly all at once.
Image copyright: something to care about
An important thing bloggers often overlook is image copyright. Using an image from the internet without checking the rights can infringe copyright and lead to legal trouble. Use images you took yourself, licensed images you bought, or free images from sources that permit use (such as images under an open license), and follow each source's conditions, like giving credit if required.
Using images correctly not only avoids problems but reflects the site's professionalism and credibility. There are plenty of quality free image sources today, so choosing images from legitimate sources is not hard, and it is a good habit to have from the start of building a site. When you care about quality, relevance, ALT, speed, and copyright, you use images fully and correctly.
Common problems and how to fix them
The image does not show
Check that the image URL is correct and reachable externally. If you use an image hosted somewhere that requires login or is restricted, it may not show. Use an image hosted openly and reachable.
The image crops out something important
The system crops the image to fit the chosen ratio. If something important is cut, try a ratio closer to the original, or use an image with the important subject centered.
Forgetting to add ALT
Always add ALT, because it matters for SEO and accessibility. If you leave it blank, the image misses its chance to be discovered and screen reader users cannot access it.
Images slow the page down
Resize and compress images before uploading, because large images affect speed and LCP the most.
Best practices
- Add ALT that conveys the real meaning of the image every time. Do not leave it blank and do not stuff keywords.
- Choose a ratio to match the image type (16:9 scenery, 4:3 general, 1:1 product/profile).
- Use a caption to give extra context every reader sees.
- Resize and compress images before uploading to keep speed and LCP good.
- Choose images with the important subject centered to reduce cropping it out.
Wrapping up
The image block helps you place images in the theme with control over the important details. With BlogKub, you set the image URL, ALT that matters for SEO and accessibility, a caption below the image, and a 16:9, 4:3, or 1:1 ratio, and the system crops the image to fit for a tidy, consistent look. The key to using images well is always adding meaningful ALT, choosing a ratio to match the image type, and managing file size to keep speed. Do all of this and your images will be beautiful, follow SEO best practice, be accessibility-friendly, and not weigh the site down, which is the standard of a quality site.
Frequently asked questions (FAQ)
Why does ALT matter?
ALT (alternative text) matters for both SEO and accessibility, because it helps search engines understand what the image is (affecting image search) and lets screen reader users who cannot see it perceive the image content. Write ALT that conveys the real meaning of the image.
Can I choose the image ratio?
Yes. You can choose 3 ratios: 16:9 (wide landscape, good for scenery/banners), 4:3 (standard), and 1:1 (square, good for product/profile images). The system crops the image to fit the chosen ratio for a tidy look.
Can I add a caption below the image?
Yes. Add a caption to show below the image, to give context or describe it. Unlike ALT, every reader sees the caption, while ALT is alternative text for search engines and screen readers.
How is the image block different from placing an image in a post?
The image block is a theme element (such as on the homepage or a static page) whose ratio, ALT, and caption you set in BlogKub. Placing an image in a post inserts it into the article content straight from the Blogger editor. The two are used in different contexts.
What image size should I use?
Use an image sharp enough to be crisp but not larger than necessary. Compress the file appropriately before uploading to keep the page fast, because large images affect Core Web Vitals, especially LCP.
