Merge pull request #8358 from tclaus/supporting_heic_images

Using webp as storage format for images

Changelog.md

@@ -36,6 +36,7 @@ Although the chat was never enabled per default and was marked as experimental,
 * For pods running PostgreSQL, make sure that no upper-case/mixed-case tags exist, and create a `lower(name)` index on tags to speed up ActsAsTaggableOn [#8206](https://github.com/diaspora/diaspora/pull/8206)
 * Allow podmins/moderators to see all local public posts to improve moderation [#8232](https://github.com/diaspora/diaspora/pull/8232) [#8320](https://github.com/diaspora/diaspora/pull/8320)
 * Add support for directly paste images to upload them [#8237](https://github.com/diaspora/diaspora/pull/8237)
+* Add support for webp images and convert new png/jpg to webp to save space and bandwidth [#8358](https://github.com/diaspora/diaspora/pull/8358)
 
 # 0.7.18.0
 

app/assets/javascripts/helpers/post_photo_uploader.es6

@@ -59,8 +59,8 @@ Diaspora.PostPhotoUploader = class {
         promptForName: true
       },
       validation: {
-        acceptFiles: "image/png, image/jpeg, image/gif",
+        acceptFiles: "image/png, image/jpeg, image/gif, image/webp",
-        allowedExtensions: ["jpg", "jpeg", "png", "gif"],
+        allowedExtensions: ["jpg", "jpeg", "png", "gif", "webp"],
         sizeLimit: (window.Promise && qq.supportedFeatures.scaling ? null : this.sizeLimit)
       },
       messages: {

app/assets/javascripts/mobile/mobile_profile_photo_uploader.js

@@ -11,8 +11,8 @@ Diaspora.ProfilePhotoUploader.prototype = {
     new qq.FineUploaderBasic({
       element: document.getElementById("file-upload"),
       validation: {
-        acceptFiles: "image/png, image/jpeg, image/gif",
+        acceptFiles: "image/png, image/jpeg, image/gif, image/webp",
-        allowedExtensions: ["jpg", "jpeg", "png"],
+        allowedExtensions: ["png", "jpg", "jpeg", "gif", "webp"],
         sizeLimit: 4194304
       },
       request: {

app/models/photo.rb

@@ -38,6 +38,7 @@ class Photo < ApplicationRecord
 
   mount_uploader :processed_image, ProcessedImage
   mount_uploader :unprocessed_image, UnprocessedImage
+  attr_accessor :keep_original_format
 
   belongs_to :status_message, foreign_key: :status_message_guid, primary_key: :guid, optional: true
   validates_associated :status_message
@@ -50,7 +51,6 @@ class Photo < ApplicationRecord
 
   after_commit on: :create do
     queue_processing_job if author.local?
-
   end
 
   scope :on_statuses, ->(post_guids) {

app/services/import_service.rb

@@ -74,6 +74,7 @@ class ImportService
   def store_and_process_photo(photo, uploaded_file, random_string)
     File.open(uploaded_file) do |file|
       photo.random_string = random_string
+      photo.keep_original_format = true
       photo.unprocessed_image.store! file
       photo.update_remote_path
       photo.save(touch: false)

app/uploaders/processed_image.rb

@@ -12,7 +12,7 @@ class ProcessedImage < CarrierWave::Uploader::Base
   end
 
   def extension_allowlist
-    %w[jpg jpeg png gif]
+    %w[jpg jpeg png gif webp]
   end
 
   def filename

app/uploaders/unprocessed_image.rb

@@ -18,20 +18,34 @@ class UnprocessedImage < CarrierWave::Uploader::Base
   end
 
   def extension_allowlist
-    %w[jpg jpeg png gif]
+    %w[jpg jpeg png gif webp]
   end
 
   def filename
-    model.random_string + File.extname(@filename) if @filename
+    model.random_string + extension if @filename
+  end
+
+  def extension
+    needs_converting? ? ".webp" : File.extname(@filename)
+  end
+
+  def needs_converting?
+    extname = File.extname(@filename)
+    %w[.webp .gif].exclude?(extname) && !model.keep_original_format
   end
 
   process :basic_process
 
   def basic_process
     manipulate! do |img|
-      img.auto_orient
+      img.combine_options do |i|
-      img.strip if strip_exif
+        i.auto_orient
+        i.strip if strip_exif
+      end
+
       img = yield(img) if block_given?
+
+      img.format("webp") if needs_converting?
       img
     end
   end

spec/models/photo_spec.rb

@@ -17,12 +17,13 @@ describe Photo, :type => :model do
     @aspect = @user.aspects.first
 
     @fixture_filename  = 'button.png'
+
     @fixture_name      = File.join(File.dirname(__FILE__), '..', 'fixtures', @fixture_filename)
     @fail_fixture_name = File.join(File.dirname(__FILE__), '..', 'fixtures', 'msg.xml')
 
-    @photo  = @user.build_post(:photo, :user_file => File.open(@fixture_name), :to => @aspect.id)
+    @photo = @user.build_post(:photo, user_file: File.open(@fixture_name), to: @aspect.id)
-    @photo2 = @user.build_post(:photo, :user_file => File.open(@fixture_name), :to => @aspect.id)
+    @photo2 = @user.build_post(:photo, user_file: File.open(@fixture_name), to: @aspect.id)
-    @saved_photo = @user.build_post(:photo, :user_file => File.open(@fixture_name), :to => @aspect.id)
+    @saved_photo = @user.build_post(:photo, user_file: File.open(@fixture_name), to: @aspect.id)
     @saved_photo.save
   end
 
@@ -90,7 +91,7 @@ describe Photo, :type => :model do
       @photo.update_remote_path
 
       expect(@photo.remote_photo_path).to include("http")
-      expect(@photo.remote_photo_name).to include(".png")
+      expect(@photo.remote_photo_name).to include(".webp")
     end
   end
 
@@ -182,7 +183,15 @@ describe Photo, :type => :model do
         @photo.unprocessed_image.store! file
       }.to raise_error CarrierWave::IntegrityError
     end
+  end
 
+  describe "converting files" do
+    it "convert to webp" do
+      with_carrierwave_processing do
+        @photo.unprocessed_image.store! File.open(@fixture_name)
+      end
+      expect(@photo.remote_photo_name).to include(".webp")
+    end
   end
 
   describe "remote photos" do