Provide better support for high resolution images in mosaico #371
Conversation
|
@deepak-srivastava I have tested and it works great. FYI for others wanting to test here's how. First I made a backup of the existing mosiaco extension directory in my CiviCRM. Then I downloaded the .zip from this branch and copied its files over the existing mosaico extensions directory, replacing the existing code with the new. Then I cleared Civi cache, and went to Administer > CiviMail > Settings to see the 2x/3x options for image sizing. |
|
@deepak-srivastava Can you rebase and resolve conflicts please? |
… Interface to abstract
… config example update
deepak-srivastava
force-pushed
the
2.x-high-resolution-images
branch
from
39acd99
to
c07c78e
Compare
|
@mattwire rebase done. Thanks. |
|
Hi there, First, sorry it has taken me so long to respond. I have been testing this a bit and have had some inconsistent results. Not sure what I am doing wrong - but some images are not compressing properly. Attached is a 1920*1080 PNG and JPG. 2.9 and 1.3MB respectively. My settings are set 3x up to 570px When I upload, it changes the image to 1602x901 - so the 2x is working, but it does not compress the images at all. I tested the JPG on the mosaico.io website - and it does compress the 1.3MB jpg to about 100KB (at 1x) - I was unable to upload the PNG via mosaico.io due to size restrictions. |
|
@themak1985 Your config "3x up to 570px" covers all the images including the single block images. Which means when you upload a 1920x1080 image in a 570x200 block, the image gets processed and stored as 1710x962 (where 570*3 = 1710) which in terms of size is almost same as the original image. If you remove the scaling factor, image is uploaded to a resolution of the block in the template, keeping lower resolution and higher compression. Note that functionality is not tied to any particular type of image. Png format supports lossless compression and therefore compression appears less than jpg images which support lossy compression. Now a better config where you can achieve better compression for large images is: 3x upto 285 px OR 3x upto 285 px Hope that helps. |
|
@deepak-srivastava Can you add some docs for this? Maybe create a new "Setup.md" page? |
|
@deepak-srivastava This is just pending documentation so we can merge. |
|
@mattwire Have added a setup.md doc. For now it only includes section on scaling factor. |
|
@deepak-srivastava Thanks that looks great. Just two small things:
|
|
@deepak-srivastava Thanks - with the images please remove the leading |
|
@mattwire Yeah noticed image were not rendering. Checked in before reading your comment. './' seems to work. Do you still require change? |
|
@deepak-srivastava It has to be |
Overview
The PR attempts to provide better support for high resolution images in mosaico #50.
Technical Details
A new config has been added for user to specify resize scaling factor:
When uploading images, the mosaico editor trims it down to very required size (in pixels).
The solution uses scale factor setting to keep some buffer (2x or 3x) so upscale doesn't look distorted or low resolution.
The new method adjustResizeDimensions() part of graphics interface class, makes it work by modifying the requested resize numbers by editor, before they are used for processing by resize and cover image operations/methods.
Tests
A new e2e test case tests adjustResizeDimensions method for various inputs.
Manual test result:
If anyone else could test the PR, would be great. cc: @Stoob
PR Testing Notes