Website editing tips – Images
Although WordPress makes editing your own website a remarkably pain-free experience, there are some editing practices you may not be aware of which will keep your site running smoothly.
For a small business owner, having the ability to edit your own website as and when you need to is a wonderful and empowering thing, but being given power over some aspects of web design when you are not a web designer can be a lot to take on board. I’ve noticed that while the key points on making basic edits do stick, suggested key practices are often forgotten and fall by the wayside.
This post is for anyone who edits their own WordPress website, but isn’t a web techie. It’s for those of you who have got the basic editing down, and now have the headspace to take that next step with your website editing. Try my tips below one at a time if you need, refer back or just dive straight into it all; do whatever feels helpful for you.
If you read through this post and you’re already doing everything then give yourself a pat on the back! I should have some more tips coming in the future. But if you’re not doing any of it, don’t panic. You can go back and make changes to your site on all of these retrospectively if you want to.
Tips on images
A picture is worth a thousand words. I think this can absolutely be true, and having pictures on websites is great. You could just find a picture, upload it and be done, but if you want your website to continue to run well then try to build my guidelines below into your regular website editing habits.
1. Use legal images
The easiest way to do this is take your own! A lot of us don’t have the time to do this though, and there is nothing wrong with getting images off the web as long as you have the right permissions.
Just because an image has been put online, doesn’t mean you’re allowed to use it. This is a really common misconception. You automatically own the copyright to any original content – image, text or otherwise – that you produce and publish online, which means that the copyright to everything else online belongs to the person who created it.
If you take an image from anywhere online without permission and the owner of the image finds out, they can take legal action against you. Granted, they would first probably get in touch with you and ask you to remove it, but it’s just not worth the risk and potential loss of trust in your business.
Luckily there is a really simple solution: Use images with a Creative Commons (CC0) licence.
There’s lots around. You can even filter Google images so it only shows you images that can be used commercially. If the right image is important, you may want to consider purchasing one from a stock photography website. Or if you find an image on someone’s website you’d like to use, just drop them an email and ask nicely if you can use it. I’ve known people to say yes when I wasn’t expecting them to, so it’s worth the ask (note: email, don’t ring. Having written permission is very important).
I also wrote a whole article on where you can find free photographs with a CC0 license, which you can read through here.
2. Give your images titles and alt text
The title is the more obvious one, and pretty self-explanatory. This is physically displayed as the image title on your website (if it’s set up to), and Google reads it and goes “Aha! This is the image title!” and is happy for SEO reasons.
However, “alt what?” I hear you say. This needs a bit more explaining. Alt text is also known as ‘alternative text’ and it does three important things:
- It is the alternative text (aha!) that appears on your website if the image can’t be displayed (e.g. if someone’s browser blocks images).
- It is used to explain the image for website users with special needs. For the visually impaired, for example, the alt text is read out loud by the computer or phone to describe what is being shown.
- Search engines look for it when assessing SEO. No alt text = unhappy Google.
So now you know how important the alternative text is, try and remember to fill it in as well as the title whenever you upload an image to your website. I fill all the image information in immediately after uploading every image – that way, it becomes a regular habit and I know it has been done.
How do you do this on WordPress?
The image below shows the information panel that appears when you click an uploaded image in your Media Library. The same information appears after uploading an image. Just fill the boxes in – done!
What should your titles and alt text say?
Something clear and concise that explains what the image is about. Your titles and alt text can be the same, but you might want something a little more descriptive for the alt text. If you have an image of a woman running through the forest for example, you might want the title to just read “Running woman” and the alt text to read “Woman running through a forest”. As long as you don’t call it something irrelevant like “orange in a fruitbowl” you can’t go far wrong.
3. Watch your image size
What is the ideal image size? Unfortunately there isn’t a magic answer to this. The larger the image you upload, the longer it will take to load, and the longer your webpage will take to upload. But if your image is too small, it will pixellate and make your website look unprofessional.
The ideal: keep it as small as possible without compromising your image quality.
There is a lot that could be said on this topic, but I’m going to keep it simple here. I’m leaving full width images (that span the entire width of a website) alone for the moment because you start getting into the realms of different screen sizes. If you’re interested in this, I recommend reading this article on om4.com.au. They go into a nice bit of detail. For your more everyday image uploading into pages and blog posts however, try following these two steps:
Firstly, try to resize your image to the dimensions you need
This doesn’t have to be mathematically precise, a close fit works well, and it helps if you know your website width (ask your web designer). This will be in pixels (px). Pixels are used to measure size on websites, not cm/in. If you want to know why, Google it, but for our purposes let’s just assume we can measure things in pixels like we would in cm. This website for example has a content width of 1080 pixels, so if I wanted an image to fit full size on the page like this:
[NOTE: View this section on a desktop computer for best results, otherwise all the images are going to look about the same size]
…the image only needs to be 1080 pixels wide.
It therefore follows that if I want an image to be half the width of the page, it doesn’t need to be wider than 540 pixels:
Pretty simple. All the images look clear and crisp. You can often get away with having an image a bit smaller than you need it, but if you push this too far something happens:
Fuzzy, right? This picture is 270 pixels wide, but I’ve forced it to be around 500 pixels wide. Because the image is too small for the area I’m trying to fill, it has pixelated. So don’t be tempted to make all your images super small just so they load faster. Pick the right size for what you need.
I imagine your next question is going to be “so how do I resize my image using pixels?” It’s not something most people are used to doing. You might be surprised to find that a lot of photo editing software (the kind you have already sitting around on your computer) will resize in pixels. Personally I use the Preview tools on my Mac a lot. It’s worth making a COPY of your image and resizing that, otherwise you risk losing your original higher-resolution image.
If this is a bit boggling for you though, there are many online tools that you can use to resize your image, such as:
Secondly, optimize your images
This is basically keeping an image in the same file dimensions you set above, but reducing the file size. The easiest way to do this is to use a free online tool where you upload your image, and download a nicely optimized one which you can then upload to your website. My favourite is optimizilla.com. You can also use plugins on WordPress to automatically optimize images you upload, such as WP Smush, Shortpixel and EWWW – I’d suggest talking to your web gal or guy about this if you’re interested.
4. Stick to jpgs
There are other file types that work online for images, but unless you have a good understanding of when these are appropriate I’d recommend you stick to jpgs. They are a well recognised and supported format, and are good for keeping file size down. Most photographs you come across will already be in jpg format as well, so it makes life easier (I’d be willing to bet my current cup of tea that the pictures you take on your phone are jpgs).
You can tell what format an image is in, as it should be listed at the end of the file name:
are both good to go. But if it shows something like:
…you want to convert it. You can convert images to jpgs using the image software on your computer, or again you can find tools online such as simpleimageresizer.com – a search will give you lots of other options.
Thanks for reading! I hope these tips have been useful. Check back soon for more posts on website editing tips.
Credit: while the photograph of the calligraphy above is my own, the beautiful tree illustrations were done by the fantastic Martha Lightfoot. I recommend visiting her website here, her artwork is superb.
DesignerI set up this blog as a space to share knowledge, ideas, tips and tricks for all aspects of design that people often run into when running a small business. I hope these pages help to give you inspiration and direction for your own endeavours!