Is your website slow? If so, images could be the problem. Images are an important part of modern websites, but many photos are huge and not optimized for web usage. Image optimization can lead to quicker load times, an improved user experience and increased site views.
Resizing
What size should an image be? That depends on the image’s footprint on the page. Is it a small image or is it full-width? Or is it somewhere in-between? Image sizes vary by site, but in general, small thumbnail images should be no more than 350 pixels wide. Full-width images should be 2560 pixels in width, the common resolution width for larger monitors. Larger images that are used in modals, lightboxes, etc. should be no more than 1000 pixels wide.
Compression
Compression is reducing the file size of your images. The file size of an image is different than the image’s dimensions. The best file formats for image compression are PNG, JPG, and GIF.
What file size should your images be? For large images, stay under 100KB. For medium size images, the goal is 50KB. For small and thumbnail images, shoot for no more than 30KB.
Lossy and Lossless Optimization
There are two types of image compression that you can use, lossy and lossless:
Lossy compression or irreversible compression removes some data from the original image file. Once the data is removed, it cannot be added back. Lossy compression will greatly reduce the size of your image file, but this can affect the quality of the image. When using lossy compression, it is important to find a balance between quality and size.
Lossless compression reduces the size of an image without affecting the quality. This can be achieved by removing meta data from JPEG and PNG files. The big benefit of lossless compression is that it allows you to retain the quality of your images while reducing their file size.
Tools
There are many image optimization tools available. Adobe Photoshop is by far the most well-known of these, but there are many other tools and programs, some free, that you can use to optimize images. Some help you perform your own optimizations and others do it all for you.
If you have a WordPress site, there are many wonderful plugins that can do a great deal of image compression for you. Check out this compiled list of some of our favorites.