Posted about 3 years ago. Visible to the public. Repeats.

Optimizing images for web

For webpages to load fast it's recommended to optimize images. Ideally an image's file size should be as small as possible while still being of decent quality. This card demonstrates two command line tools for image optimization

Use identify to fetch information about pictures. convert can change size/quality and strip meta information. Both commands are supplied by ImageMagick.

Copy
$ identify in.jpg in.jpg JPEG 294x440 294x440+0+0 8-bit sRGB 92.8KB 0.000u 0:00.000 $ convert in.jpg -resize x220 -strip -set profile sRGB2014.icc -quality 85 out.jpg $ identify out.jpg out.jpg JPEG 147x220 147x220+0+0 8-bit sRGB 10.1KB 0.000u 0:00.000

Always check the output for quality and compare to the original. It's also important to set a color profile after using ImageMagick's -strip method.

For some projects we used TinyJPG in the past, which is a web service that will significantly reduces file sizes even further.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Daniel Straßner
Last edit:
12 months ago
by Tobias Kraze
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Daniel Straßner to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more