Jump to content

Quality loss on PNG resize


Recommended Posts

Hi there,

I've been resizing some .png and got some pretty visible loss of quality. I attached those for comparison - around the Titanic (I know, they're big).

I tried to find similar threads but couldn't find anything that helped - at least it made me install Horsts IMagick Image Sizer.  

          foreach($detailrp->detail_repeater_bild as $pRetinaBild) {
            if ($pRetinaBild->width > $pRetinaBild->height) { // 3320px wide
              $pHighBild = $pRetinaBild->size(1660, 0);
              $pLowBild = $pRetinaBild->size(830, 0);
            else { // 3220px high
              $pHighBild = $pRetinaBild->size(0, 1610);
              $pLowBild = $pRetinaBild->size(0, 805);

Anyone has any idea what causes this and how to solve it? Or should I just go with .jpg? Thx!



Link to comment
Share on other sites

  • 1 month later...

Hey there,

 So you've been resizing some .png and got some pretty visible loss of quality? And now you want to solve this problem by installing Horsts IMagick Image Sizer? I think that such extensions can help you. Reviews are quite positive. I personally have Mac and edit photos via Movavi Photo Editor for Mac. I've never faced any problems with quality loss. It also helps to fix a low-quality areas. 

Link to comment
Share on other sites

Just to clarify: the png format has no quality loss. But the GD lib has massive issues in resizing dark image parts. 

With such dark images, you must set the imagesizer defaultGamma option to -1 !!

If your server supports imagick, you can activate the ImageSizerEngineIMagick, that is part of processwires core. (Under modules core).

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

,@neophron, I think this module and the service behind it has nothing to do with what was called "quality loss" in the above posts. It is a good method to compress your (final) png image variations to get smaller filesizes. But maybe nowadays you can use WebP format directly in PWs core, instead to stick with png output, and than having to invoke a remote service?


  • Like 1
Link to comment
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 eutervogel
      what I'm doing is this:
      <picture> <source srcset="<?php echo $page->section_three->main_img->first()->size(396,710)->webp->url; ?>" type="image/webp"> <img class="p_absoulte pp_block" src="<?php echo $page->section_three->main_img->first()->size(396,710)->url; ?>" alt=""> </picture> and for some reason it sometimes becomes this:
      <picture> <source srcset="/site/assets/files/1057/sektion3_bild-1.396x710.png" type="image/webp"> <img class="p_absoulte pp_block" src="/site/assets/files/1057/sektion3_bild-1.396x710.png" alt=""> </picture> It seems to be related to ->size(). When I don't use ->size() the webp Url is correct.
      I'm using the image-field inside a Fieldset(Page). Could that be a problem too?
      I just increased the output size by 2px and voila the webp url comes up. 
      I deleted all variations (webp variation is present in correct size) changed it back to the original size and again: a png url.

      I also tried to rename the image and load it up agian. 
      ...same behavoir.
      Thanks in advance guys
    • By ttttim
      I was recently experimenting with optimizing my images to get better load results. The code below is an example of what i've been using. It works nicely but the main problem is if i load a page for the first time after having added a few images my server will overload and return a 503 error. I have to refresh the page a few times for the server to resize all the images. Not a big problem while developing but not something I want on my live website. 
      <picture> <source media='(max-width: 320px)' srcset='{$image->width(320)->url} 1x, {$image->width(640)->url} 2x'> <source media='(max-width: 375px)' srcset='{$image->width(375)->url} 1x, {$image->width(750)->url} 2x'> <source media='(max-width: 767px)' srcset='{$image->width(750)->url} 1x, {$image->width(1500)->url} 2x'> <source media='(max-width: 1023px)' srcset='{$image->width(300)->url} 1x, {$image->width(600)->url} 2x'> <source media='(max-width: 1319px)' srcset='{$image->width(450)->url} 1x, {$image->width(900)->url} 2x'> <source media='(min-width: 1320px)' srcset='{$image->width(510)->url} 1x, {$image->width(1020)->url} 2x'> <img src='{$image->width(1056)->url}' alt='$image->description'> </picture>"; Is there a way to create these different sizes without overloading my server? 
      Ideally i'd like to expand the above code with webp support and a service like tinyPNG to reduce image size even further, but that would stretch the first load time even further. 
    • By PawelGIX
      Can I convert uploaded images to PNG, GIF, BMP -> JPEG?
      Is there any function in the API that I can change the file type?
    • By DV-JF
      I figured out a strange problem and don't know where to search for the error:
      I'm trying to include Processwire into an old website project in order to use PW for a little news-system . Therefore I'm using this code.
      <?php namespace ProcessWire; /*Include ProcessWire f. News */ include $_SERVER['DOCUMENT_ROOT'].("/cms/index.php"); /* Set news variable to get news from PW */ $news = wire('pages')->find('template=news-page');?> Now I'm able to loop through the news and display them as I want to be.
      <?php /* Section - Aktuelles */ if(count($news)) { ?> <div id="aktuelles" class="section-wrapper section-std-padding container activateMenu"> <h2 class="sectionhead">Aktuelles</h2> <?php foreach ($news as $n) { ?> <div class="box big-image"> <div class="two-text-columns"> <div> <a href="<?php echo ("/cms" .$n->sing_img->url .$n->sing_img);?>" class="img-popup"><img src="<?php echo ("/cms" .$n->sing_img->url .$n->sing_img);?>" class="left" alt="<?php echo $n->sing_img->description;?>" title="<?php echo $n->sing_img->description;?>" style="width: 100%;"></a> </div> <div> <h2><?php echo $n->title;?></h2> <?php echo $n->body;?> </div> </div> </div> <?php }; ?> </div> <?php }; ?>  
      These are the settings for the image field $sing_img

      And here's the strange thing happening when I try to echo the image:
      $n->sing_img->url =  /cms/site/assets/files/1019/ $n->sing_img = filename.jpg $n->sing_img->size(200,200) = INTERNAL SERVER ERROR Fehler: Uncaught ProcessWire\WireException: Method Pageimages::size does not exist or is not callable in this context in /.../cms/wire/core/Wire.php:519 Stack trace: #0 /.../cms/wire/core/WireArray.php(2212): ProcessWire\Wire->___callUnknown('size', Array) #1 .../cms/wire/core/Wire.php(386): ProcessWire\WireArray->___callUnknown('size', Array) #2 /.../cms/wire/core/WireHooks.php(698): ProcessWire\Wire->_callMethod('___callUnknown', Array) #3 /.../cms/wire/core/Wire.php(442): ProcessWire\WireHooks->runHooks(Object(ProcessWire\Pageimages), 'callUnknown', Array) #4 /.../cms/wire/core/Wire.php(445): ProcessWire\Wire->__call('callUnknown', Array) #5 /.../index.php(120): ProcessWire\Wire->__call('size', Array) #6 {main} thro (Zeile 519 in h.../cms/wire/core/Wire.php) I've no idea why this is happening, perhaps someone of you can give me a hint!
      Many greets, Jens alias DV-JF
  • Create New...