Image Template Compression JPG vs PNG

Intro: "Quality" is one of the most commonly used commands within our Image Templates at QBank. You can adjust it by selecting a value between 1 - 100 in the command. The lower the value, the more compression will be applied. Compression is a great tool for making your images more suited for web, making your image size smaller to improve site speed performance for example. 

Generally, more compression equals a smaller file size, but a worse quality, so you want to find the balance between good looks and file size, which generally resides somewhere in the 70-80 range.

Step-By-Step: 

1. Go to Administration >> Templates >> Image
2. Select the template that you want to edit
3. Edit or Add the Command "Quality"
4. Set a value between 1 - 100
5. Save the template

Important note: While file size is affected by the image quality, the main decider for an image file size is first of all the image resolution, and secondly the meta data that may be included in the file. Make sure to tune these parameters correctly before fine-tuning quality!

JPG vs PNG: 

While you can be creative with JPG compression according to your requirements, and try values such as 30 - 40 in Quality, you cannot proceed the same way when applying compression on a PNG file. 

Depending on the PNG file, you may for example notice big color losses when compressing PNGs. We generally recommend avoiding the Quality command entirely, or applying a higher a value of 90-100, when creating PNGs files with our Image Templates. 

Examples

Here you can see an image where we have applied a Quality 100 in JPG and comparing it with a Quality 60 - We can hardly notice the difference as Compression performs well on JPG. 

We have reduced the file from 900 kb to a 111 kb file by lowering the Quality from 100 to 60.

See results with a heavy compression from 100 to 20

Here, we can see a drastic file size change from 900 kb to 53 kb, however we start to notice a drop in quality with some pixels appearing on the image with 20 in Quality. 

Conclusion

Depending on how your image will be used, and the resolution that it will be displayed on your website, you may choose a compression that suits your needs. We highly recommend to make tests and download your template, directly while in QBank, before publishing your assets so that you know what you will get upon publishing.

For any further help regarding Image Templates, please contact us at support@qbank.se