Whatever kind of website you have, it’s likely that your content is a mixture of text and images. For photographers, artists and other creatives, the images on your website probably form the most important part of your content and so it’s vital to know how to present them properly.

Sure, you can go ahead and upload photos and graphics via the WordPress dashboard without any further thought, but if you want to make sure your website is fast loading, easy to read and optimized for search engines, you’d do well to read this short guide for best practices when it comes to using images in your website.

Saving And Uploading Images

While WordPress has made it possible to upload huge images directly from your computer and automatically display them to fit the width of your blog, we do not recommend that you upload unprocessed images.

Any web browser is capable of displaying images at a smaller size than they actually are if so instructed in the code, but doing so does not lead to a reduction in the actual file size. A 500kb image displayed at 50% of its full width and height will still be 500kb. Bloggers who aren’t savvy with HTML and WordPress may well assume that because their images don’t appear large on screen, it means they will be quick to download, but this isn’t always the case.

To check your image size, right-click or control-click on an image within your blog and choose view/open image from the menu (the wording will vary slightly depending on which browser you’re using). If the image that opens is much bigger than the one you see on your blog, this means your images are not sized properly.

If you have an image-heavy blog and don’t resize your images before uploading them, the combined size of your web page could be unnecessarily large.

It’s well worth taking a couple of extra minutes to resize and compress your images before you upload them. This can easily be done in Photoshop or any other image editing software that you use. You can also use free online tools like PicMonkey and Dynamic Drive’s Image Optimizer.

Resizing images manually gives you full control over compression and will reduce your upload time greatly, but if you wish, you can also choose to use the resized images that WordPress automatically generates with every upload. When you insert a picture into a post, you have the option to insert full-size, large, medium or thumbnail sized images. You can edit these sizes to suit your blog design in Settings > Media. Be aware that if you choose this method, your original full-size images will be available for anyone to download freely from your website — not the best option for photographers and illustrators!

Image Optimization And Usability

As well as making sure your images are properly sized and optimized for page load time, you should also make sure that they’re properly marked up for SEO (Search Engine Optimization). SEO makes it easier for search engines to find and index your site and a site utilizing good SEO techniques is likely to appear higher up in search engine result pages when compared to an unoptimized site.

A full discussion of SEO goes beyond the scope of this article (many WordPress themes are SEO-friendly right out of the box anyway) but optimizing your image meta information is an easy way to give your on-site SEO a bit of a boost and can help people to find your site via Google image search and other image-based search engines.

Properly marking up your images is also important for usability, particularly if the images are illustrating important information. In the case where an image does not load or cannot be seen (either due to a slow internet connection, because images are turned off, or for visually impaired users), providing an alternative text description is a must.

1. File Name

Firstly, when you save your images, make sure they have a descriptive file name. Leaving your images named as IMG_013445.jpg or whatever they are when they come off your camera will not give the search engines any clue as to what they are depicting. Use appropriate descriptive keywords separated with hyphens, e.g children-playing-ocean.jpg

2. Alt Text

When you upload your image via the Media Uploader, WordPress offers several fields for file descriptions. While these can be left blank (and many bloggers do to save time), the more fields you fill out, the better for SEO and usability. the most important of these is the alt text, short for “alternative text”.

This is the text that is displayed when images are turned off or can’t be shown for some other reason, so it should act as a description of what the image is. Search engines also read this text and use it to decide what the page is about and where to place your site in the listings. If you’re a wedding photographer based in Texas, for example, you’ll want to make sure that the alt text for all your blog images includes lots of descriptive text including keywords like “wedding photographer” and “wedding photography Texas”. Although be warned that, as with your blog text, it’s important not to over-stuff keywords into your image descriptions.

It can be tempting to copy and paste the same alt text into all your images to save time but ideally, each of your images should have unique alt text that describes it properly.

3. Image Title

The image title is similar to the alt text but has a slightly different purpose. Rather than providing alternative information to the image, the title should provide additional information. The image title is the “tool tip” text that appears in a popup box when you hover over an image. This text is important for both usability and SEO and should provide quick, relevant information about the image or where it links to.

The image title should be slightly different from the alt text and again, should be unique for every image.

4. Image Caption

A caption is text that is displayed usually below the image and provides additional description or supportive text. Using captions is optional, but they can be handy for providing additional information about your image or citing the source if you are using images from another site. Think of the caption as being like an information label in a art gallery exhibition.

Image Linking

By default, when you insert an image into a page or post, WordPress will link it to a new page with just the image on it. There’s no real reason for this and it can even be damaging for your site in terms of SEO.

It can also be a big usability problem — if a user hovers over your image and sees that it is a link, he may well assume it links to a page with useful information. Clicking through to these image-only pages is a waste of time for the visitor and can even cause you to lose visitors.

To solve this problem, simply select “None” as the “Link URL” field when you are uploading a picture in WordPress, unless you do actually want to link it to a specific page. If you do this, make sure you use the image title or caption to indicate where the image links to.

Image Placement

As well as making sure your images are optimized for SEO and user-friendly, it’s also important to think about how they fit within your text for aesthetic and readability reasons.

You may prefer to use inline images (smaller than your main columns so the text wraps around them), full-width images, or a combination of both. What you should avoid is using standalone images that are not full-width, or a series of images that are of varying widths, as this looks unprofessional and unattractive.

To accomplish this, you should ensure that your portrait images are the same width as your landscape images. Keep an eye on the height of your images — if they are too tall, they may run overflow on smaller resolution screens. This will cause users to have to scroll to see the full image, which should be avoided. If your images are too large to display as full width in portrait format, you can make a collage of two or more portrait images side by side.

Inline images can provide a bit of variety to your content and help to break up large walls of text. They are also a good option for smaller or narrow images that are not suitable to be displayed at full width.

When you’re using inline images, again it’s best to decide on a set width for visual consistency. This should be no more than half the width of the text column, as images wider than this will compress the text too much and make it hard to read.

Inline images should always be aligned to the right rather than the left of the text, so as not to break up the left margin and reduce readability.

Beautify Your Blog With Images

Using images is important for creating an interesting and visually appealing blog and they are even more vital when it comes to marketing your creative business.

Follow the tips we’ve covered in this article for well-optimized, well-presented images and your website will not only look beautiful but also load quickly, be a pleasure to read and be more attractive to search engines. Happy publishing!