Tinypng integration

Hello, recently I came over tinypng.com where you can drop images inside and it reduces the file size up to 70% with the same quality. There is also an API and it would really be cool if there where an integration into Sparkle.

But one question. Is it possible to get the pictures that are already inside a sparkle file to reduce the file Size?

Images inside Sparkle are sized to multiple sizes and densities at export time. You can apply any recompression on the exported folder.

1 Like

I sometimes use an app called “ImageOptim”, after I export a Sparkle website to a folder and before uploading to the web server:

It’s free.
And I’m not affiliated with them. :grinning:

I don’t use it for every website, it depends how image-heavy a website is, especially PNGs.

And I think, in most cases, Sparkle does a good job of image optimisation already.

1 Like

My take is that Sparkle does a fairly good job with image optimisation, but at times I can squeeze a bit more out of the png (especially widebox backgrounds), but that is before Sparkle optimises it. I have a good idea of the dimensions and then I double it for retina and I do it this way because everytime you do an update to your Sparkle project file (including a Sparkle iteration upgrade) and publish you would need to go in and do all the images again you optimised. This is not all the times but mostly when you play with the images, rename them, or move them around.

Anyways I’ll stand corrected if I have this all wrong.

1 Like

Yes indeed, that’s possible, just checking some software. So with tinypng.com there’s the problem, that this will cost a lot of money if I compress 6000+ fotos. ImageOptim takes the whole CPU and got stuck in the half of the process after 1,5 h (which is much to long for my understanding).
So, for this reason it would be cool to get access to the original Fotos which are stored in the sparkle file. Also an export function would be good, because some fotos I didn’t exported from my graphic program, just inserted into Sparkle via drag & drop (I know now that the simple way isn’t the best way…)

Ayn way with tinypng I was able to shrink the file size of the folder to about 60% without any loss of the quality and that’s really a lot. So it would be nice to see probably one of the features/workarounds.

Yes with tinning I can shrink the folder 60% of the original file size

Thanks I’ve checkt this, but it’s getting stuck after 1,5 h and the CPU is on the Max with an 4core i7 MBP 15"

You can copy images and paste them graphics apps, that works since version 2.0 if I recall.

Exporting assets might be a useful thing to do perhaps. It would be pointless for the purpose of image optimization because, as mentioned, Sparkle resizes and recompresses images.

In general PNGs should not be used on the web except in extreme circumstances (need for transparency on a relatively small surface), because they are huge.

The “no loss of quality” argument is extremely tricky. Most of the high PNG compression tools use some form of quantization (rearranging and averaging pixels), it looks similar but it’s not lossless. Ok for some things (a photo that has been isolated from the background), not ok for others (a schematic or diagram that needs to be shown perfectly losslessly).

Anyway it is an area where we have done a lot of work, we’ll see how it turn out.

1 Like

Hello @lqud

I don’t know enough about ImageOptim and the limitations of that software. But I would imagine if you want to shrink (compress) more than 6000+ images, as you mentioned in your post, any software would need a lot of time to finish that … and eventually get stuck in the process.

ImageOptim is good if you have to compress a few images, I even tried a few hundred and it worked.

But please check the settings (preferences) first: if you have all the settings activated in ImageOptim every image will run through every optimisation tool and there is a warning in the settings that says it will take a LONG time … like for instance:

01

So you should not use all the tools combined. They don’t recommend it. Just pick one or two. And if you use the optimisation level setting “Insane”, it will take an insanely long time. So that is also not recommended.

Just as @duncan said, PNGs should be avoided on the web, or only used in rare cases. I am always surprised when people use PNGs on websites as background images and some of them are HUGE in size, slowing down the website.

Most of the time you can use JPGs and SVGs.

iWeb used to produce a lot of PNGs for all its effects and it was a “nightmare”.

1 Like

Hi @Shadowfax many thanks. Yes this makes sense, probably I missed the message from ImageOptim …
Good hint with the png files. But if I export these from my graphic app the png files are not so big as the jpg … probably because these are mostly graphics and not “fotos”

Hi @lqud

Yes you are right, some graphics often produce smaller files when saved as PNGs instead of JPGs. It’s always a choice we have to make. :smiley:

Ok thanks, that means, if I copy a picture from sparkle, the original file will be copied?
I just made some tests with the same foot. I pasted a screenshot as png and uncompressed and the compressed file from tinypng …
So, when I export the website from Sparkle the uncompressed png files will be changed to jpg files. The compressed files are png files and indeed much bigger than the jpg. files.
So, what are the criteria sparkle decides when a png is changed to jpg or not?

many thanks

Currently if the image is fully opaque and the compressed jpeg would be smaller than the png, Sparkle changes the export to jpeg (but still holds on to the png internally).

2 Likes