Why is it important?
It is extremely important that you resize images correctly when using them on your website, for several reasons:
- Oversized or high-resolution images will cause your website to run slowly
- Undersized images will become pixelated or blurry if stretched to fill a larger space
- Google will penalise your website for not being mobile optimised and slow to load
- You will create a difficult and challenging job for yourself in the future when you have to go back and fix all the images on your website
So how do we ensure our images are fit for purpose? In this guide, you will learn:
- The best image formats to use on a website
- The correct image resolution for a website
- How to check what resolution an image is
- How to convert an image to 72 DPI
- How to find the correct image dimensions for a website
- How to resize images to the correct dimensions
- Resizing images from Shutterstock for your website
What is the best image format to use on a website?
There are so many image formats now days that it can be overwhelming to decide which one to use. Each have their own pros and cons and some are more suited to websites than others. Some even have specific use cases that only those formats can achieve. Let’s take a look at some of the most common image types and compare them. Hopefully you will then have the knowledge to select the right one for the job.
JPG or JPEG – Joint Photographic Experts Group
JPG is probably the most popular and most common image format there is. It is accepted by pretty much every piece of software that uses images and it’s known for its “lossy” compression, meaning that the quality of the image decreases as the file size decreases.
There is actually no difference between JPG and JPEG and both behave in exactly the same way. They are both acceptable extensions, but JPG is probably the more common choice. JPEG was simply shortened to accommodate the three-character limit in early versions of Windows.
PNG – Portable Network Graphics
PNGs are great for websites because they can have transparent backgrounds. This allows for layering images on top of other elements to create fun and interactive layouts.
Images without backgrounds tend to be smaller in file size too, as there is less information that needs to be saved into the file.
PNGs work best for vector-based artwork that has transparency, such as logos, icons and cut-outs.
GIF – Graphics Interchange Format
GIFs are very common in their animated form, which you have probably seen as memes from Giphy on WhatsApp and on social media.
They are formed from up to 265 colours from the RGB colour space, so when not animated they usually have a very low file size. Animated GIFs however tend to be pretty large in file size, as they are made up of lots images that act similar to an animated flip book.
WebP – Web Picture format
WebP is a next-gen image format created by Google. It’s a relatively new image format which provides superior compression.
WebP lossless images are 26% smaller in size compared to PNGs and WebP lossy images are 25-34% smaller than comparable JPEG images. Both types support transparency too.
It is fantastic format for WordPress websites because there are plugins which can convert your regular JPEG and PNG images to WebP automatically. One such plugin which makes this a breeze, is EWWW Image Optimizer.
SVG – Scalable Vector Graphics
SVG is an xml-based vector image format which can be scaled in size without loss of quality. It is an excellent format for images such as logos, icons, typography, lines, shapes and anything that isn’t a photograph.
They are usually very small in file size and they can be edited with text editors such as VS Code or vector graphic software such as Adobe Illustrator.
What is also really cool about SVGs is the ability to be able to animate and style them using CSS and JavaScript.
Be aware though, that WordPress doesn’t support SVG out of the box, so you will need to install an SVG support plugin.
What is the correct image resolution for a website?
When resizing images to be used on the internet, the resolution needs to be 72 DPI (dots per inch). Not many people know about image resolution, and this causes a lot of problems for website owners and digital marketers. Other popular resolutions you may come across are, 96, 150 and 300. Print resolution is usually 300 DPI and the ones in between print and web resolution are unnecessary in most scenarios.
As well as ensuring your image is the correct resolution, you also need to ensure that you have resized the image to the correct dimensions, as this will affect the file size and how it fits on the page. The wrong dimensions can also cause blurriness, stretching and pixelation. Ensuring both the resolution and dimensions are correct will result in a much smaller file size.
How to check what resolution an image is
If you have been given an image, or downloaded it from a stock website, it’s possible that the resolution of the image is too large.
Images to be used on the internet, need to have a resolution of 72 DPI (dots per inch).
Sometimes the image is already 72 dpi, which is great, but how do you check?
On a windows PC:
Right click on the image > Properties > Details > H/V Resolution.
On a mac:
- Open image with Preview app
- Head to Tools > Show Inspector
3. Go to General Info to find the image DPI
How to convert an image to 72 DPI
If you find in the step above that your image is not 72 DPI, the easiest way to fix this is to run your image through this handy online conversion tool:
https://convert.town/image-dpi
It’s that simple.
There are other ways you can do this, such as using Adobe Photoshop. However, this of course depends whether you have an Adobe subscription.
If you do, simply upload your image to Photoshop and click “CTRL + Alt + I” or navigate to: Image > Image Size.
In this popup window you can simply change the resolution to whatever you need it to be and click OK. As a rule of thumb, always change the resolution before the dimensions, as this will leave you with a very tiny image if you do it the other way around.
Pro tip: If you ever find that after changing the image resolution to 72 DPI, your image dimensions go really small, create a new artboard which is pre-set to 72 DPI, and then drop your image onto that artboard.
How to find the correct image dimensions
This is a tricky one, because some websites will automatically resize images to fit the space they need to go, so it doesn’t matter so much what size you upload them at. Especially with WordPress websites where themes can automatically generate a variety of different thumbnail sizes and use the appropriate one for the job.
However, this depends whether the theme developer has put enough care and attention into ensuring images appear around the website at the correct size, so you cannot always rely on this. If you are tired of fighting your current website when it comes to images, you may need a new website. We build WordPress websites that essentially resize the images for you, as long as you have uploaded it at the correct resolution (72 DPI) and large enough dimensions for the website to create all appropriate thumbnail sizes.
This won’t work in all scenarios, but a way to test if your WordPress theme is automatically resizing your images, is to right click on any image on your website and click “open image in new tab”. If your theme is resizing images correctly, it should open an image of similar size in the new tab. If the image in the new tab is a lot larger, this is a sign that you have uploaded an image which is too large but more importantly that the theme is not adjusting your uploaded image to suit the size of the space on the page.
Not to worry though, we can get around this by simply resizing our images to the correct size they need to be when we upload them. So how do we know what the correct size is?
You can use the browser’s inspect tools to find out what size any section on your website takes up in pixels. This way you can find out what size an image needs to be to fit the space perfectly.
To inspect your website, simply right click on any part of the page and select “Inspect”. This will open up a rather scary looking window, but don’t worry, it’s rather easy to use once you get used to it. I am on Google Chrome and it looks like this:
Make sure the inspect tool is docked to the bottom of your screen and not the side, so that it doesn’t affect the width of your browser window. If it is to the side, click the three vertical dots in the right corner of the inspect tool and select the “dock to bottom” icon, shown below.
Now your dock is at the bottom, it’s time to use the select tool to isolate the image and view the size. The select tool is in the top left corner. Click it so it tuns blue, as shown below.
Once the select icon is blue, hover over the image and the image should also turn blue. Just above the image there should be a white box with the dimensions inside. Please note, these are not the dimensions of the image, they are the dimensions of the space that the image is taking up on the screen. This is the size that we need to resize our image to, so that it fits perfectly.
You can see that the size isn’t a round number. This happens often due to responsive websites using percentage-based widths. All we need to do is round the number up. In this case, 705px X 409px will be perfect.
Although it’s important to be aware that if it’s a featured image, which gets used in multiple places on your website, you will want to make sure it doesn’t display larger anywhere else, such as on the article page. If it does, use those dimensions instead, to prevent it from stretching and looking worse on that page.
How to resize images to the correct dimensions
Of course, there is Photoshop, if you have a licence, but most people don’t. So, it’s likely you’ll need to use a free online tool. There are lots of image resizing tools online to choose from, and they each have their own pros and cons. I am going to share with you the ones I have found to be the best in terms of options, speed and image quality output.
I Love Image
https://www.iloveimg.com/resize-image
This is a really simple image resize that just works. You can upload multiple images at the same time too and resize them in bulk.
Another great feature is that you can reduce images by percentage or pixels. For accurate resizing you would select the pixels option and put in the desired width and height. You can also emit height and let the image scale based on the original proportions.
I also really like the “do not enlarge if smaller” option, which prevents scaling images up and making them pixelated and blurry.
Easy GIF
Although the name would suggest that this only works for GIFs, that’s not true. It works for all popular image formats as well as GIFs.
This handy image tool is packed full of options, such as resizing, optimising, cropping, rotating, converting and much more.
Bulk Image Resizing Made Easy 2.0
This is a great tool when you have a large number of images to resize. It processes image resizing at blazing speeds which impresses me every time I use it!
It has some really nice features like watermarking, changing format, renaming, adding borders and more.
Be warned though, sometimes it produces great results and sometimes it doesn’t. Always check the images before uploading them to your website. I have found that sometimes the resized images can become grainy or jagged after using it. I still haven’t figured out what causes this but most of the time it works really well.
Tiny PNG
This tool is not so much an image resizer, but an image compressor. If you ever need to compress an image even further than the other tools above, you can try running it through tinypng.com.
Just make sure you have converted the image to 72dpi beforehand and resized the dimensions correctly. This tool only compresses the file size and sometimes doesn’t even do anything as the other tools have compressed it already. However, when image compression is critical, this tool is great to have up your sleeve.
Resizing images from Shutterstock for your website
There are plenty of stock photography websites out there, and they all offer a fairly similar way of downloading your images once you have purchased them. However, most people still don’t know what size they need and what to do with the image once they have it.
A lot of the time, these stock websites will give you the image way too large than what you need it for, because they need to also cater for people who want the image for print quality (300 DPI).
This will mean that if you upload an image from Shutterstock and put it straight onto your website, it will likely be huge and slow your website to a grinding halt!
In order to fix this, it’s always best to use the Shutterstock “Edit in Create” option to resize and download your images at the correct resolution and dimensions. Other stock websites will also usually have their own built-in editor where you can resize the images manually.
In Shutterstock, once you have found your image, click “Edit in Create” and it will take you to the image editor:
Then click on Canvas settings.
In Canvas Settings, make sure the little link icon is set to “Keep proportions”. Choose an appropriate size, something like 1000px is a safe option for websites. If you know exactly what size it needs to be you can input those dimensions.
Once you have got the image at the right dimensions, it’s time to download it. When you do though, make sure you set the quality to “Low”, so that the resolution is as near to 72 DPI as possible.
Pro tip: Unfortunately, Shutterstock doesn’t give you consistent DPI results when saving as low quality within their “Create” editor. Sometimes it gives you 96 DPI which isn’t ideal for web use. Luckily there is a really easy way to convert the image to 72 DPI as I’ve mentioned above. Simply run the image though Convert Town at 72 DPI and you’re done!
I hope you have found this article useful and now feel more confident working with images. Images are deceivingly complex, and I’ve only just scratched the surface in this article.
