Image optimization in concrete5

Image optimization should be automated. In this blog I explain how images can be (automatically) optimized in concrete5.

In October 2017, mrkdilkington posted on Slack a link to a guide about Image Optimization. It is an interesting read and highly recommended.

The conclusion is, Image Optimization is important and we should use it. We, as web developers, should know how to optimize images. During talks with others I came across a few misconceptions:

1. It's not necessary, Photoshop can handle it.

True, Photoshop will optimize your images. It's recommended to do so when building templates and such. However, the client is going to upload images, photos, slides, etc. Those images probably won't be optimized and that problem becomes bigger as the website grows.

2. It's not worth the time.

Depends. On small websites you probably have bigger problems, e.g. attracting visitors. However, on websites with various pages, slideshows, galleries, etc. the number of images quickly increases. Automated image optimization would then become really beneficial.

3. It doesn't solve the problem; if a client uploads a 7MB image, the optimized image will only be let's say 1MB smaller. So is still (too) big!

True, but that is a different problem. If a client uploads a 7MB photo for a slideshow, you problably need to a) instruct the user, b) change the code to use thumbnails, c) automatically resize the proportions, or d) restrict upload file size. It just doesn't make any sense to say that image optimization is useless. It's a different problem. Once you have a certain resolution, e.g. a slide image of 1920x480 72dpi, an image optimizer can do its work.

Usage in concrete5

I've created Image Optimizer, an add-on for concrete5 8.x. To give you an idea of how useful it is: it took 66% of this site's total file size away. This number is quite high because a lot of PNG screenshots are being used.

Can it be automatized?

You can schedule the automated job and run it via a cron job. It will optimize each file (version) once.

Here is an example of an optimized image:

The image is 23% smaller after optimization


View the Image Optimizer add-on.