21 replies to this topic

[Marty Walker]

Hi,

I really do like how PW crops and resizes images but, you know, I always want more So my little wish list goes like this:

• Set quality on the fly: $thumb = $image->size(100,100,75) - some images like logos need 90% quality and some would only need 75. And you could argue that some could cop a 50% hit in image quality - full page background images for example.
• Set the position of where the crop takes place ala phpThumb (useful yet hideous in many ways):
  $thumb = $image->size(100,100,90,TL) or $thumb = $image->size(100,100,90,TR) or $thumb = $image->size(100,100,90,C)

Cheers
Marty

[renobird]

+1

[ryan]

I think these are good ideas. Regarding the quality setting: ImageSizer does support adjustment of the quality (via the setQuality() method), but there's not currently a way to get directly to that from the size(), width() or height() functions (like with the upscaling option). However, I'm wondering if this is something that needs to be on-the-fly or might be better off in a $config setting that you can set for the whole site? (or modify it at runtime as needed). Something like this:

// just an idea, but not yet implemented, so don't put in your config.php yet <img src='http://processwire.com/talk/public/style_emoticons/<#EMO_DIR#>/smile.png' class='bbc_emoticon' alt=':)' />

$config->imageSizerQuality = 90; 
$config->imageSizerUpscaling = false; 
$config->imageSizerCropping = true; 

Of course, that could still be on-the-fly, by modifying the $config properties at runtime. But just wondering if this might be better than adding params to functions that most won't need to utilize. In addition, we could always provide a 3rd param $options array to the size() function that could override individual settings too, but wouldn't want to make that the only way since I'm guessing most don't need to set these things but once.

Regarding the crop, I like the idea and capability. I just don't know how to do it, yet. If anyone wants to collaborate I'd love to get the capability in there. Rather than getting it in as another function param, I'd want to integrate that option as part of the $options array to the function, i.e.

$image->size(100, 100, array('position' => 'top-left', 'quality' => 95));

[Marty Walker]

$image->size(100, 100, array('position' => 'top-left', 'quality' => 95));

Something along those lines would be fantastic.

Regards
Marty

[MadeMyDay]

Especially regarding Retina-compatibility, this is an important feature. Interesting fact is: Retina demands doubled size (in each dimension), but you can set the jpg quality to 15-20% for getting sharp results without losing quality. So a feature to determine the quality "on the fly" would be fantastic. I use the picture element (well, not a real element because not implemented by browser vendors yet) for serving different image dimensions to different sreen sizes / pixel ratios. So I would need a possibility to server a 20%-jpg to Retina displays while leaving the 90% version for usual screens (original image already reduced).

Good example here: http://retinafy.me/e...eg-scaling.html

(I have a Retina display and the examples are stunning!)

[ryan]

I'm a little confused about what you mean by the 20% quality setting and how this relates to retina displays? I would think a 20% quality setting would look horrible, but obviously it doesn't (as your examples show). So I'm just scratching my head, not sure exactly what this is. Looking on my desktop (30" dell screen) the first image looks potentially a little sharper, though close call. Looking on my iPad or iPhone (both retina) the second image is visibly sharper (especially on the first example). Quite interesting to see the difference, though not sure I'd notice if they weren't actually side-by-side. Still, can't quite believe those are 15/25 quality, so scratching my head.

[interrobang]

I think it would be nice if we could do something like that:

$myImagesizer = new ImageSizer();
$myImagesizer->setUpscaling(false);
$myImagesizer->setQuality(20);
$myImagesizer->size(600, 400);

$img->apply($myImagesizer);

This way it would even be possible to extend Imagesizer and add some new methods to it without modifying Pageimage. I am thinking at filters like blur, desaturize,...

[MadeMyDay]

I also recognized this effect when saving for web in Photoshop and got proven by this example from the author of retinfy.me. My only explanation is: On Retina displays you have a quadrupled amount of pixels on the same amount of space (twice in every dimension). So the effect of artefacts done by a JPG compression which usually only combines near and similar pixels is not so visibible (somehow). But areas of details where pixels show high contrast are not that much compressed, so the result on Retina is much sharper in the end. But this is only my explanation, perhaps I am totally wrong. But nevertheless, it would be nice to have an option to determine the quality for images

[ryan]

Sounds good, I had planned on adding a quality setting with the $options array to the size() function like mentioned above. I'll push this forward in 2.3.

Interrobang I think that looks like a good clean route too--decorating an image with an imagesizer. Though for doing the same thing, I think the $options array may be a little simpler both to implement and [subjectively] use. Plus we're using similar $options arrays elsewhere in ProcessWire, so it'll maintain consistency there.

[Pete]

I was literally just looking up how to change the quality and came across this topic when searching - I know I've read it before but now I have reason to leave a comment.

+1 for the options array - sounds like it could be really useful in places, and definitely having it available in the template code makes the most sense so you're not blanket-assigning it to a field used all over the place - well thought out once again ryan

[ryan]

Just added that optional options array to the size() function, so it should appear in the core this week. Currently you can specify: quality (1-100), upscaling (boolean), cropping (boolean). The position stuff will be added later.

$image->size($width, $height, $options);

You can also choose a default set of options and specify them in your /site/config.php:

$config->imageSizerOptions = array(
  'upscaling' => true,
  'cropping' => true, 
  'quality' => 90,
  );

[Marty Walker]

Hazzah! Thanks Ryan!

[jacmaes]

Ryan, it would be great to have also a sharpening option. I find that rescaled images commonly come out slightly blurry.

PhpThumb uses this script to sharpen thumbnails:
http://vikjavev.no/computing/ump.php

Would that be something you'd consider?

[Pete]

I would actually suggest a third-party image editor that could somehow be included as a module. I get the feeling it's been suggested before, but I saw this one recently from some of the Picnik devs (Picnik got snapped up by Google it seems and integrated into Google+) who decided to build their own app and thus we have http://www.picmonkey.com

I've seen this in another piece of software and it's pretty neat - basically the picture is sent to the Picmonkey service and you edit it there, save it and it passes the image back to your system - ProcessWire in this case. There's an API to facilitate all of this: https://docs.google....KgRya3lq_Ahr5T0

All that said, I'm not sure how you would even begin to go about it, just that a full set of tools via a module would be nice to have even if it does go third-party for the editing process.

[ryan]

Someone recently made a module that integrates with another image editing service. It looks like they never submitted it to the modules directory, and now I can't find it… I need to track it down, as I recall it worked quite well when I tested it.

[Soma]

Pixlr... Am on mobile

[Pete]

Here we go: http://processwire.c...03-pixlreditor/

I did have have a sneaky suspicion as I was typing that someone might have done this and it turns out I even replied in that thread - my memory is rubbish!

Looks like you said you were going to do something there in that last post ryan.

[jacmaes]

In my humble opinion, Pixlr serves a specific purpose: it's probably very useful for occasional image adjustments, and apparently is quite powerful. And I see a couple of major problems with it:

• It's Flash-based, so it's obviously not a future-friendly solution. Flash is dying on mobile devices since Adobe officially killed it (it never really was an option anyway). Who cares, you might say? Who would want to edit images on a mobile device from a PW admin? Well, I already have a couple of clients who are literally in the "post-PC era": they do all their work on tablets. Don't ask them to edit their sites on their laptops or desktops: they don't have one anymore. Most of us might think this is a strange idea to edit a PW site on a mobile device, but this is already happening, and whether we like it or not, it's very likely to become the norm within a few years.
• I can't just ask my clients on high-traffic websites to open an image-editing module dozens of times each day and hunt for the sharpening tool each and every time that they upload a new picture. They wouldn't do it, and I wouldn't blame them. I wouldn't want them to mess with the other filters either ("I put it all my pictures in sepia because they look prettier that way").

Image sharpening is the only nagging "issue" I have with PW for all the image-heavy sites that I'm developing. Admittedly, most users wouldn't notice that pictures are slightly blurry. But I do, and it bothers me. I want my sites to look as good as I can make them to be, not just acceptable. I'm sure most of you share that philosophy.

I can get around the problem by enforcing crops in apeisa's excellent module at a larger size than required and then shrinking the image in my HTML or CSS, but it's not a good solution. It seems to me that image sharpening should be a configurable option globally (whether as a module or included in the core), just like image quality now is.

[Soma]

I upload big images, and scale them down using quality of 80 or 90% and they look very sharp. Don't see what the problem is to be honest.
http://www.velokurier.com/ look at the news images scaled, I don't see anything blurred.

I could see and option to add gd2 or imagemagic, as imagemagic is known to produce slightly sharper images than gd2.

[jacmaes]

Soma, I probably need to mess with the quality settings some more to see if I can achieve better results out of the box without generating unnecessarily large files, which would slow the site down. That said, as you mentioned, all is fine if you have images that are reasonable large enough to start with. If I edit the site myself, that's doable. I can look for artwork with good resolution and size, or request them from my client.

But if it's my client who is in charge of updating the content, they often don't have the resources, time, interest or access to good resolution pics. Let me give you an example. I'm finishing a template for an events website that might be used in more than 50 different countries if approved. Each event would have a thumbnail, a larger pic, and an even larger pic (650px x 300px) if this is to be a featured event. The thumbnails usually look sharp enough, but I'm running into problems at larger sizes, especially if the size of the original image is close to the cropped one (let's say 800px x 600px for a featured event), as is to be expected in a real-case scenario since the images would come from various institutions who I know from experience don't care about image quality or size.

If the quality is bad to start with, then there's not much that can be done. But I do think a sharpening option would make a difference in most (of my) cases. Let me reiterate that most users would not see much of a difference, and that it's just a minor nuisance for me. But since this is a wishlist thread, I thought I'd mention it.