Updating images in a WordPress website is easy but there are a few things you should know if you want to provide a great user experience and follow best practice. If you are here because you just need to know the actual steps to upload an image then lets get that out of the way first!
How to add an image in WordPress
Log in to your WordPress website. Make sure you’re on the Dashboard. Look for the Media link down the side. Choose ‘add new’ and upload an image. This puts the image in your media library. Once an image is in the WordPress media library it can be added to a post or page by clicking ‘add media’ when you are creating or editing the page. You can also add images to the image library from the page or post editor. When you click ‘add media’ you have a choice to either choose from the library or upload something new. NOTE: This works for a classic install of WordPress. If you are using a page builder (such as WP Bakery, Beaver Builder or Elementor then the steps will be different).
Now, let’s learn the do’s and don’t of image management in WordPress.
There are three key aspects to understand and these are the file size, the image dimensions and the brand guidelines for your website.
Websites need small image file sizes for speed
It’s possible to add almost any image into WordPress without editing or optimising the image for the web but this is not always a good idea. The files that your camera or mobile phone make often have a very large file size. This is great if you are printing the image because a large file means you’ll get a nice clear print with lots of detail at various sizes. Web images however need to have a small file size because small files load faster over the internet.
So why would you care if it loads fast or not? Two things: user experience and SEO.
Fast loading web pages provide a good experience for people using your website. We have users on mobile phones, in low reception or remote areas and even with NBN some users can experience quite low internet speeds so they don’t really appreciate waiting for a giant image to download to their mobile phone. And if a page takes too long to load they will leave your site. Got it?
Google wants to provide a good experience for users too and they are very aware that most people browsing websites these days are using their mobile phone. So, they actually use page speed as part of their search algorithm to encourage website owners to create fast loading websites that deliver a great mobile experience.
Ideal file sizes for WordPress images
So what are good sizes for images files on websites? And how do you even find those sizes? For large images such as those used in banners we currently like to stick to a maximum file size of about 350-400MB. For other images that might be used in the body of your site we try to keep them under 100MB. You can figure out the file size of an image by right-clicking on it and using the code inspector or by saving it and looking at the size in your file browser.
Image dimensions need to match the ones set in your website design
If you’re adding a new image to your WordPress website or, updating one already in the site then you need to make sure it has the correct dimensions. The width and height of the image and the ppi (pixels per inch) influences the file size and how wide and tall and image will be on the screen.
How to find out what the right dimension is for an image on your website
If there is already an image and you’re just replacing it then one of the easiest ways to find out dimensions and file size is to right click on the image and save it to your computer. You can then browse to the file on your computer and see the file size. On a Mac right click, choose ‘get info’ and expose the dimensions via the drop down arrow. On a PC right click the file and choose ‘properties’.
We use Adobe Photoshop to resize or crop images for websites but you might not have this software so you’ll need to find another way to open and resize or crop your images. There are a few free online editors around for example Picresize (which allows multiple files to be resized at once) and Pixlr. Or ask your photographer to provide them at the correct size as web versions (or ask your web developer to create the images).
Keeping website images ‘on-brand’
Consistency is key for brand-building and your images play a part in this. If your designer has created a certain style on your website it’s likely the images help to create this with a certain feel, style or colour. If your website design features black and white images then uploading a full colour image won’t reinforce the brand and the site will start to look less polished.
So, in summary, whilst it’s easy to add images to WordPress, there are three things to remember: keep images sizes down, match your dimensions so you don’t break the design and keep your image style and colours consistent to build your brand.