Jump to content
wsjmdavies

PNG file size increased on image upload

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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
  • Like 6

Share this post


Link to post
Share on other sites

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.

:)

  • Like 1

Share this post


Link to post
Share on other sites

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? 

  • Like 2

Share this post


Link to post
Share on other sites

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

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 arnd
      Hi,
      I have a repeater with some images in it.
      As Superuser I can work with the Actions (rotate...). But my Users with lower Rights can't use this Actions.
      The same User can use the Actions on images outsite a Repeter-Field. So I think it's not a Problem of Rights-Management but from Images in Repeater Fields.
      ProcessWire 3.0.164.  Bug? Or can I manage this in the settings?
      Thanks in advance
    • 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 Mats
      BETA: SplashAndGrab
      https://github.com/madebymats/InputfieldSplashAndGrab
      This module attaches a search input to selected image fields that lets you search and download images from Unsplash.
      (Unsplash is a stock photo service where you can download images for free and use as you wish. No strings attached.)   
      You can search by string, colors, orientation/crop and order by relevance or time published
      I find Unsplash useful both for placeholder images when building sites but also as a time saver for editors if they don’t have any images at hand, just search, download and publish.

      Thanks to @apeisa for building the  FlickrInputField Module and @Robin S for AddImageUrls,  took a lot ideas and code from those modules.
    • By markus_blue_tomato
      We have created a module to create BlurHash strings for images while uploading in ProcessWire. This blurry images will be saved in the database because they are very small (20-30 characters) and can be used for Data-URL's  as placeholders for image-lazy loading.
      https://github.com/blue-tomato/ImageBlurhash
      E.g. where we use this in production:
      https://www.blue-tomato.com/en-INT/blue-world/ https://www.blue-tomato.com/en-INT/blue-world/products/girls-are-awesome/ https://www.blue-tomato.com/en-INT/buyers-guides/skateboard/skateboard-decks/ https://www.blue-tomato.com/en-INT/team/anna-gasser/
×
×
  • Create New...