Blog Images Done Properly: Sizing, Formats, Alt Text and Licensing

Images are usually the heaviest part of a blog post and the most neglected. They slow pages down, they are often missing alt text, and a surprising number are used without permission. Getting images right improves speed, accessibility and search visibility, and keeps you out of legal trouble.

Choose the right dimensions

The most common mistake is uploading photos straight from a camera or phone: 4,000 pixels wide and several megabytes, displayed in a column 750 pixels wide.

Work out the maximum width your content column actually displays at. For most blog themes it is between 700 and 1,200 pixels. Export images at twice that width if you want them to look crisp on high-density screens, but no larger. A 760-pixel column gets 1,520-pixel images at most.

If your platform generates responsive image sizes automatically (most do), upload a reasonably sized master and let it create the smaller versions. If you build your site by hand, provide two or three sizes with the srcset attribute so phones download smaller files.

Pick a modern format

• WebP is supported by all current major browsers and typically produces files much smaller than JPEG at similar quality. It is a safe default for photos and graphics.
• AVIF often compresses even better, especially for photos, though encoding is slower. Browser support is now broad.
• JPEG remains a fine fallback for photos.
• PNG is for images that need lossless quality or transparency: screenshots with small text, logos, diagrams. Even then, a lossless WebP is often smaller.
• SVG is ideal for logos, icons and simple illustrations, because it scales without losing quality.

Compress sensibly

Compression is a trade-off between file size and visual quality. For photos, a quality setting around 70 to 80 in most tools gives a large size reduction with no visible difference at normal viewing distance. Screenshots with text need higher quality to stay legible.

Free tools such as Squoosh (in the browser) or command-line tools like cwebp and ImageMagick make this easy. Many blogging platforms also have plugins that compress on upload.

A useful target: most blog photos should end up between 50 and 200 KB.

Help the browser load images efficiently

• Set width and height attributes on every image. This lets the browser reserve space before the image loads, which prevents the page jumping around (a problem measured as Cumulative Layout Shift).
• Lazy-load images below the fold with loading="lazy". The browser only downloads them when the reader scrolls near them.
• Do not lazy-load your main image at the top of the post. It is often the largest element on screen, and delaying it hurts the Largest Contentful Paint measurement.

Write alt text that is genuinely useful

Alt text is a short text description read aloud by screen readers and shown when images fail to load. It also helps search engines understand images. It is first and foremost an accessibility feature, so write it for a person who cannot see the image.

Good alt text

• Describes what matters in context. In a post about knife skills, a photo might get: "Hand holding a chef's knife in a pinch grip, thumb and forefinger on the blade." In a post about kitchen design, the same photo would need different alt text.
• Is concise. One sentence is usually enough. Screen readers announce "image" already, so do not start with "Image of…".
• Includes text that appears in the image, if that text matters.
• Uses keywords only where they naturally describe the image.

Bad alt text

• Empty alt on informative images.
• Keyword lists: "best chef knife knife skills cooking knife sharp knife".
• Filenames: "IMG_4392.jpg".
• Repeating the caption word for word.

Decorative images

Purely decorative images, such as background flourishes or dividers, should have an empty alt attribute (alt="") so screen readers skip them.

Charts and diagrams

For complex images, give a short alt description and explain the key information in the surrounding text or a caption. "Bar chart comparing monthly page views for three blogs; details in the table below."

Name files sensibly

Before uploading, rename files descriptively: pinch-grip-chef-knife.webp rather than IMG_4392.webp. It is a small help for image search and makes your media library manageable.

Licensing: the part people get wrong

Finding an image in a search engine does not mean you can use it. Copyright applies automatically to photos and illustrations, and using them without permission can result in takedown notices or demands for payment.

Your safe options:

1. Your own images. Photos you took, screenshots of software you use, diagrams you drew. These are also the best images for demonstrating real experience.
2. Free licensed libraries. Sites such as Unsplash and Pexels offer photos under their own licences that allow free use, including commercial use, with some restrictions (for example, not selling the photos unaltered). Attribution is appreciated and often requested; giving it is good practice. Read the current licence terms on the site.
3. Creative Commons images. Check the specific licence. Some require attribution, some forbid commercial use, some forbid modification.
4. Paid stock. Read the licence for limits on usage.
5. Generated or commissioned artwork. If you use AI-generated images, check the terms of the tool you used, avoid generating images that imitate identifiable people or trademarked characters, and be honest with readers that images are illustrations, not photos.

Keep a simple record of where each image came from and its licence. A spreadsheet with filename, source, licence and date is enough.

Screenshots

Screenshots of software are generally acceptable for commentary and tutorials, but blur personal data, account details and anything confidential. Crop tightly so readers can see what matters, and use a consistent window size so a tutorial's screenshots look like a set.

A checklist before publishing

• Exported at no more than twice the display width
• WebP or AVIF (or optimised JPEG/PNG)
• Typically under 200 KB for photos
• Width and height attributes set
• Lazy loading on all images except the first
• Descriptive filename
• Useful alt text, or empty alt for decorative images
• Licence recorded

Ten minutes of image hygiene per post makes your blog faster, more accessible and safer, and readers notice all three.