How do you create friendly (progressive or interlaced) images of the retina (iPad) using CarrierWave?

Question

There are many reports that Mobile Safari shrinks very large JPEG images, making it difficult to implement retina-friendly solutions for the new iPad.

The solution is similar to encoding JPEGs as progressive / interlaced files. Therefore, I am curious how I can use the CarrierWave and RMagick extension plugins to create this file type.

Thanks!

Answer 1

You can use MiniMagick :

manipulate! do |img| img.strip img.combine_options do |c| c.quality "90" c.depth "8" c.interlace "plane" end img end 

Answer 2

Today you will need a version of the carriewave repository, since support for options[:write] has not yet been released.

So, in your Gemfile, use the following:

gem 'carrierwave', :github => "jnicklas/carrierwave"

Then in your bootloader you can define something like the following:

 version :big do process :resize_to_limit => [1024, 1024] process :optimize end def optimize manipulate! do |img, index, options| options[:write] = { :quality => 90, # Change the quality to 90% :depth => 8, # Set the depth to 8 bits :interlace => "Magick::PlaneInterlace" # Add progressive support for JPEG } img.strip! # Remove profile data end end 

Useful link: http://www.imagemagick.org/RMagick/doc/constants.html#InterlaceType

Enjoy it!

Answer 3

I packaged solutions like a gem https://github.com/jhnvz/retina_rails

You should do the following:

• Add the gem 'retina_rails' to your gemfile.
• Run bundle install .
• Add //= require retina to your Javascript manifest file (usually located in app / assets / javascripts / application.js).

Carrierwave

• Add include RetinaRails::CarrierWave to the bottom of your bootloader

   class ExampleUploader < CarrierWave::Uploader::Base version :small do process :resize_to_fill => [30, 30] end include RetinaRails::CarrierWave end 

Clip

• Add include RetinaRails::Paperclip to the bottom of your bootloader

   class ExampleUploader < ActiveRecord::Base has_attached_file :image, :styles => { :original => ["800x800", :jpg], :big => ["125x125#", :jpg] } include RetinaRails::Paperclip end 

The gem automatically generates retina versions (adds @ 2x to the file name) based on your specific versions in the bootloader. Js checks to see if users got a mesh display, and if so, adds @ 2x to the image file name.

Answer 4

I could encode images in Progressive JPEG by doing the following for my CarrierWave downloader:

 class ImageUploader < CarrierWave::Uploader::Base include CarrierWave::MiniMagick process :optimize #For the real image version :version_1 do # other processes process :optimize end version :version_2, from_version: :version_1 do # other processes process :optimize end version :version_3, from_version: :version_2 do # other processes process :optimize end def optimize manipulate! do |img| img.combine_options do |c| c.strip c.quality '100' c.depth '8' c.interlace 'Line' end img end end end 

You must place the last process that converts the image to Progressive JPEG, otherwise it will not be converted.

Then, if you have already uploaded some images and want to recreate them. Imagine your model:

 class Picture < ActiveRecord::Base mount_uploader :image, ImageUploader end 

So, you must do the following to recreate the versions:

 Picture.order("id ASC").each do |p| p.image.recreate_versions! puts "#{p.id}, #{p.image.url}" end 

I ordered an image based on the identifier, because if it did not go in the middle of the process, I have an identifier, and I can continue with this ID. Another thing you can do is to save any exception and save photos that do not work in an array, something like this:

 errored = [] Picture.order("id ASC").each do |p| begin p.image.recreate_versions! rescue => e errored << p.id end puts "#{p.id}, #{p.image.url}" end 

Finally, to verify that the image was converted to Progressive JPEG, with ImageMagick installed, enter the following into the terminal:

 identify -verbose PATH_TO_IMAGE | grep Interlace 

If the image is a progressive JPEG, the output will be Interlace: JPEG , if not Interlace: None