Your website is a wonderful canvas to visually showcase your brand. Whether it’s the new branding photos you’ve had taken, or graphics, there’s a few things you need to do before they’re ready to share online.
When you’re printing images, you want the file size to be in the mega or gigabytes but on a website, well, a file that size is going to have your audience waiting a while. And, in the online world, that’s not a good thing.
So, what do you need to do to share high-quality images on your website, without slowing things down?
Here’s a few simple steps, that even the non-technical amongst us can action.
(Image link – https://unsplash.com/photos/7okkFhxrxNw)
Prepare your files
Use JPGs where possible
JPG and PNG are two common file formats used to deliver images. JPG files are smaller and generally used for photos. PNG files are larger, however, they have the benefit of being transparent. So, for example, if you have a logo that you’d like to place over an orange background, your PNG image will sit nicely over it without a white box around it like a JPG file.
The general rule is unless you need your image to be transparent, use a JPG file.
Start with a small file size
It might sound obvious, but starting with smaller file size is essential. If you’re receiving photos from a photographer make sure you download the high res and low res images.
The low res images may be presented as ‘images for social media or web’. These images have already been expertly compressed to deliver a high-quality image perfect for the screen. It’s these images that you’ll want to use on your website.
If you’re capturing the images yourself, you can change these settings when exporting from Lightroom or Photoshop.
The ideal file size for a regular image on your website (not the header) is 300kb. Your hero or header image can be up to 1MB, however, you don’t want multiple images of this size on your page.
Compress them again
Online compression tools like tiny.jpg are great for further compressing JPG, PNG and webp images. This tool can shrink your file size by up to 80%, without a visible loss of quality.
Use keywords and alt text
Use keywords in your file names
If you’re writing for the web, then keywords are a tool that you can use to be found on search engines. As well as using keywords within your text, it’s a great idea to rename your files using some of the keywords you are using. For example instead of a file that’s called 0929.jpg you could rename it to melbournefamilyphogotographer.jpg.
Now, when someone does an image search for Melbourne family photographer, your image has a chance of appearing. It’s much quicker to do this step as you upload than to go back at a later date!
Use keywords in your alt text
When uploading images to your website, you’ve got the opportunity to an in ‘alt text’. This text is designed for accessibility so people who use screen readers and other devices can access your images.
The alt text is also a good place to insert some of your keywords. An example of alt text could be:
‘Woman cradles newborn during a family photography session’.
This alt text describes what is happening in the image in a way that someone who is blind can access it, and also utilises relevant keywords such as ‘family photography’.
(Link to image – https://unsplash.com/photos/hGV2TfOh0ns)
Use an image compression plugin
If you’re running your website on WordPress, you’ll want to use an image compression plugin. There are many free and paid options available. My favourite is Imagify. Their free plan allows you to upload and compress up to 20MB per month. If you need to do more than this, you are able to upgrade to premium for a month, and then return to the free version. This is a good option for new websites or existing websites where all of your images need to be processed.
Imagify is a great plugin as they give you three different compression options. These options can be bulk applied to all of your images or applied one at a time. I’ve personally found the smaller images are best on the most aggressive setting (ultra), whilst header images are best on normal.
Images can be compressed within the plugin or in the media manager.
Serve your images as WebP images
This sounds techy, but I promise you it’s not. Imagify allows you to serve your images as WebP images with just a click of a box. WebP is just another file format like .png, however, it’s specifically designed for images on the web.
Squarespace, Wix and Weebly
Currently, these platforms don’t offer plugins to convert your images into WebP format or further compress them.
Squarespace and Weebly accept JPG, PNG and GIF files, so you’ll be ready to upload your images once you’ve compressed them using tiny.jpg
Wix accepts JPG, PNG, GIF, JPEG, JPE, JFIF, BMP, HEIC, HEIF, TIFF, TIF, and WEBP. You can convert your JPG and PNG files into WebP files using an online converter such as Convertio before uploading them to your website.
Consider the dimensions of your image
In addition to considering the size of the image file, the dimensions of the image also play a part.
The best image size for website headers is 1024 pixels wide. Most websites have a resolution of 1024px x 768px. Chose a header image that is 1024 pixels wide.
When it comes to background images, a file that is 1920 pixels wide x 1080 pixels high is ideal. This size image is a ratio of 16:9 and will fill the webpage without compromising the quality of your image.
The best logo image size for websites is usually 250px wide by 100px high and no larger than 320 pixels wide by 70-100 pixels high.
(Image link – https://unsplash.com/photos/FxtIWX8Q0J4)
Is image optimization worth the time?
Yes! In fact, it’s a critical element of having a user-friendly website. The good news is that there are many plugins and apps to help you compress your images without you having to be a tech whiz!
Need a little help to get oriented and awesome online?
Web optimization is just one piece of the puzzle. If your website could do with an SEO boost, I can help with:
- SEO web copy,
- keyword research
- SEO optimized blogs
Laura is a Copywriter who specialises in friendly, approachable copy that’ll kickstart a zillion conversations between you and your customers.
If you’re all at sea when it comes to digital marketing, she’ll guide you safely and surely to the perfect place for showcasing your products and services.
When she’s not at her desk, you’ll find her making a never-ending array of snacks and playing with her two young boys.