Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#41 2020-08-05 08:51:55

zero
Member
From: Lancashire
Registered: 2004-04-19
Posts: 1,379
Website

Re: Multiple image handling: profiles

philwareham wrote #325147:

You simply run whatever optimisation tool you have signed up for over your images directory. Indeed, all the third-party integrations mentioned in the Tinify website are simple scripts to point the API at the right image directory of the CMS.

Designers know that you need a high-quality image to start with if you’re going to resize them and keep the same quality. Users don’t, they just hope for the best. It’s no good running an optimisation script over directories of images that have lost quality in the resizing process. As Vienuolis is pointing out, we need the Textpattern process to keep the full 100% quality whilst drastically reducing file size, just as Panda does. This needs to be done before or during not after the processing. If scripts like these can do this using Panda, then why not a Textpattern one?

At present, smd_thumbnail trades off between quality and byte size, because Stef isn’t an expert wrt to image optimisation. SLIR is reported to produce good image quality and perhaps the others too, but is the quality as good as Panda? I doubt it, but would love it if proved wrong.


Wondrous Healing Wondrous ways to a healthy old age
Safe Reiki Harmless natural healing.
Gud One Blog

Offline

#42 2020-08-05 09:25:59

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,792
Website

Re: Multiple image handling: profiles

I see where everyone is going with optimisation. Using a proper optimisation service (online or in your OS of choice) is arguably better than the ‘quality’ setting offered in GD which we use in core and I expose in smd_thumbnail. That quantizer just smooshes the file size down and throws bytes away without much regard to qualitative/visual effects.

Proper optimizers (and maybe those filters loaded into the third party tool we’re evaluating as part of this image drive) do far more analysis and are often slower as a result, depending on the level of optimization.

I say we test the Image Intervention library and see what it can do. Phil’s hot on optimization, so if it does a decent job of it, he’ll know. If it works well, we can perhaps offer it as part of the bundle and expose the degree of optimisation to admin users when uploading and manipulating images. And expose it to plugin authors for more control.

If it doesn’t work well, let’s keep the optional third-party optimization step as a stretch goal. If it’s used by a lot of systems, as zero say, then clearly it’s possible and maybe the service isn’t going away. It might be desirable to include it in core, it might not. In which case we could expose it to plugin authors instead.

My reservations are:

  1. It adds a network step to the upload process, which has the potential to slow things down (or break the user experience).
  2. Automatically passing images through a third party service may violate the trust we layer in Txp. I know some people upload their own copyrighted images to their sites and watermark them and so forth. I wouldn’t like to automatically employ a third party system and find that they cache the optimized images (or originals) somewhere.

In short: let’s play this one by ear.

Last edited by Bloke (2020-08-05 09:29:25)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#43 2020-08-05 09:27:06

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,146
Website

Re: Multiple image handling: profiles

philwareham wrote #325147:

Image optimisation tools are a separate discussion in my opinion, and perfect for plugin territory, once we have the fundamental image processing and UX nailed down.

You simply run whatever optimisation tool you have signed up for over your images directory. Indeed, all the third-party integrations mentioned in the Tinify website are simple scripts to point the API at the right image directory of the CMS.

Hmm. Image optimisation is a serious problem. How “bad” are those tools at producing decently sized images? I once ran some test with the (default) smd_thumbnail, comparing with the exact same process in my image editor, starting from the same mother image. image editor won … massively.

and this:

run whatever optimisation tool you have signed up for over your images directory

I don’t feel comfortably at all introducing such an external dependency.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#44 2020-08-05 09:43:30

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,396
Website

Re: Multiple image handling: profiles

I think we are all talking at crossed-purposes here regarding optimisation. That is just a small part of the grand scheme.

The process I see is:

  1. User uploads their original photo to Textpattern.
  2. Intervention Image then makes a series of duplicated copies of that image based on user-defined size settings (or a default set if user hasn’t changed profiles from what we set at installation). Let’s say for example the largest size of processed image is 2560px, and then 1280px, 1920px, 960px, 640px, 320px. Image quality settings are user defined from 0-100. Let’s say for arguments’ sake the resized images are fairly well optimised by this but could be further optimised further down the process (see 7 below).
  3. Original uploaded image remains untouched (and is generally not used in public-side theme).
  4. User can crop, rotate, colorise, greyscale, sharpen, whatever the 2560px image (all doable in Intervention Image). New versions of the set of smaller images are then remade.
  5. User can reset the image back to a 2560px version of the original at some point in the future, because the original upload is still there in the file system. Useful for if you change theme or make a complete pig’s ear of editing the images.
  6. User can optionally offload the images directory to a cloud/CDN service using tools that are already built into the package we would be using.
  7. User can then optionally run an optimisation tool of their choice, either manually, as a server-based tool, Textpattern plugin, third-party API, whatever, on the images directory – wherever that images directory is housed. No opinionated tool to do that is supplied by us in the core, since there are so many satisfactory ways to achieve that already.

Offline

#45 2020-08-05 09:55:08

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,396
Website

Re: Multiple image handling: profiles

phiw13 wrote #325160:

Hmm. Image optimisation is a serious problem. How “bad” are those tools at producing decently sized images?

In short, GD that comes with PHP is average at doing it (but better in recent years/PHP releases), ImageMagick is much better as standard. The package we would be using detects whether the server has ImageMagick installed and uses that in preference to GD anyway, if available.

Offline

#46 2020-08-05 09:56:38

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,792
Website

Re: Multiple image handling: profiles

philwareham wrote #325162:

Intervention Image then makes a series of duplicated copies of that image based on user-defined size settings (or a default set if user hasn’t changed profiles from what we set at installation).

Yes, or we write a cunning wrapper around Intervention’s API to offer on-demand resizing and caching to either the local image store or cloud/CDN service. In other words, do something along the lines of what slir does but we control what parameters are exposed and how the resulting images are named/referenced.

I’ve not delved into all the stuff that Intervention offers yet. But I can see something like I posited earlier of using <txp:images> to first ask for the cached version of any requested image and, if it’s not there, generate it on-the-fly and cache it. Depends largely on performance as we test this.

Core’s Images panel would/could do exactly the same process so we don’t need to make pre-defined versions “just in case”. We make one size (the dimensions of which we hardcode in core as appropriate) based on whether the user is viewing grid or list. If they switch, we generate another size at that time to support that view.

Worst case scenario is that we generate 96 images in one go if you flick from list to grid with max paging (I suppose there could be more if a plugin has extended this max value). But I’m interested to know how lazy loading interacts with Intervention. Since we now only fetch images as the user scrolls, that might mean we can generate/cache them as people scroll too, which cuts down on the processor load of generating them all at once. Of course, once generated, then it’s just a cache read so it’s a one-off process per page of results.

Lots of fun to be had here.

Last edited by Bloke (2020-08-05 10:00:09)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#47 2020-08-05 10:01:04

Vienuolis
Member
From: Vilnius, Lithuania
Registered: 2009-06-14
Posts: 231
Website

Re: Multiple image handling: profiles

Is PHP Tinify library third-party dependent? It seems to me API only is, although I am not a programmer, sorry. Its PHP code is published on GitHub.

I don’t think Panda holds some monopoly for quantization techniques — Cloudinary works in similar way. Maybe PHP GraphicsMagick module is also capable to quantize graphics?

Weired, I do not know any similar desktop app. I mostly use PNGOUT and RIOT (Radical Image Optimization Tool) plug-ins for IrfanView — both work fine, but only degrading image quality.

Last edited by Vienuolis (2020-08-05 10:15:20)

Offline

#48 2020-08-05 10:20:00

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 9,792
Website

Re: Multiple image handling: profiles

Vienuolis wrote #325165:

Is PHP Tinify library third-party dependent?

Yes. You install the PHP library as a convenience to access their online service. And you need an API key to do so, which is an additional user hurdle.

I do not know any similar desktop app.

Although it doesn’t optimize per se, even Mac’s built-in Preview application does a wickedly good job at resizing images and retaining quality – it far outstrips GD’s attempts.

And if you want to squeeze more bytes out without altering quality, there’s Exifpurge which strips out all the junk camera metadata (assuming you’re not using it for cataloguing purposes!).

Last edited by Bloke (2020-08-05 10:23:50)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#49 2020-08-05 10:31:47

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,176

Re: Multiple image handling: profiles

I am a bit baffled about the stance here, I must admit – I get that there’s a need for optimisation…but how did we get from “much better image handling” to “farming out files to and fro to an optimisation-as-a-service platform” so quickly?

Offline

#50 2020-08-05 10:34:12

gaekwad
Admin
From: People's Republic of Cornwall
Registered: 2005-11-19
Posts: 3,176

Re: Multiple image handling: profiles

Vienuolis wrote #325165:

I do not know any similar desktop app.

There’s ImageOptim if you have a Mac: imageoptim.com/mac and some alternatives if you don’t.

Edit: oh, and there are command line versions of ImageMagick and GD so if you can get the settings you want then perhaps that might be worth a try?

Last edited by gaekwad (2020-08-05 10:38:16)

Offline

Board footer

Powered by FluxBB