Don't have images compressed?

[OpenBayou]

Hello,

Is there a way to stop Images from begin compressed when uploading? I'm seeing images look soft and blocky. I tried doing the following (with $child as a 'foreach' and image filed called 'post_image')

<img src="<?php echo $child->post_image->first()->size(200,0,'upscaling'=>false)->url;?>">

but it resulted in an internal error.

Thanks,

[adrian]

Options needs to be an array:

array('upscaling'=>false)

 

[abdus]

->size(200,0,'upscaling'=>false)

Put options into an associative array, also there's quality option as well

echo $child->post_image->first()->size(200,0,[
	'upscaling' => false,
	'quality' => 95 // defaults to 90
])->url;

See https://processwire.com/api/ref/pageimage/size/ for all other options

[LostKobrakai]

58 minutes ago, OpenBayou said:

Is there a way to stop Images from begin compressed when uploading?

Source images are never converted or compressed on upload, besides if you force a max. size and the uploaded image is bigger. Only the thumbnails/variations generated from that source file will get compressed/converted according to your image sizing settings.

[OpenBayou]

I'm still having problems with images, I have upscaling off, sharpening is strong, quality at 95 and I'm still having problems. The main problem I'm having is you can see wavy lines on images that are slanted.

I'm attaching an below as an example of the problem.

Thanks.

[abdus]

6 minutes ago, OpenBayou said:

I'm still having problems with images, I have upscaling off, sharpening is strong, quality at 95 and I'm still having problems. The main problem I'm having is you can see wavy lines on images that are slanted.

I'm attaching an below as an example of the problem.

Thanks.

The issue may be specific to this image. Is it possible for you to link the original?

[OpenBayou]

sure.

[horst]

try other settings for "sharpening is strong". try: none, soft, medium

add a custom name part (suffix) to the different sharpening variations:

foreach(array('none', 'soft', 'medium', 'strong') as $sharpening) {
  echo "<img src='" . $child->post_image->first()->size(200, 0, [
    'upscaling' => false,
    'quality' => 90,
    'suffix' => $sharpening
  ])->url . "' title='{$sharpening}' />";
}

 

With PW Version 3+, try to install / use the IMagick Image-Engine under: modules > core > (image) IMagick Image Sizer

Edited January 13, 2017 by horst

[OpenBayou]

Notice no difference between all four, they look the same. I changed quality to 100.

[Robin S]

50 minutes ago, horst said:

add a custom name part (suffix) to the different sharpening variations:

foreach(array('none', 'soft', 'medium', 'strong') as $sharpening) {
  echo "<img src='" . $child->post_image->first()->size(200, 0, [
    'upscaling' => false,
    'quality' => 90,
    'suffix' => $sharpening
  ])->url . "' title='{$sharpening}' />";
}

 

This is missing the option for actually setting the sharpening amount. I think it should be:

foreach(array('none', 'soft', 'medium', 'strong') as $sharpening) {
  echo "<img src='" . $child->post_image->first()->size(200, 0, [
    'upscaling' => false,
    'quality' => 90,
    'sharpening' => $sharpening,
    'suffix' => $sharpening
  ])->url . "' title='{$sharpening}' />";
}

 

1 hour ago, OpenBayou said:

sharpening is strong

1 hour ago, OpenBayou said:

The main problem I'm having is you can see wavy lines on images that are slanted.

The jaggies are a consequence of the sharpening - you can't have it both ways. With sharpening off the edges are smooth.

 

[OpenBayou]

Thanks for the help. That did solve it but the image looks very soft, even with quality at 100 and upscaling. Keep in mind that I'm on a MacBook Pro retina so I'll keep trying many options.

[Robin S]

3 minutes ago, OpenBayou said:

Keep in mind that I'm on a MacBook Pro retina

This may be stating the obvious, but for HiDPI displays you typically want to size your image to twice the dimensions you are displaying it at.

The upscaling setting isn't relevant unless you are doing a resize operation to a size that is larger than the original uploaded image.

[OpenBayou]

I'm used to WordPress and they have a way to crop images on upload and use a setting to call up that image. Is there a way to crop the image on upload and call it by a setting?

[teppo]

19 minutes ago, OpenBayou said:

I'm used to WordPress and they have a way to crop images on upload and use a setting to call up that image. Is there a way to crop the image on upload and call it by a setting?

If you're talking about manual cropping, check out Croppable Image:

 

[szabesz]

8 hours ago, OpenBayou said:

but the image looks very soft

It is worth mentioning that the original image looks very soft too. The "original" image must have been downscaled with either very little sharpening or none at all. So further downscaling the original image this way makes it look even softer, especially on high dpi screens.

[horst]

5 hours ago, OpenBayou said:

I'm used to WordPress and they have a way to crop images on upload and use a setting to call up that image. Is there a way to crop the image on upload and call it by a setting?

Yep, as @teppo said, you can use Croppable Image 3. After you have defined your cropsettings, it crops uploaded images to those dimensions. But it also let you manually select individual sections after that.

[OpenBayou]

That's not what I meant (and my fault for not being more clear). In WordPress, each theme has a settings configuration file called functions.php. In that file, you can have custom code to perform functions on our site. One item I use is `add_image_size( 'link-image', 630, 330, true);` so that when a person uploads an image it crops it to 630px width and 330px height and calls it 'link-image' so you can call that image setting in your theme.

Does ProcessWire have something similar?

[Robin S]

1 hour ago, OpenBayou said:

One item I use is `add_image_size( 'link-image', 630, 330, true);` so that when a person uploads an image it crops it to 630px width and 330px height and calls it 'link-image' so you can call that image setting in your theme.

That seems less flexible that the PW approach to image sizing. What is the advantage of it? If it's that you can type 'link-image' in your code rather than '630, 330' then you could achieve the same in PW:

// in an init.php that is auto-prepended to template files
$link_image = '630, 330';

// use this in your template files
$page->image->size($link_image)->url;

 

Or using Croppable Image, you define a crop...

...then call it by name in your template...

$page->image->getCrop('link-image')->url;

 

[horst]

1 hour ago, OpenBayou said:

Does ProcessWire have something similar?

Yes. It is called Croppable Image 3!

Instead of defining the imagecrops in a function.php file, you define it per imagefield. With this, you may need only one imagefield per site, as you can define as many settings you like. Also you can stick settings to specific templates, or you apply them to all.

[OpenBayou]

Thanks for the help. I tried other CMSs and notice the same quality as ProcessWire. I also found out I can display the full image and resize the width by CSS.