If you’re uploading regular content to your website (and you should be) or anywhere online, there are a few simple things that you should be doing to your images first. You can do this with any image editor like Photoshop or Affinity Photo.
1. Check Copyright
The first thing you want to do for any image you use online is pretty simple and get’s missed by a lot of people and small companies. Make sure that the image you’re using isn’t breaking any copyright laws – if it’s an image from Google, for example, it probably is.
If you don’t want to pay licensing fees there’s a number of websites that give free access to royalty free, commercial use images on the web. Pexels is our most used, but a quick search online will give yield plenty of options. The most important thing is that you always use high-quality images – low resolution, blurry, poorly composed, or even watermarked images are a huge no-no.
You can read our article here to find our 5 favourite sources of FREE stock photography.
2. Resize Your Image
You need to think about where the image is going to be used – more specifically how big is it going to be on screen. You never want to use an unnecessarily large image online. More pixels = bigger file sizes = longer load times = lost customers. So scale your image down (never up) to the smallest resolution you can.
3. Exporting Your Image – Jpeg or PNG
Next, you want to choose a format to export your image. For online images, there’s really only 3 choices: jpeg, png, or gif. GIFs are only used for animated images so we’ll ignore that option in this article.
If your image needs to have any kind of transparency in it (like our logo in the image above) you should export the image as .png, so choose a filename (something less generic than image1 ideally), select png and hit export, choosing ‘smallest file size’ and not ‘interlaced’ if your image editor gives you the options.
If you don’t need to have a transparent background you should use .jpeg as the file sizes are smaller. You’ll also be asked to select a quality level, which affects the level of compression used in the image. You want to select as small a number as you can before you see any noticeable degradation in the image. That’s usually somewhere between 10 and 5 for most images.
4. Optimize Your Image
You can and should do this step even if you don’t have an image editing program on every single image you upload.
Go to Optimizilla and upload your image. You then want to adjust the slider on the right-hand side as low as possible before you see a decrease in image quality. You can use the 2 windows to zoom and compare before and after compression. When you’ve got it as low as possible hit apply, and then download the image.
Yes, we even compressed this example image to upload to the post, we mean it when we say every image! Optimizilla took our png screenshot from 540kb to a teeny tiny 84kb. That’s almost half a meg saved on a single image!
It may look like a lot to do for every image you upload, but you can complete the whole process in as little as 30 seconds. Your customers and readers will love the faster load speeds.
If you refuse to do any other step in this guide at least use Optimizilla to compress your image, and finally no, we are not in any way affiliated with Optimizilla – it’s just a really good tool we wanted to share.