Putting images on the web seems like one of the most basic things you could do, but it can actually be quite complicated when you dig into it, and a really common mistake people make is to slow down their website by uploading massive images.
I’m going to walk you through some of the basics, so that you will know how to get your images ready for your website, using tools that are freely available. This will ensure your images load quickly and don’t slow down your site.
If you purchase a MySite.Actor site we optimise your images for you when we first build your site – but if you have a site elsewhere, or if you are editing your MySite.Actor site yourself this will help keep your site in tip top shape.
The first question to ask yourself when loading images on your website is what size should they be?
Image Size
There are two things to consider when thinking about image sizes for the web:
- Image dimensions
- Image resolution
In simple terms the dimensions are how large the image is and the resolution controls the level of detail contained in the image.
Resolution is really for controlling the quality of a print image, and the only thing that really matters for web use is the image dimensions in pixels, so for image resolution let’s keep things simple and say make all your images 72dpi – we’ll come back to how to do that.
Image Dimensions
Ok, so we know we are going to make all our images 72dpi – but what dimensions do they need to be? How many pixels wide and how many pixels deep?
You would think this would be a simple question wouldn’t you? But consider how people look at your website – they use their phone, their iPads, laptops and desktop computer. And to make things even more confusing some screens have displays that use far more pixels than other screens. You might have heard of Apple’s Retina displays? They use twice as many pixels as other screens.
To properly decide on the pixel dimensions your image needs to be, you need to consider what the largest size the image will be displayed at.
Image Width
Some ultra hi definition screens might be as large as 5120×2880 pixels – but in my opinion it’s not worth optimising your images for these screens right now since most people won’t be viewing your site on a screen like that (most people will probably view on a mobile device) and it would make your images a lot slower to download for those devices.
So let’s continue to keep things simple and say that 1920 pixels wide is the largest your images should be. I’m choosing that number because 1920 x 1080 is a popular large screen right now and at those dimensions you can optimise the image to be reasonable file size – plus most good web platforms will automatically create smaller versions from that image for phones and tablets.
So let’s get our width sorted out and we’ll come back to height in a minute.
How to Resize Images
So now we know we will be sizing our images at 1920 pixels wide and setting the resolution to 72dpi. Great. How do we do that?
I recommend using pixlr.com – a free online image editor to do the first part of resizing your images.
Open the image editor and upload your image – if it’s really large pixlr will automatically offer to resize your image, and the default option is Full HD which is 1920 pixels wide. Choose that option and pixlr automatically resizes your image.
If your image isn’t massive, you won’t get the automatic option – but that’s ok – just click on the first took on the left hand side, the “Arrange” tool and then click on “Resize Image”. Enter 1920 in the box for width and click apply.
Then click the save button to download the image to your computer. You can leave the settings at the default, including saving the image at high quality. This will give you a large file size but we will use another tool to reduce it.
Image Height / Depth
If you have a large image on your page that is set to be the full width of your site, you might want to consider how deep or tall that image is.
On large screens it might require a lot of scrolling to get to the next section on your website. Generally speaking, landscape format works best on the web – images that are wider than they are tall. I like to use images that have a 16:9 ratio if they are full width on my site.
Pixlr.com has an option in the crop tool to “Select Aspect” – turn that on and set the width and height to 16 and 9 respectively. This will allow you to crop your image to a good ratio for the web.
Optimising For The Web
Now our image is 1920 pixels wide, we can go to tinyjpg.com to optimise it fully. Upload your image to tinyjpg.com and it will reduce the filesize without a reduction in quality. Once it’s done, download your image and use that image on your website.
Now you know the basics of how to optimise large images for your website, let me know in the comments if you have any questions, and subscribe to the newsletter below if you want to receive more tips for having the best possible actor website.
