If you run a website, there’s loads of things you MUST do. You must keep it fresh, you must keep it accurate. If you’re me, you must keep it just the right amount of dusty pink. But, you MUST MUST MUST MUST manage your website images.
Here’s why (soz it’s a bit boring). Everything on your website is data, and that data is transferred to users when they visit your website. The more data you have, the longer it takes to transfer, and the slower your website loads. Since the dawn of websites, loading slowness has been one of the top reasons people abandon their visits.
This data could be a little line of code that says “the body font is Comic Sans” (if it is then you are an absolute monster) or “when someone hits submit, send a nice enquiry to Aime”. Lovely tiny clean snippets of data. Images on the other hand, are disgusting heavy data beasts.
A 100×100 pixel thumbnail image on your website is literally 10,000 itty bitty pieces of data. “this pixel is white” “this pixel is yellow” “this pixel is citrine with a hint of chartreuse”. Now imagine how much data is in a 1920 x 1280 pixel banner image, or a 5670 x 3367 pixel product picture that you forgot to manage. So much data.
That’s why unmanaged images are by far the biggest cause of a slow website. And I bet it’s the reason why your website feels a bit clunky and slow too. Don’t worry though, we can fix it pretty easily with some good clean website image management.
Oh, and I’ve added a few extra tips too that’ll help you use your new sexy images to your advantage with search engines like Google.
1. Choose the best file format for the image type
Uploading a lovely clean graphic? You need a PNG. How about a lifestyle pic or illustration? JPG all the way. A cute animation? GIF baby, GIF it real good. Are you trying to upload a TIFF or BMP? NO. STOP IT.
Choosing the correct file format allows you to better manage your image and retain the visual quality. In my experience, one of the biggest unnecessary file-type misuse I see is when website managers upload PNG screenshots of photos. Screenshots contain an insane amount of data, if you’re using this method (which I do all the time when I want to reference an Instagram post) make sure to go File > Save as/Export and select JPG instead.
Thats actually why the Pinterest-friendly pic at the top of this post is a bit pixelly. These artefacts have appeared because I need to use a JPG for the images, but a PNG would be better for the text. I’ve compromised for now, but totes need to redesign that graphic. Ah well.
2. Crop your image to the correct size
The vast majority of people viewing your website will be doing so via a browser that is less than 1920 pixels wide. That’s why 1920 pixels is the widest you should ever upload an image to your website. Chances are, the average image is not showing anywhere near that big.
If your image is bigger than this, you’re making your visitor wait for data they can’t even see. No wonder they’re off on their way to another site.
To find out how big your image will show to your visitor, upload a placeholder to the correct spot on your website and preview the page. Expand your screen as big as you can, or until the placeholder image stops growing.
If you’re on a Mac, hold cmd + shift + 4 to bring up a little crosshairs, click and drag over your image and you’ll get a little reading of the size of your pic. If you’re on a PC, you can try downloading a browser extension or use the Snipping Tool.
Now go back to the image you want on your website, and crop to this size. I tend to add a few pixels either side as a buffer just in case my screenshotting skillz are below par.
3. Compress, compress and compress again
Have you exported your website images to 72dpi? Ace. But that’s not enough. Don’t know what that question meant? Don’t worry, it’s not all that. 72dpi (dots per inch) is typically considered a web quality image, which is lower than print quality (300dpi). Saving images to 72dpi is a good first step in image management, but there’s a whole ‘nother level of compression.
Use an online service like TinyPNG or Optimizilla to squish your images. These quick little tools compress the total amount if data by reducing the number of different colours in your image. If you have 83 shades of citrine, it’ll blend them into a smaller number of suitable average hues.
It makes little-to-no-difference to the naked eye, but saves a buttload of data (that is the scientific term). You’ll turn “this pixel is citrine with a hint of sunshine”, “this pixel is citrine with a hint of mustard” “this pixel is citrine with a hint of chartreuse”, into “pixels 12, 75, 780, 781, 999 and 10643 are citrine shade 2”.
You might have a file compressor on your website already, I certainly do. But I run all images through one of these shrinky machines too. Your images can never be too well managed.
4. Name your images helpfully
Here’s a little experiment for you. Go to images.google.com and search for your brand name in quotation marks. Do you see a whole page of your pics? No? Well, that’s probably because your pics don’t contain your brand name.
Naming your website pics clearly and smartly is a great boost for search engine optimisation (SEO). Uploading a file to your website with the name IMG972.jpg is a waste of valuable data. For example, the thumbnail image for this article is called stationery-studio-cotton.jpg.
Don’t fancy renaming every single one of your images? Neither do I, and yet I did for YEARS before I found how to do it in 2 minutes using a Mac.
First, add the unique name to your images (e.g. stationery, red-dress, aime-colourful-blouse) and then highlight all of your files, right-click and select ‘Rename X items…’. Use the dropdown to choose ‘Add text’ then pop your hyphenated brand name into the text box, e.g. -studio-cotton. Click ‘Rename’ and BOOM, sexy named images.
There’s a few rules you can follow. Don’t shove in irrelevant words because you want to rank for them, and try to keep your image names rather succinct. You can ignore really common words like pronouns and prepositions, and try to use the most simple participle (e.g. “obfuscate” instead of “obfuscating”. PS, I learned the word obfuscate today and now I’m using it all the time).
Separate words with hyphens. Spaces can be replaced with other characters, and underscores are bad for a reason I’ve forgotten.
Word of warning. Some website solutions like Wix rename all your images to their own gobbledygook anyway, so you can skip this. Yet another reason why Wix (in my opinion) is a sucky website platform.
5. Complete your image meta data
If you do this, you are a better person than I am. It’s so darn boring. Completing image titles, descriptions, alt-tags and captions are all great for SEO, and often great for user experience too. I should really do it but it takes so darn long and is so darn boring.
Tahdah! Now you know how to manage images for any website. By putting these simple steps in place, you should be able to regularly save up to 90% in image data heaviness. Your visitors and Google will thank you.