Jump to content
humanafterall

PNG Image filesize after upload issue

Recommended Posts

Hi,

I'm getting some odd filesize issues with PNGs when uploading to Processwire.

I've optimised a PNG down to 260kb using Save for Web + ImageOptim.

Original image for upload

Once it has been resized by Processwire the filesize skyrockets to 7mb+

Resized image by Processwire

I've tried playing with the 'quality' setting but all it seems to do is degrade the quality of the image but the file size stays exactly the same.

Does anyone know what might be happening here to make a resized PNG such a huge filesize compared to the original?

Thanks!

Share this post


Link to post
Share on other sites

When compressing the PNG image with ImageOptim (and the underlaying programms) you reduce e.g. the color depth of each pixel indivually, you remove full alpha transparency on complete transparent pixels and you reduce the color palette. Lots of stuff happens and basically the whole file is "repacked".

ProcessWire isn't (and can't be) that intelligent. When resizing you create a new PNG file without all those optimization. ProcessWire reads the file and puts the image content into a new file using the full 24bit for every pixel of the PNG file. As you have already noticed, the quality settings don't have that much of an effect on the final image size.

You would have to use ImageOptim again on the thumbnail.

And as a shameless self promotion: There is our ProcessImageMinimize module/service which does exactly the same as ImageOptim but directly "on the fly" with ProcessWire. With the next version launching this weekend, you can minimize up to 2000 images for free.

  • Like 6

Share this post


Link to post
Share on other sites

When compressing the PNG image with ImageOptim (and the underlaying programms) you reduce e.g. the color depth of each pixel indivually, you remove full alpha transparency on complete transparent pixels and you reduce the color palette. Lots of stuff happens and basically the whole file is "repacked".

ProcessWire isn't (and can't be) that intelligent. When resizing you create a new PNG file without all those optimization. ProcessWire reads the file and puts the image content into a new file using the full 24bit for every pixel of the PNG file. As you have already noticed, the quality settings don't have that much of an effect on the final image size.

You would have to use ImageOptim again on the thumbnail.

And as a shameless self promotion: There is our ProcessImageMinimize module/service which does exactly the same as ImageOptim but directly "on the fly" with ProcessWire. With the next version launching this weekend, you can minimize up to 2000 images for free.

Philipp,

Thanks for the info - I understand now why Processwire was outputting PNGs at big filesizes.

I'm just testing out your service - so far so good!

Share this post


Link to post
Share on other sites

Oh, another one!  :)

It is very disadvantageous to use the param "quality" for the quality / compression of jpegs and the compression of pngs

because there is no quality setting for pngs. (Pngs are lossless)!

I don't use pngs myself because of their lack of supporting common metadata. And therefor I haven't realized how disadvantageous the current handling is.

We definitely need to regulate this independently:

a) different settings, one for quality (jpegs) and one for the png compression,

OR B) we only use quality for jpegs and set the compression level for pngs hardcoded to 9 (highest compression). <= Why not? Is there any reason why someone want to send the exact same visual quality with larger amount of data?

----------

EDIT:

Its unbelievable: http://images.pw.nogajski.de/image-sizer-core/formats/quality-vs-compression/

Edited by horst

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By thausmann
      Hey, I'm trying to completely switch over to WebP and noticed some strange behaviour. Let's say I upload a PNG in Processwire of size 1280x800.
      $page->image->url ➝ correct URL (filename.webp) $page->image->width(800)->url ➝ correct URL (filename.800x0.webp) $page->image->width(1280)->url ➝ wrong URL (filename.1280x0.png), webp file is not generated $page->image->width(1280)->url(false) ➝ correct URL (filename.1280x0.webp) but webp file is not generated So: When I request a size that equals the original file, no WebP conversion is happening (no webp file is created, although a new PNG is generated (...1280x0.png)).
      When I use url(false), I get the expected URL but still the file is not generated. Also interesting: this issue is only occuring with PNG, not JPG.
       
      My Configuration:
      $config->imageSizerOptions('webpAdd', true);  $config->imageSizerOptions('defaultGamma', -1); GD Pageimage::url Hook from here  Also tried to output width(1280)->webp->url, it makes no difference I checked that the PNG version is not smaller in filesize (PNG=450KB, WebP (from other tool)=60KB) Tested with Processwire 3.0.148 and 3.0.160 dev I think this post is about the same issue and where I got the url(false) from. Setting 'useSrcUrlOnFail' => false inside $config->webpOptions results in correct output URL (filename.1280x0.webp), but still the file is not generated. So maybe the webp conversion fails? Apparently I see zero webp logs in logs/image-resizer.txt  
      "Don't use resize" seems like a solution here but this is a generic approach in my code, sometimes uploaded images are simply already in the correct size. 
      Any ideas how to fix this and always get dem sweet sweet WebP images? Or did I find a bug?
      Maybe @horst has an idea what the cause of this phenomenon could be? 😇
    • By horst
      Hi, on a site I want to disable access to original images and only allow to access thumbnails and watermarked image variations.
      EDIT:
      A good solution for protecting original images can be found a bit down in this thread:
       
      Old content of this initial post:
       
    • By Guy Incognito
      I seem to be running into a repeated fatal error in a fresh PW install version 3.0.148. I can't quite put my finger on the pattern but it seems to be around deleting image fields or removing images from certain image fields.
      This is the trace from the log generated by trying to save a page and delete an image from an image field:
      Fatal Error: Uncaught Error: Cannot access protected property Pageimage::$original in /wire/core/PageimageVariations.php:256 Stack trace: 1. /wire/core/Pageimage.php(1327): PageimageVariations->getInfo() 2. /wire/core/Wire.php(386): Pageimage->___isVariation() 3. /wire/core/WireHooks.php(823): Wire->_callMethod() 4. /wire/core/Wire.php(450): WireHooks->runHooks() 5. /wire/core/Pageimage.php(1369): Wire->__call() 6. /wire/core/Pageimage.php(399): Pageimage->getOriginal() 7. /wire/core/WireData.php(333): Pageimage->get() 8. /wire/core/PageimageVariations.php(256): Pro Line 256 of /wire/core/PageimageVariations.php Earlier in the day I was experimenting with custom fields for images for the first time and kept running into this error, thinking it was me using this feature wrong and not having time to read up I deleted the custom image fields template and went about my business. So now I don't know if I triggered an issue or whether it was never related to the custom image fields in the first place?
      Any ideas?
    • By humanafterall
      I'm using some Custom fields for images: 
      https://processwire.com/blog/posts/pw-3.0.142/#custom-fields-for-files-images

      When I save the page, and return the fields are blank. When I re-add the text to the fields and save again then the fields save as expected.

      I know this is stated as being quite experimental but it's super useful feature I'd love to get working correctly.
      I have fields that are CKEditor fields but have overidden this on the image specific template. I've also tried it with regular text fields and I get the same bug.
      (currently using Processwire 3.0.155)
      **UPDATE**
      I've found this issue is specific to editing on pages using the PageTable fieldtype. The fields are not saving when I save the page in the PageTable.
    • By Robin S
      Displays image tags overlaid on the thumbnail using customisable colours. This makes it easier to see which images have which tags without needing to open the edit pane for individual images or changing to the list view.
      Screenshot

      Usage
      Enable tags for one or more image fields. Install the Image Thumbnail Tags module. Optionally configure colours for any of your tags.
       
      https://github.com/Toutouwai/ImageThumbnailTags
      https://modules.processwire.com/modules/image-thumbnail-tags/
×
×
  • Create New...