Images are a critical part of most websites. They not only are a core part of the visual appeal of your web page, but how you manage them is one of the critical factors to the performance and accessibility of your website.
In this article, you will find some helpful tips and advice on how to manage images on your website to ensure they look good, are correctly sized, performant and accessibility-friendly.
Choosing the best file format for your image type
You may have seen there are lots of different image formats. So which format is best for the images on your WordPress website?
Well which format you save your image in will depend largely on what kind of image it is. There are likely lots of caveats to this issue, but as a general rule:
PNG for graphics: For logos, graphics, infographics, illustrations and so on, you should use PNG.
JPG for photographs: For any kind of photo or lifestyle picture, you should use JPG.
GIF for animations: You can still use the GIF format for animated images.
Naming your image files
Giving your images clear descriptive names can not only help you to find them much more easily using the Media Library search function in WordPress, but it will also help give your page SEO (Search Engine Optimisation) a boost.
So try to avoid giving your images names such as IMG123.jpg
And instead aim for images that have names such as dog-fetching-toy-on-beach.jpg
Try to avoid having spaces in your file names. Keep everything lower case, with multiple words separated by dash – separators.
How to crop an image in Windows or Mac
Although WordPress can crop images for you, it can be helpful to crop an image yourself, manually. Not only does this give you much better control over specifically where the image is cropped (for example you may wish to avoid certain details of a photograph being cut off if there is a central focal point), but it will also reduce the overall data size of your ‘uploads’ folder in WordPress, helping to keep your overall hosting storage footprint lower.
How to crop images on Windows (versions 10 or 11)
You can easily crop images on Windows 10+ using the ‘Photos’ app. Just open the app and double click the photo you want to edit. You should see a ‘crop’ icon just above the photo.
You will then be able to click and drag the select pointers until you are happy with the crop you have achieved. You can then click ‘Save a copy’ to export the image.
A second method to crop using Windows is via the Paint 3D app. Search for this app, open your chosen image, click on the crop icon from the top-left corner – resize using the pins. What’s helpful about this app is you can also enter the crop width & height manually. When you’re ready, click on Menu > Save as > Image.
For more detailed instructions visit this web page: https://www.windowscentral.com/how-crop-image-windows-10
How to crop images on Mac
Crop using ‘Preview’ app
If you are using Mac, you can crop an image using the default application called “Preview” which opens images by default.
- Make sure your original image is backed up before you continue
- Double click to open the image in Preview
- Click and drag your cursor over the part of the image you wish to crop
- Once the selection is highlighted, if you click the blue dots to resize your selection, you will see a tooltip that shows you the size of the area you are cropping.
- Click ‘Tools’ in the top menu
- Click ‘Crop’
- The image will automatically save and update to the crop size
- Press CMD + Z to undo if you made a mistake.
Alternatively, you can follow these steps to scale an image:
- Open image in preview
- Click “Tools” in the top menu
- Click “Adjust Size”
- Change the measurement to ‘pixels’ in the dropdown
- Add your height and width
Please note that using the above method you can also ‘batch crop’ multiple images – by highlighting your images, right clicking and selecting ‘open in Preview’ – and then click and highlight all images before you ‘Adjust size’ under tools.
For further information see here: https://osxdaily.com/2014/06/16/crop-image-mac-preview/
Crop using ‘Photos’ App
- Open the ‘Photos’ App
- Drag your image into the app, and click ‘edit’ icon in the top right
- There is then a ‘crop’ feature on the right hand side which you can click and drag and drop a selectable frame over the image to crop it
See official apple documentation for further details: https://support.apple.com/en-gb/guide/photos/pht13f0918f0/mac
Best tools for compressing images (Windows & Mac)
It is a good idea to compress your image before it is uploaded into WordPress. This will one simple step could help to provide a speed boost to your page loading times. Improving loading times is very important – some statistics show that website visitors may leave if you page does not load within a few seconds!
You can do this easily compress your images with the help of an image compression tool. There are many tools available, but here are just a few examples:
For Mac: ImageOptim (FREE)
By far the best tool if you are using a Mac to bulk compress images is ImageOptim. The app itself is very lightweight and simple. All you need to do is click and drag one or multiple images into the app interface and it will compress the images. There are also app settings that allow you to increase the rate of compression.
Download it here: https://imageoptim.com/mac
For Windows: PNG Gauntlet (FREE)
Windows only, and only for compressing PNG files, this app is similar in appearance to ImageOptim for Mac. This tool comes with a feature that lets you convert other formats (such as GIF or JPEG) to PNG format. There are only a few options to change the compression settings.
Download it here: https://pnggauntlet.com/
For Mac or Windows: Tiny PNG (FREE)
This is not an app (although there is a WordPress plugin), this is actually a online tool, where you can drag your images onto the interface on the web page. It accepts WebP, PNG and JPEG files. One of the benefits touted on the website is that it can compress images that have transparency, which some other tools can struggle with.
Find it here: https://tinypng.com/
For Mac: PhotoMill (PAID)
Allows you to batch convert multiple photos quickly and easily. At the time of writing, this is a paid app, priced at $9.99 available via the App Store.
Find it here: https://overmacs.com/?p=photomill
Web Application: Colorcinch (FREE and PAID)
There are a growing number of web based applications that help with editing and styling photos without the need to download software. This can have lots of benefits such as having access to your image workflow tools wherever you are and having the software continually up to date. Colorcinch is packed with useful features for you to add character to your website images.
Find it here: https://www.cartoonize.net/
Alt text on images
Adding Alternative Text (otherwise known as Alt Text) to your images is one of the most important steps you can take to improve the accessibility of your content. Alt Text provides a description of the image. This is important because when a screen reader encounters an image, it will attempt to read a text alternative first and foremost. More rarely, if an image fails to load for a website visitor, it is always useful to have the Alt Text fallback.
So what kind of text should you be adding to your Image’s ‘Alternative Text’ field? Will any old description do, or should we aim to meet certain criteria?
What kind of description you provide for your Alternative Text field depends on what type of image you are using. There are different types of images, and they serve different roles or functions.
Image Type defines what kind of alt text to use
Icons – such as social icons or contact icons are a type of ‘informative image’. For example, if you have an icon of a telephone, next to your company telephone number, your Alt Text should read “Telephone:” – This is so that if the image fails to load or a screen reader views this content, it still makes sense without the image.
Logos – In the case of a Logo, the Alt Text should normally simply describe the name of the company or brand which the logo represents.
Infographics – Sometimes you may have images that display instructions to users or information about a product or service. In this case, it is better to have a more detailed Alt Text Description – which provides a short paragraph detailing what the instruction/product/service is.
Photographs – If you have a photograph, which is one of the more commonly used types of images in content, it is best to write Alt Text that describes briefly what is it in the image. For example “Young boy running through field flying a red kite”. You can also include a bit of information about what emotion or purpose the image is trying to convey.
You can easily edit Alt text in WordPress from the media library – just by clicking to edit and image and entering your text in the Alt field. It is worth doing – as it has a positive impact not only on Accessibility but also on your SEO.
Conclusion
Managing images is an important component of making sure your website is fast, accessible and performant. It’s a great idea to crop your images, compress them, give them good file names and descriptive alt text. Taking these simple steps alone will go a long way toward improving your page load speeds and making your website look more stylish at the same time.
