Merge pull request #63 from cortex-cms/topic/COR-807-Optimize-Images

COR-807: Optimize Images

Author: Alex Tharp

app/cells/plugins/core/asset_info/show.haml

@@ -8,7 +8,7 @@
     - if asset_is_image?
       .mdl-card__title
         %h2.mdl-card__title-text
-          = image_tag(asset['versions']['original']['url'], style: 'max-height: 200px;')
+          = image_tag(asset['versions']['original']['url'], style: 'min-height: 50px; max-height: 200px;')
     .mdl-card__supporting-text
       %dl
         %dt Original Filename

app/uploaders/asset_uploader.rb

@@ -1,7 +1,9 @@
 require 'image_processing/mini_magick'
+require 'image_optim'
 
 class AssetUploader < Shrine
   include ImageProcessing::MiniMagick
+  include Imageable
 
   plugin :determine_mime_type
   plugin :store_dimensions
@@ -25,14 +27,15 @@ class AssetUploader < Shrine
   end
 
   process(:store) do |io, context|
-    # TODO: Perform image optimizations (build plugin), support versions without processors or formatters
+    # TODO: support versions without processors
     context[:generated_hex] = SecureRandom.hex(8)
     versions = { original: io.download }
 
     if image?(io)
+      image_optim = image_optim_for(context[:config][:metadata][:image_optim_config])
       versions.merge!(context[:config][:metadata][:versions].transform_values do |version|
         processed_version = send("#{version[:process][:method]}!", io.download, *version[:process][:config].values)
-        convert!(processed_version, version[:format])
+        optimize_image!(processed_version, image_optim) # TODO: per-version image_optim_config
       end)
     end
 
@@ -48,8 +51,4 @@ def generate_location(io, context)
 
     ERB.new(context[:config][:metadata][:path]).result(binding)
   end
-
-  def image?(io)
-    MimeMagic.new(io.data['metadata']['mime_type']).mediatype == 'image'
-  end
 end

app/uploaders/concerns/imageable.rb

@@ -0,0 +1,30 @@
+module Imageable
+  extend ActiveSupport::Concern
+
+  included do
+    def image?(io)
+      MimeMagic.new(io.data['metadata']['mime_type']).mediatype == 'image'
+    end
+
+    def optimize_image!(image, image_optim)
+      pathname = image_optim.optimize_image!(image) # TODO: move to ActiveJob
+      pathname ? pathname.open : image
+    end
+
+    def image_optim_for(image_optim_config)
+      ImageOptim.new(process_image_optim_config(image_optim_config))
+    end
+
+    def process_image_optim_config(image_optim_config)
+      processed_image_optim_config = image_optim_config.merge(pngout: false, svgo: false, verbose: true, skip_missing_workers: false)
+      processed_image_optim_config.extend(Hashie::Extensions::DeepLocate)
+      quality_range_hashes = processed_image_optim_config.deep_locate -> (key, value, object) { key == :quality_range }
+      quality_range_hashes.each do |quality_range_hash|
+        quality_range_hash[:quality] = quality_range_hash[:quality_range][:begin]..quality_range_hash[:quality_range][:end]
+        quality_range_hash.delete(:quality_range)
+      end
+
+      processed_image_optim_config
+    end
+  end
+end

cortex-plugins-core.gemspec

@@ -21,12 +21,14 @@ Gem::Specification.new do |s|
   s.add_dependency "cells", "~> 4.1"
   s.add_dependency "cells-rails", "~> 0.0"
   s.add_dependency "cells-haml", "~> 0.0"
-  s.add_dependency "jsonb_accessor", "~> 1.0.0.beta"
+  s.add_dependency "jsonb_accessor", "~> 1.0"
 
   # AssetFieldType
-  s.add_dependency "shrine", "~> 2.6"
+  s.add_dependency "shrine", "~> 2.7"
   s.add_dependency "mimemagic", "~> 0.3"
   s.add_dependency "image_processing", "~> 0.4"
-  s.add_dependency "mini_magick", "~> 4.7"
+  s.add_dependency "mini_magick", "~> 4.8"
   s.add_dependency "fastimage", "~> 2.1"
+  s.add_dependency "image_optim", "~> 0.25"
+  s.add_dependency "image_optim_pack", "~> 0.5"
 end

lib/tasks/cortex/core/media.rake

@@ -32,16 +32,17 @@ namespace :cortex do
                              naming_data: {
                                title: fieldTitle.id
                              },
-                             versions: {
-                               large: { process: { method: 'resize_to_limit', config: { width: '1800', height: '1800' } }, format: :jpg },
-                               medium: { process: { method: 'resize_to_limit', config: { width: '800', height: '800' } }, format: :jpg },
-                               default: { process: { method: 'resize_to_limit', config: { width: '300', height: '300' } }, format: :jpg },
-                               mini: { process: { method: 'resize_to_limit', config: { width: '100', height: '100' } }, format: :jpg },
-                               micro: { process: { method: 'resize_to_limit', config: { width: '50', height: '50' } }, format: :jpg },
+                             versions: { # Move to YAML
+                               large: { process: { method: 'resize_to_limit', config: { width: '1800', height: '1800' } } },
+                               medium: { process: { method: 'resize_to_limit', config: { width: '800', height: '800' } } },
+                               default: { process: { method: 'resize_to_limit', config: { width: '300', height: '300' } } },
+                               mini: { process: { method: 'resize_to_limit', config: { width: '100', height: '100' } } },
+                               micro: { process: { method: 'resize_to_limit', config: { width: '50', height: '50' } } },
+                               rss: { process: { method: 'resize_to_limit', config: { width: '840', height: '840' } } },
                              },
                              keep_files: [:destroyed, :replaced],
                              path: 'media/<%= attachment %>/<%= original_name %>-<%= style %>-<%= generated_hex %>.<%= extension %>',
-                             storage: {
+                             storage: { # Move to YAML
                                type: 's3',
                                host_alias: ENV['HOST_ALIAS'],
                                config: {
@@ -54,6 +55,33 @@ namespace :cortex do
                                    cache_control: 'public, max-age=315576000'
                                  }
                                }
+                             },
+                             image_optim_config: {  # Move to YAML
+                               allow_lossy: true,
+                               jpegoptim: {
+                                 allow_lossy: true,
+                                 strip: 'all',
+                                 max_quality: 60
+                               },
+                               pngquant: {
+                                 allow_lossy: true,
+                                 quality_range: {
+                                   begin: 33,
+                                   end: 50
+                                 },
+                                 speed: 3
+                               },
+                               gifsicle: {
+                                 interlace: true
+                               },
+                               advpng: false,
+                               jhead: false,
+                               jpegrecompress: false,
+                               jpegtran: false,
+                               optipng: false,
+                               pngcrush: false,
+                               pngout: false,
+                               svgo: false
                              }
                            })
         media.fields.new(name: 'Description', field_type: 'text_field_type', validations: {presence: true})