mike62

[RESOLVED] Images losing saturation when resized by ProcessWire

Recommended Posts

Please see attached screenshot. The image on the left is the original image that was uploaded. The image on the right is what it looks like after it was resized to fit into a template by ProcessWire using

<img src="<?php echo $featured_image->size(854,0)->url ?>" />

This is a significant loss of color for these images. Is there a way to prevent this from happening — other than forcing client to crop the images to the exact dimensions ahead of time, and not resizing with PW?

Screen Shot 2017-11-22 at 2.21.50 PM.png

Share this post


Link to post
Share on other sites

if the size in bytes of the images is not a problem, you can resize it with css. It seems to be a situation with the php image library when generate the new image, perhaps use a color space, a gamma correction or a color depth different

Share this post


Link to post
Share on other sites

Are you sure you are comparing apples with apples here? In your screenshot, is the original image being viewed in the context of a browser, or is it viewed in some other application?

There are so many things that can come into play when you are dealing with colour management - whether the image has a colour profile embedded, what the colour profile is (sRGB is probably the safest option), the colour management support within the application you are viewing the image in, etc. To verify that the colour loss has anything to do ProcessWire's resizing you should insert the original image next to a resized version of that image in a template file and view them in your browser.

<img src="/path/to/original-image.jpg" alt="">
<img src="<?= $page->image->size(854,0)->url ?>" alt="">

 

  • Like 2

Share this post


Link to post
Share on other sites

Damn that hurts.

Like Robin says, check your colour profile on the original image. Also, I've been handed JPEGS in CMYK instead of RGB, and 24 bit instead of 16. These are weird, I haven't seen many, but Trump got elected, Brexit won and the far-right is gaining ground in Europe so...

You can also try using ImageMagick for your image processing needs instead of the default GD:

https://modules.processwire.com/modules/image-sizer-engine-imagick-cli/

 

By the way...

$featured_image->size(854,0)->url

is the same as

$featured_image->width(854)->url

 

Edited by heldercervantes
Adding an API tip
  • Like 5

Share this post


Link to post
Share on other sites
8 hours ago, heldercervantes said:

You can also try using ImageMagick for your image processing needs

+1 for this - ImageMagick is usually quicker and takes less server resources (can handle larger images) than GD. If available, I'd always prefer it over GD.

Just a thought, is front-end resizing on upload involved at all?

Share this post


Link to post
Share on other sites

Thanks everyone for all the tips! Some notes:

The screenshot I took shows the image *in PW* on the left (I clicked on the thumbnail in the backend and it opened the lightbox; that's what you're seeing there). So yes, that is a direct comparison of the uploaded image, to the resized image.

Looks like ImageMagick requires PW 3.0.10... :'( The site I've adopted is a mess of old modules, and I can't update it past 2.3.0.

But... good news! I tried downloading the original image, opening it in Photoshop, using their legacy "Save for Web" export dialog, making sure it's set to sRGB, re-uploaded it, and bam! Thanks @Robin S

Screen Shot 2017-11-23 at 6.56.10 AM.png

  • Like 2

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 Marcel
      Hey, 
      I am very new to processwire and bootstrap. I have a field (text area) and there I want to be able to insert an image which is responsive. I tryed it with Source but in the end the page doesn't seem to like it when I insert in Source the following code
      <img src="<?php echo $homepage->content_img->url; ?>" class="img-fluid" alt="Responsive image"> What can I do to make it possible to insert reponsive images in a text area?
      Thank you in advance.
      Marcel
    • By gonzz
      I'm doing an artist site and they want to be able to upload a large .tiff to their portfolio. I need to keep to a copy of the original file in the server for the art distributers, and of course serve jpg in the web front end.
      I had the idea of extending the file or image upload input so that if the image is tiff, keep it, and also convert it to jpg, so I could access through something like $image->originalUrl or $image->size(100, 100)->url 
      I was wondering if you thought this a good idea, or if i'm over-engineering something that could be done simply. Also, I've never extended an input, so any examples are welcome.
      Thanks!
    • By Markus Breitinger
      I want to use Particle.js as background of my page. What modules do i need and where must i put the code?
      The usage of particle.js in plain HTML is in the attached files.
      index.css
      index.html
    • By rst
      I am having problems uploading svg images in the the latest pw 3.0.98. It shows the preview and has the spinner on top of it, and just gets stuck on that.
      Worked fine in the previous version of PW
    • By Noel Boss
      Hi, I'm stuck since hours and don't know what to do. Here is my Problem:
      I try to generate Previews of PDF using imagick. I have 4 PDF, I generate a preview of the first page of the pdf, save it to a temporary file and want to import it using the api into an image field. It works for the later 3 pdf but not the first. I add it to the image field and save it. Inside the function that saves it, the image is stored in 'data' as well as in 'itemsAdded' but as soon as i leave the function, its nowhere to be found.
      Process:
      1. create previewimage using imagick and create Pageimage > works
      2. add image to filed 'filepreviews', returns Pageimages array with image added > okay
      3. save page > returns true
      4. Outside renderPreview method, image is not anymore in 'filepreviews'
      // mymodule // … // foreach($files as $file){ $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); // if there is no preview image… if (!$preview instanceof Pageimage) { $this->renderPreview($file) // we create one using $this->renderPreview > should return true on successful save dump(wire('page')->filepreviews); // my Image is nowhere to be found $preview = wire('page')->filepreviews->get('name*='.$file->basename(false)); } // end for each // render a preview of an otherwhise not supported file format // return true if sucessfull save private function renderPreview($file) { $page = wire('page'); // get path to temporary image $tempFile = $path.$file->basename(false).'-preview.jpg'; // … some imagick code // … and save it: $imagick->writeImage($tempFile); $img = new Pageimage($page->filepreviews, $tempFile); $img->description = $file->basename(false); // destroy temp image unlink($tempFile); // this is my Pageimage, all good… dump($img); // save image, my Pageimage can be found in data and itemsAdded – all good dump($page->filepreviews->add($img)); $page->of(false); $success = $page->save(); // sucess = true dump($success); return $success; }
       
      Second question:
      Would there a generally better approach? Like using pageFiles somehow. Goal is to be able to use the image api like scale etc – I don't generally need the images to be stored in an image field.