The below is a quick and easily [and free] way to reduce the size of the images you upload to to the web.  


The benefits of serving smaller-sized images include:

  • Reduced requirements for storage
  • Quicker uploads
  • Increased site responsiveness (faster image downloads) and a better user experience


As a general rule you don't want to serve images much bigger than about 100KB.



How to reduce an image:

  • Select an image that you want to make smaller
  • Open up your favourite browser (Chrome, Safari, Edge, Brave, Firefox, etc.) and search for a free photo editor, like pixlr.com. Or use a photo editing software, like photoshop
  • If using pixlr, do the following:
    • Click the "open image" button and select your image (or drag your image over the button)
    • If your image is very large you may receive a dialogue that asks you to pre-resize the image - just click the web - this will be large enough for most of your requirement.
    • If you don't want to crop/resize your image further just click "save"
    • A new dialogue will appear asking you to select the quality, type and size of the image you want to save, under the thumbnail of the image you can see the estimated size
    • When you are happy with the size, format and quality, just click "save as"; give your image a name, and specify where you would like to save it, and click "save".
    • NB: Just by doing the minimum (i.e. clicking the web selector, and doing nothing else), the file I edited was reduced from 6.13MB to 550KB - giving a saving of over 90%.
  • If using other software or online editing tools, the process will be similar - after you've opened the image, change the size of the image and re-save it.



Note: For most cases you will likely want to save the image as a JPG, this is currently the most common image format on the web, however it is a "lossy" compression - i.e. details of the image are lost after each edit and save. So it is probably best to use the "save as" option to save a new file - so you can keep both the original image, and the compressed one.


Another downside of the JPG format is that it doesn't support transparent backgrounds, but a major upside is that is has very good support (i.e. will work everywhere). There are other formats that do, such as the "lossless" (opposite to lossy) compression PNG, which does support transparent backgrounds, but often has a larger file size (as it has to retain the information).


Moving forward, the are newer formats designed to replace JPG and PNG, such as WEBP which supports both "lossy" and "lossless" compression, transparent images, and has better compression that JPG - however it is not currently as widely supported as either JPG or PNG.