Jump to content

Image quality problem on resize


humanafterall
 Share

Recommended Posts

  • 4 weeks later...

Yes, Adrian is right, it isn't ready yet. Actually there are a few things that need to discussed / solved / changed with the ImageSizer and image handling generally. After that is done, I will implement the same solution into ImagickResizer. Currently it does not recognize settings for upscaling / cropping / etc. But it would be good if you can test it and send a feedback. Or if you can explain how to set up Imagick locally on Mac (if you are on a Mac) in that thread Adrian has linked to.

Additional to that we are working on the naming scheme. If I remember right you has asked about that too: https://processwire.com/talk/topic/6205-module-pageimage-naming-scheme/

Link to comment
Share on other sites

Martijn, no problem! Every one of us has max. 24 hours per day. :) And all of us need some time to sleep, some time for the family, some time for other things and some time for ProcessWire. I think - in this order.

  • Like 1
Link to comment
Share on other sites

Yes, Adrian is right, it isn't ready yet. Actually there are a few things that need to discussed / solved / changed with the ImageSizer and image handling generally. After that is done, I will implement the same solution into ImagickResizer. Currently it does not recognize settings for upscaling / cropping / etc. But it would be good if you can test it and send a feedback. Or if you can explain how to set up Imagick locally on Mac (if you are on a Mac) in that thread Adrian has linked to.

Additional to that we are working on the naming scheme. If I remember right you has asked about that too: https://processwire.com/talk/topic/6205-module-pageimage-naming-scheme/

I have managed to get imagick setup locally (after many hours!) - I will test and post results as soon as i have time (using wampserver php 5.3 on vista 32 bit, had to use image magick 6.7, as the latest 6.8.9 wouldn't play nice - not got time upgrade my wamp right now.

I have a newer version (php and image magick, 64bit linux) on my server, so will be interesting to compare results.

I am most interested in the imagick::INTERPOLATE_xxx functions, as GD2 is giving me horrible results for upscaling images more than 200% (looks to be nearest neighbour, not even bilinear).

I think it is very good to be moving to an image-library agnostic approach to ImageSizer, so that one can just drop in gd2, Imagick, etc.

Yes I did ask about the naming conventions, what you have written so far looks good - i will see if i can think of any other suggestions for it (add the interpolation method?) also, may be useful to set a different default method for upscaling vs downscaling.

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

We have transparent product images as pngs. 

Now resizing them gives us artifact (lines) inside the image.

I set sharpening to none and tried different things but no matter what there's lines in the resized thumbs. It even happens on non transparent images (visible on white background), but there it seems it can be avoided at least by setting gamma higher. 

Here a image showing the artifacts (contrast and darkened in PS to show the effect) It's barely visible but depends on the monitor and I see it clearly on mobile but hardly noticed on desktop. I am a little lost as to if this is possible to avoid.

post-100-0-74329400-1439400041_thumb.jpg

Link to comment
Share on other sites

@soma: the above attached images seem to work fine here on my machine. ?? I don't see those lines.

But in the past there were other images that had some artefacts. It mostly depends on settings for defaultGamma, sharpening and if sharpening uses USM (useUSM) or not.

I suggest you try / experiment with the following options:

$options = array(
    "forceNew" => true,
    "defaultGamma" => -1,    // disable Gammacorrection
    "sharpening" => "none",  // disable sharpening or use "soft"
    "useUSM" => true         // use USM or disable it with false
);

Sorry that I cannot more helpful with this. I used PW 2.6 stable and GD-lib with PHP 5.3 and PHP 5.4.

Link to comment
Share on other sites

Thanks alot Horst for your time!

The lines are hardly visible so not sure. These indized optimized png's I attached do have these lines when resized.

When I do convert such an image to normal rgb png and upload it these lines are still there. 

Now It seems that it depends on the Photoshop version! I'm not sure how, but a png from a coworker saved in CS6 seems to work and has no lines. it's also when I open the optimized pngs in my CS4 the alpha transparency isn't shown and the modus is indized 8bit and the transparent shadow is black pixled, while in CS6 it shows the png correct as rgb and alpha transparency.

The agency that does the images sent us unoptimized pngs and they seems to work.

  • Like 1
Link to comment
Share on other sites

Ah, good to hear. I have used Photoshop CS5 to inspect & play with the images.

It is always the best practice (if possible!) to upload unoptimized images with max quality to use them as the original source only.

The only downside is that you cannot / should not serve those original source to the public. (But you can serve a variation with identical dimensions, but optimized and/or with lesser quality).

Link to comment
Share on other sites

  • 2 months later...

We have transparent product images as pngs. 

Now resizing them gives us artifact (lines) inside the image.

I set sharpening to none and tried different things but no matter what there's lines in the resized thumbs. It even happens on non transparent images (visible on white background), but there it seems it can be avoided at least by setting gamma higher. 

Here a image showing the artifacts (contrast and darkened in PS to show the effect) It's barely visible but depends on the monitor and I see it clearly on mobile but hardly noticed on desktop. I am a little lost as to if this is possible to avoid.

I'm experiencing the same issue as Soma, except my images are JPG.  In my generated thumbnails from my master images, the white becomes off-white.

I also tried modifying config's imageSizerOptions, however this didn't fix the issue:

$config->imageSizerOptions = array(
  //"forceNew" => true,
  'upscaling' => true, // upscale if necessary to reach target size?
  'cropping' => true, // crop if necessary to reach target size?
  'autoRotation' => true, // automatically correct orientation?
  // changed from soft
  'sharpening' => 'none', // sharpening: none | soft | medium | strong
  // changed from 90
  'quality' => 100, // quality: 1-100 where higher is better but bigger
  // changed from 60
  'hidpiQuality' => 100, // Same as above quality setting, but specific to hidpi images
  // changed from 2.0
  'defaultGamma' => -1, // defaultGamma: 0.5 to 4.0 or -1 to disable gamma correction (default=2.0)
  );

One thing I also tried was to mess with the original image's color profiles and such in Photoshop and then regenerated new thumbnails based off of that, but that didn't work either.

I have a suspicion that this has to do with WAMP's image processor?

Link to comment
Share on other sites

Hi jlahijani,
 

the only thing what should have influence on that is defaultGamma. Have you tried 2.2 ?

Also the master images should be max possible quality (Photoshop quality 12)

The output colorspace must be sRGB, regardless if with or without embedded icc profile.

Can you tell the GD lib version and the used PHP version?

Link to comment
Share on other sites

  • 1 month later...

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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By quickjeff
      Hi Everyone, 
      As many of you know, iPhone photos save in .heic unless the user changes the settings in their phone. 
      We have built a web app on top of processwire in which a user can save images from their phone. 
      The issue we are having is that there seems to be an error when uploading and saving. 
      The .heic files won't save and processwire throws an error. The environment is LAMP (Bitnami and all libraries have been installed to support this.) 
      Checking to see if someone has also encountered this here and how they solved it.
      Thanks. 
    • By Robin S
      Select Images
      An inputfield that allows the visual selection and sorting of images, intended for use with the FieldtypeDynamicOptions module. Together these modules can be used to create a kind of "image reference" field.

      Integration with FieldtypeDynamicOptions
      InputfieldSelectImages was developed to be used together with FieldtypeDynamicOptions (v0.1.3 or newer):
      Create a Dynamic Options field. Choose "Select Images" as the "Inputfield type". Select Images appears in the "Multiple item selection" category but you can set "Maximum number of items" to 1 if you want to use Select Images for single image selections. Define selectable options for the field via a FieldtypeDynamicOptions::getSelectableOptions hook. See some examples below. FieldtypeDynamicOptions is recommended but is not a strict requirement for installing InputfieldSelectImages in case you want to use an alternative way to store the field data.
      Selection of Pageimages
      In this example the field allows selection of Pageimages that are in the "images" field of the home page.
      The field will store URLs to the Pageimages so it works as a kind of "image reference" field. You can use the "Format as Pagefile/Pageimage object(s)" option for the Dynamic Options field to have the formatted value of the field be automatically converted from the stored Pageimage URLs to Pageimage objects.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get Pageimages within the "images" field on the home page foreach($event->wire()->pages(1)->images as $image) { // Add an option for each Pageimage // When the key is a Pageimage URL the inputfield will automatically create a thumbnail // In this example the label includes the basename and the filesize /** @var Pageimage $image */ $options[$image->url] = "{$image->basename}<br>{$image->filesizeStr}"; } $event->return = $options; } }); Selection of image files not associated with a Page
      When not working with Pageimages you must add a "data-thumb" attribute for each selectable option which contains a URL to a thumbnail/image.
      In this example the field allows selection of image files in a "/pics/" folder which is in the site root.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "select_images" if($field->name === 'select_images') { $options = []; // Get files that are in the /pics/ folder $root = $event->wire()->config->paths->root; $path = $root . 'pics/'; $files = $event->wire()->files->find($path); // Add an option for each file foreach($files as $file) { $basename = str_replace($path, '', $file); $url = str_replace($root, '/', $file); // The value must be an array with the following structure... $options[$url] = [ // The label for the image 'label' => $basename, 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => $url, ], ]; } $event->return = $options; } }); The field values don't have to be image URLs
      The values stored by the Dynamic Options field don't have to be image URLs. For example, you could use the images to represent different layout options for a page, or to represent widgets that will be inserted on the page.
      Also, you can use external URLs for the thumbnails. In the example below the options "calm" and "crazy" are represented by thumbnails from placecage.com.
      $wire->addHookAfter('FieldtypeDynamicOptions::getSelectableOptions', function(HookEvent $event) { // The page being edited $page = $event->arguments(0); // The Dynamic Options field $field = $event->arguments(1); // For a field named "calm_or_crazy" if($field->name === 'calm_or_crazy') { $options = []; // Add options that are illustrated with thumbnails from placecage.com $options['calm'] = [ // The label for the option 'label' => 'Nicolas Cage is a calm man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/260/260', ] ]; $options['crazy'] = [ // The label for the option 'label' => 'Nicolas Cage is a crazy man', 'attributes' => [ // An image URL in the "data-thumb" attribute 'data-thumb' => 'https://www.placecage.com/c/260/260', ] ]; $event->return = $options; } }); Field configuration
      You can define labels for the button, notices, etc, that are used within the inputfield if the defaults don't suit.

       
      https://github.com/Toutouwai/InputfieldSelectImages
      https://processwire.com/modules/inputfield-select-images/
    • By Robin S
      Process Images
      A basic, proof-of-concept Textformatter module for ProcessWire. When the Textformatter is applied to a rich text field it uses Simple HTML DOM to find <img> tags in the field value and passes each img node through a hookable TextformatterProcessImages::processImg() method.
      This is a very simple module that doesn't have any configurable settings and doesn't do anything to the field value unless you hook the TextformatterProcessImages::processImg() method.
      Hook example
      When added to /site/ready.php the hook below will replace any Pageimages in a rich text field with a 250px square variation and wrap the <img> tag in a link to the original full-size image.
      For help with Simple HTML DOM refer to its documentation.
      $wire->addHookAfter('TextformatterProcessImages::processImg', function(HookEvent $event) { // The Simple HTML DOM node for the <img> tag /** @var \simple_html_dom_node $img */ $img = $event->arguments(0); // The Pageimage in the <img> src, if any (will be null for external images) /** @var Pageimage $pageimage */ $pageimage = $event->arguments(1); // The Page object in case you need it /** @var Page $page */ $page = $event->arguments(2); // The Field object in case you need it /** @var Field $field */ $field = $event->arguments(3); // Only for images that have a src corresponding to a PW Pageimage if($pageimage) { // Set the src to a 250x250 variation $img->src = $pageimage->size(250,250)->url; // Wrap the img in a lightbox link to the original $img->outertext = "<a class='lightboxclass' href='{$pageimage->url}'>{$img->outertext}</a>"; } });  
      GitHub: https://github.com/Toutouwai/TextformatterProcessImages
      Modules directory: https://processwire.com/modules/textformatter-process-images/
    • By spercy16
      These issues should be fairly easy for any intermediate to advanced ProcessWire developer to answer. I'm new to PHP and relatively new to ProcessWire and just need a bit of help. What I'm trying to do is bring in a couple of cards from my Projects page to display on my home page. I finally got the code right to bring in the cards but right now they're using my original images instead of my resized "variations". So firstly, I would like to know how to reference the variations of my images instead of using the original. Secondly, I need to grab only four of the cards from the Project page and not import in all ten. It should be just two small changes to my code to do these things (I would imagine). Here is the code I currently have for that section:
      <?php // https://processwire.com/api/arrays/ // check if the array of images has items if (count($pages->get("/projects/")->images)) : // get array of images from the field $images = $pages->get("/projects/")->images; $count = 0; // iterate over each one foreach ($images as $image) : $count++; $sectionText = $pages->get("/projects/")->get("paragraph_$count"); $img = $image; $buttonCode = $pages->get("/projects/")->get("url_$count"); ?> <span id="card<?php echo $count?>" class="card"> <img class="cardThumb" src="<?php echo $img->url; ?>" alt="<?php echo $image->description; ?> Thumbnail" /> <div class="cardBody"> <div class="cardText"> <h2><?php echo $img->description; ?></h2> <?php echo $sectionText; ?> </div> <div class="primaryBtn"> <a href="https://www.paypal.com/donate?hosted_button_id= <?php echo $buttonCode; ?> &source=url"> <button> <i class="fas fa-donate"></i> Donate </button> </a> </div> </div> </span> <?php endforeach; endif; ?> Thanks in advance for any help!
    • By skeltern
      WebP image support is great and works fine. But once created I've issues to get rid of all API generated WebP variations.
      The backend image field variations "Delete" works and I can remove all variations JPEG plus WebP. Image list is clean but all WebP API variations are still stored in file system (for instance files/12345/84.900x675.webp etc). I can only use ImageSizer with temp 'force' option to request fresh WebP variations or have to delete WebP files from folders. No other way so far. Tested with 2 sites and latest master PW 3.0.165.
      Is there somewhere a "magic button" or config/setup thing to solve my sticky WebP issue?
×
×
  • Create New...