How to Optimize Images for your Website
You can reduce your image’s file sizes to help improve your website’s performance and loading time. You do not want images to be larger than necessary as large images can slow down a website, and may also cost more if you’re buying them.
Many modern cameras create very large images – in terms of pixels (px) and file size – which will usually need sizing down and compressing before uploading to a website.
When downloading free or paid-for photos, you will often have a choice of image size, so make sure you download an appropriate size.
Image File Sizes
Photos from a typical camera will usually be several MBs in terms of file size, but for your website, the smaller the file size size the better. The file size is partly determined by the number of pixels that make the image up.
Every photograph, in digital form, is made up of pixels and is generally measured as width x height in pixels. Similarly, your desktop, tablet or mobile screen will have a screen resolution which is also generally measured in pixels.
As of early 2019, a typical laptop will have a screen resolution of 1366px (width) by 768px (height). In practical terms, this means you usually do not need a photo with a width of more than 1366px or height greater than 768px, and often a smaller size will suffice.
The only exception to this is if an image is to be displayed fully on the screen. To cater for bigger screen sizes (often 1920px wide), a width of 1600px should provide a good enough resolution.
What you can do – resize and compress
The basic trick is to reduce your image file size whilst maintaining the quality of the image. Try to aim for something under 300kb (note 1MB=1000kb), and ideally something much smaller than that.
You can use a basic photo editor to resize photos. If you’ve not got the rather expensive Photoshop, there are plenty of free editors available such as Photoscape or Pixlr, and Shopfiy have a good simple online image resizer.
Some editors will also help compress an image or save it at a lower quality to reduce the file size, but if your editor does not compress images or even if it does, a good place online to compress images is TinyPng. Despite the name, this compresses both the main image formats – JPEG and PNG images – whilst maintaining no noticeable difference to image quality.
Note that JPEGs (or JPGs) are best for photos and the default format for cameras. These have a smaller file size than PNGs. PNGs are best for graphics such as logos or if a transparent background is required.
Images that are too small
Finally, do not upload images that are too small either. A photo needs to be an appropriate size and quality to display well on a website, and images that are too small or that have been too compressed will either leave a lot of white space or may look stretched, unclear and or blurred. It’s a balance between quality and size.
If you need help with your images, please contact me and I can resize and compress them for you.