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.

  1. Make sure your original image is backed up before you continue
  2. Double click to open the image in Preview
  3. Click and drag your cursor over the part of the image you wish to crop
  4. 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.
  5. Click ‘Tools’ in the top menu
  6. Click ‘Crop’
  7. The image will automatically save and update to the crop size
  8. Press CMD + Z to undo if you made a mistake.

Alternatively, you can follow these steps to scale an image:

  1. Open image in preview
  2. Click “Tools” in the top menu
  3. Click “Adjust Size”
  4. Change the measurement to ‘pixels’ in the dropdown
  5. 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

  1. Open the ‘Photos’ App
  2. Drag your image into the app, and click ‘edit’ icon in the top right
  3. 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.

Hello, how can we help?

Thanks for taking the time to visit our website. Please use our assistant to show you around and find out what you need.

Powered by AI Humans

Back

I'm setting up a new company or start-up

Setting up a business can be a daunting prospect. We really enjoy working with startups and can help with all your creative and technical needs, including logos, company branding, website creation, email services and hosting.

Powered by AI Humans

Back

I'm from a University of Cambridge organisation

If you are a member of the University of Cambridge community and you are looking for a web design or digital marketing agency, please contact us to discuss your needs and help you to develop a solution that meets your goals.

Powered by AI Humans

Back

I want to sell products online

We have helped many clients sell online whether it’s an online shop, event booking system, donation provision or membership platform. We have the creative and technical know-how and are perfectly placed to advise you on the best solution.

Powered by AI Humans

Back

I'm looking for a website redesign

Website redesigns are usually required when your current system has been in operation for a few years and has either become outdated, doesn’t reflect your current servies or is technically broken.

Powered by AI Humans

Back

I'm looking for a new web agency

We’re experts at planning, designing and developing websites for our clients. From initial ideas to completion, we create modern, accessible and eye-catching websites that are fast, easy to use and deliver creative and technical features.

Powered by AI Humans

Back

I'm just browsing, I love your work

Awww, that is really nice to hear. We do love what we do so any postive feedback is shared to the whole team as we all bring our unique skills to every project.

Perhaps browse the following pages to find out more about Chameleon:

Powered by AI Humans