Why Optimize Your Images?
When uploading images to a website you should always optimize your assets to prevent poor user experience from a slow loading page. If you are on macOS or Linux, one way to help with this is with a cool tool called ImageOptim. ImageOptim is used to optimize images in both a lossy and lossless manner. Lossy means that the data removed is not restored, whereas lossless rebuilds the data after the compression.
How ImageOptim Can Help
ImageOptim helps in two ways. First, it can remove metadata from an image. Metadata can be the location a picture was taken or the camera settings when the photo was shot. Second, ImageOptim can remove image data. This does degrade the quality a little, but it’s more important to optimize your images for the web vs. loading in a larger image.
For Example:
Here we have a random image at 1.2MB.
Here is that same image after being run through ImageOptim in a lossy manner. We reduced the size of the image by more than half.
Here are the settings used in this example:
Resizing Images
Now, this image was only reduced in size to 542KB, which is still way too large for the web. The issue with this particular image is it’s dimensions, it’s 5000×5000. In this example, the image should also be resized in an image editing application to reduce its file size to less than 100KB for web usage. Once resized, you can run the image through ImageOptim again to further optimize your photos.
You can also batch optimize your photos by dragging an entire folder into ImageOptim and run them all at once. Although ImageOptim does not resize your photos it’s important to seek out as much savings as possible before uploading your images to the web.
Use tools like ImageOptim to further speed up your website by removing unnecessary data that does not need to be loaded by your users.
Gray Digital Group helps ensure client websites are responsive and maintain high quality functionality. Let us know if we can help you!
Sources:
