How to Create Great Images for Your Blog

Readers decide whether to keep reading a blog post in roughly the time it takes to scroll past the hero image. That single visual carries enormous weight — it sets the mood, signals quality and tells the reader whether you are someone worth listening to. Yet most blog images are an afterthought: a quick stock search, a random photo, a screenshot at the wrong size. The good news is that fixing this is one of the highest leverage things you can do for your blog.

Why image quality moves the dial

Three reasons. First, perception: a sharp, well-composed image makes the entire article feel more credible. Second, retention: posts with relevant images get measurably more time-on-page than wall-of-text articles. Third, sharing: posts shared on social media show their featured image far more prominently than their headline, and bad images get fewer clicks regardless of how good the writing is.

Search engines have caught up too. Google's image search drives meaningful traffic, particularly for how-to and visual topics. Properly captioned, well-sized images can rank in image search and bring readers who never would have found you through text search.

Where to get images you can actually use

Free, properly licensed image sources have come a long way. The big three are Unsplash, Pexels and Pixabay. All three offer photos under permissive licenses that allow commercial use without attribution, though crediting the photographer is always a kind move and good practice.

For more original content, take your own photos. A phone camera under window light, used with intention, beats almost any tired stock photo. Stock photography has a "look" that readers subconsciously recognise as generic — original photography signals real effort and real expertise.

For technical and conceptual topics, screenshots, diagrams and simple data visualisations are often more useful than photographs. Tools like Excalidraw, Figma and even PowerPoint can produce shareable diagrams in minutes.

Crop with intention

The single biggest improvement most blogs can make is cropping. Most stock photos are wider than the article needs and contain dead space at the edges. Crop tight on the subject, cut away boring corners, and use the rule of thirds to put the focal point off-centre.

Move the subject off-centre using rule of thirds. Lift the horizon if the sky is empty, drop it if the foreground carries the story. Free editors like Photopea (free Photoshop alternative in the browser), Canva, GIMP, and the iOS/Android Photos apps all have generous crop tools.

Size matters — both ways

A 4 MB hero image will hurt your search ranking more than a clever headline will help it. Page speed is a ranking factor; image weight is the most common cause of slow pages.

Sensible image sizes by use case:

• Hero / featured image: 1200–1600 pixels wide, JPG at 75–85% quality. Target file size: 200–400 KB.
• In-post images: 800–1200 pixels wide. Target file size: 100–250 KB.
• Avatars and small icons: 200–400 pixels wide. SVG if it is a logo, PNG if it is a photo.
• Open Graph (social share) image: 1200×630 pixels, JPG at 80% quality. This is the size Facebook and Twitter prefer.

For everything except logos and line art, JPG at high quality is the right format. For images with sharp edges (logos, screenshots of text, line drawings) PNG keeps edges crisp. For transparency, PNG-24 or WEBP. Modern formats like WEBP and AVIF compress dramatically better than JPG at the same visual quality — use them if your platform supports them.

Compressed properly, a great image lands at 200–400 KB without any visible loss. Use the image compressor on Dailiyo to get there in one click — quality stays identical at 75–85%, but file size drops 60–80%.

Think in series, not single images

A single beautiful image is good, but a series of three or four images placed through the post turns readers into scrollers. Plan one hero image at the top, one supporting illustration mid-post, and one closing image that visually answers the question your headline asked.

For longer posts (1,500+ words), an image every 400–600 words is a sensible rhythm. Each image breaks the wall of text, gives the eye a rest, and provides a natural place for the reader to pause and absorb.

Visual consistency matters too. If your hero is bright and saturated, do not pair it with a moody black and white halfway through. Pick a visual style — warm-toned photography, flat illustrations, screenshots with a consistent border — and stick to it within a post.

Captions are the secret weapon

Captions are read more than body copy. Studies of newspaper layouts have shown captions get up to 16% more attention than the article body itself. Use them.

Treat each caption as a tiny tweet inside your post. Add context, a dry observation, a key data point you want to make sure readers do not miss. A great caption can carry a post even when the reader is skimming.

Bad caption: "Diagram showing the process."
Good caption: "The first 10 minutes after diagnosis is where most decisions get made — speed matters."

Alt text — for accessibility and SEO

Alt text is the description screen readers use to describe images to visually impaired users. It is also what search engines use to understand what an image is about. Write alt text for every image.

A good alt text describes the image in one sentence, focused on what the image is conveying rather than what is technically pictured. "Person climbing a mountain" is okay; "Hiker pausing on a snowy ridge to look at the sunrise" is much better. For purely decorative images (icons, dividers), use an empty alt attribute so screen readers skip them.

Image SEO basics

• File name matters. "DSC_4382.jpg" tells Google nothing. "sourdough-loaf-cross-section.jpg" does.
• Use descriptive captions. They double as both reader signal and image-search context.
• Compress before uploading. Slow loading images get downranked.
• Add structured data. Schema.org ImageObject markup helps for recipes, products and how-to images.
• Lazy load below-the-fold images. Modern browsers do this automatically with `loading="lazy"` on img tags.

Test before you publish

Open the draft on a phone before hitting publish. Most blog readers are on mobile, and an image that looked beautiful on your 27-inch monitor can crop awkwardly, load too slowly on 4G, or look pixelated on a small screen. Two minutes of mobile preview saves a lot of regret.

Run a Lighthouse audit (built into Chrome DevTools) on the published post. If your images are dragging the Performance score below 90, compress them harder or convert to WEBP. Pair that with the Image Compressor on Dailiyo to bring a 2 MB hero down to 200 KB without a visible quality drop.

One last principle

If the image is not adding meaning, do not use it. Decorative stock photos at the top of every section are a cliche that signals low effort. Better to write one extra sentence than to drop in a generic photo. Readers notice intention, and noticing intention is what makes them stay.

Sources and further reading

• Google Web.dev — Use modern image formats and Lazy loading images
• WCAG 2.1 — Non-text content (web.dev / w3.org accessibility guidance)
• Unsplash, Pexels, Pixabay — license documentation
• Lighthouse audit documentation — performance best practices

Note: The free image sources mentioned have different license terms — always check the license of the specific image you use, especially for commercial projects, to make sure attribution and usage requirements are satisfied.