PNG file size increased on image upload

[wsjmdavies]

Hi, i'm quite new to processwire and have been getting on very well with it.

I've noticed an issue when I upload an (exported from Photoshop) PNG with alpha via the image field. The original file was only 34kb, but after uploading its now 138kb?

Can anyone help me figure out whats going on? I've searched Google and the forums, but could not find an answer.

This doesn't seem to happen with JPEGS.

Thanks in advance!

[horst]

Hi @wsjmdavies, welcome to the forums.

This seems to be not exactly determined what you've explained. But no problem, we can go together step by step to inspect what happens.

Regarding uploaded (original) images and image variations:

• If you upload new images to an images field, the original uploaded files never get altered, with one exception. (I come to this later *)
• So, the original (uploaded) file regularly is unaltered, means has the exact filesize and contents as your local copy.
• Only the filename will get altered to match the criterias for asset filenames in PW. (all lowercase, 0-9, a-z, _-, no dots, etc)

Image variations derives from the original uploaded source and are altered according to your request. (different dimensiones, optionally cropped, etc). A few part is reflected in a suffix that is appended to all image variations filename. (basename.jpg becomes basename.0x100.jpg or that like)

---

How have you determined that the original file gots altered?

What are your settings in the images field? Do you have any setting there in the fields for max-width or max-height? (* this would be the only exception where uploaded files can get altered!)

You have uploaded an image that contains compressed image (bitmap) data. Photoshop is able to apply a (hopefully) lossless compression to the bitmap data before storing it into the image file. ImageRenderingEngines in webenvironments often have not included equal compression algorithm. SO they uncompress the bitmap data, alters it, and stores it uncompressed, or with much lower compression rate into a new file. (What explains why a new (variation) file has higher filesize)

BTW: using compressed images as original sources for variations is a bad idea. It is not much relevant with PNGs, but highly with JPEGs:

• mostly you will not serve the originals, (or you shouldn't do), but generate and serve variations.
• to generate one, you need to open (and uncompress compressed bitmap data) of the original image (more CPU usage each time)
• with JPEGs, what do not have lossless compression, you multiply building of compression artefacts with each saving / compression of bitmap data

Best practice is: upload (original) images with 100% quality, and / or without compression. Do not serve those originals directly! If you need to serve images with the full dimensions, create a variation with 100% width/height, but lesser quality (e.g. 80% - 90%)

$original = $page->images->first();
$options = array('quality' => 80, 'forceNew' => true);     // forceNew is recommended for testing purposes only!!
$variation = $original->width($original->width, $options); // create an identical variation with lesser quality and filesize

[wsjmdavies]

Hi Horst,

Wow that makes perfect sense to me!

Quite new to process wire, so wasn't 100% sure how the image uploads worked....but now I will start uploading originals and creating variations as you mentioned.

Thank you so much for you reply, much appreciated.

[matjazp]

Horst, thank you for explanation. One question: if you don't use $options array then $config->imageSizerOptions from /wire/config.php is used? So when you use just $img->width(xxx) then default quality of 90 will be used? And what options are used when you resize/crop the image in admin interface (in image UI)? For thumb generation, $config->adminThumbOptions is used, right? 

[LostKobrakai]

Exactly that. But the defaults for the latter one will probably change for the image UI update.