Through various techniques and algorithms, you can optimize images, that is, reduce their file size yet still maintain a high visual quality. This article shows you how to optimally reduce image sizes in Ruby and Cloudinary.
Effective management of images involves taking into account four criteria: quality, size, format, and metadata, with quality and size a balancing act for optimization. Here are three major reasons why optimization counts:
- Bandwidth. Bandwidth costs money both on your part as the site’s host and on your audience’s part. Optimizing images saves bandwidth.
- Download time. Loading unoptimized images takes longer, and viewers who must wait for quite a while for a page to load might never return.
- Storage space. Smaller images need less storage space. Consider this typical scenario: 100 user-uploaded images that weigh 5 MB each—and that you optimize to 2 MB each with no quality loss—require only 200 MB of storage instead of the original 500 MB.
You can downsize images in Ruby with one of three gems: piet, image_optim, and mini_magick.
To install **piet**, which optimizes images with the **optiPNG ** and **jpegoptim** utilities, type:
gem install piet
For example, to optimize an image called dog.jpg in Ruby, type:
Piet.optimize(‘/images/dog.jpg’)
To generate and display the related output, add the option :verbose => true:
Piet.optimize('/images/dog.png', :verbose => true)
Code language: JavaScript (javascript)Here’s an output example:
Processing: dog.png
340x340 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 157369 bytes
Input file size = 157426 bytes
Trying:
zc = 9 zm = 9 zs = 0 f = 1 IDAT size = 156966
zc = 9 zm = 8 zs = 0 f = 1 IDAT size = 156932
Selecting parameters:
zc = 9 zm = 8 zs = 0 f = 1 IDAT size = 156932
Output IDAT size = 156932 bytes (437 bytes decrease)
Output file size = 156989 bytes (437 bytes = 0.28% decrease)
Furthermore, you can convert 24- or 32-bit PNGs to paletted (8-bit) PNGs with piet, significantly reducing their sizes and preserving full-alpha transparency:
Piet.pngquant('/a/path/where/you/store/the/file/to/convert')
Code language: JavaScript (javascript)For more options, see the related documentation.
**image_optim** is a comprehensive gem that takes advantage of numerous utilities, such as jhead, jpegoptim, jpeg-recompress, jpegtran, optipng, pngcrush, pngout, and pngquant.
To install image_optim, type:
gem install image_optim
Afterwards, to invoke image_optim In your Ruby app, type:
image_optim = ImageOptim.new
image_optim = ImageOptim.new(:pngout => false)
image_optim = ImageOptim.new(:nice => 20)
Code language: PHP (php)Then, to optimize an image called dog.jpg, type:
image_optim.optimize_image('dog.png')
Code language: JavaScript (javascript)For more options, see the related documentation.
With **mini_magick**(https://github.com/minimagick/minimagick), a wrapper for ImageMagick, you can access all ImageMagick options.
To add mini_magick to your Gemfile, type:
gem "mini_magick"
Code language: JavaScript (javascript)To have mini_magick resize an image called dog.jpg as a copy of the original, type:
image = MiniMagick::Image.open("dog.jpg")
image.path #=> "/var/folders/k7/6zx6dx6x7ys3rv3srh0nyfj00000gn/T/magick20140921-75881-1yho3zc.jpg"
image.resize "300x300"
image.format "png"
image.write "output.png"
Code language: PHP (php)Omitting the write method above enables you to modify the original image. For more options, see
the related documentation.
With Cloudinary, you can quickly and intuitively optimize images regardless of the programming language. By default and through automation, Cloudinary optimizes all transformed images, efficiently delivering the final version through integrated content delivery networks (CDNs). Among the many Cloudinary capabilities are the following:
Automated quality compression and encoding. Through the **q_auto** parameter, Cloudinary selects the optimal quality-compression level and encoding settings according to the image content, format, and viewing browser. The result is a sharp yet downsized image. For example:
To adjust the visual quality of images, add the **q_auto:best**, **q_auto:low**, **q_auto:good**, or **q_auto:eco** parameter to the dynamic URL.
Automated transformation. The **f_auto** parameter enables Cloudinary to analyze the image content and then select the best format for delivery: for example, WebP for Chrome, JPEG-XR for Internet Explorer, and the original format for all other browsers.
A combination of f_auto and q_auto causes Cloudinary to still deliver WebP and JPEG-XR to the relevant browsers. However, if the quality algorithm determines that PNG-8 or PNG-24 is optimal for certain images, Cloudinary switches the delivery format to either of those two, as appropriate.
Image resizing and cropping with w and h parameters. By adding to URLs the width (w) and height (h) parameters along with the dimensions you desire, you instruct Cloudinary to resize the images accordingly but maintain the aspect ratio:
Cloudinary supports these image-cropping modes: scale, [fit](https://cloudinary.com/documentation/image_transformations#fit), mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, and imagga_scale.
Optimizing images is a priority task for enhancing page performance. The optimization procedures in Ruby and in Cloudinary, as described in this post, are just the tip of the iceberg. For more ideas, read this Cloudinary post and the related Cloudinary documentation.
- Image Optimization and Fast Delivery of Websites With Cloudinary
- Compressing, Resizing, and Optimizing PHP Images
- Python Image Processing, Compression, and Manipulation
- Vue.js Tutorial: Image Optimization for Web Apps
- Image Optimization for WordPress
- The Pros and Cons of JPEG 2000 and Other Common Image Formats
- Adopting the WebP Image Format for Android on Websites Or Native Apps
- Fixing the Top 10 Mistakes in Handling Website Images
- Automatically Reduce Image Size Without Losing Quality
- Generate Image Placeholders the Automated Way to Accelerate Page Loads
- Three Ways to Do Progressive JPEG Encoding
