Photos for web

Content
1

I consider myself to be more scientific than artistic. Yet I do enjoy taking pictures. Maybe out of 50 I’ll get 1 really nice one, a few that are OK, a lot that I might show to a captive audience (i.e. friends and family) and get away with it, and mostly “scrap”. But that doesn’t keep me from trying :wink:

Anyway, I’ve always saved my photos as progressive jpgs with max quality/ min compression. But I have read that this adds uneccessary weight to the file for an insignificant gain in image quality.

What compression ratio do you use for web photos?

Also, I prefer my design to be “fluid”/“liquid”, but images don’t work this way. For example, the SitePoint member’s “Pictures & Albums” says that the max dimensions are 600px by 600px or they will be resized.

I’m wondering if these are generally acceptable dimensions.

What size images do you prefer for the web?

Does the file weight affect your decision?

2

Got your png.png from (15,260 bytes) down to (13,504 bytes) thus (88%) reduction using the method I mentioned. Obviously that “test image” would beat JPG hands-down; it’s PNG-8, eight colours and there is less close randomised colour gradients or “low-contrast transitions with noise” as often seen in photos.

Yes, you should certainly always consider PNG-8 for simple non-photographic images. PNG is also a better choice than JPEG for storing images that contain text, line art, or other images with sharp transitions.

Possibly another factor apart from you having to wear corrective lenses; your PC being a little aged it is not as capable at displaying high-resolution images and greater colour depth, as a more modern machine.

Could be why you couldn’t detect some of the artefacts (in the earlier photos) that us more modern hardware equipped people noticed.

Notice: if you saved my Avatar (yes, that ugly thing) which is PNG at a fairly high JPG quality the JPG would be larger than the original PNG file - try it out for yourself if you want. :wink:

3

I got the png.png down from 15,260 to 5,979 (39%) using PNGQuant.


pngquant.exe 7 png.png

Thus forcing the PNG to 7 colors. Anything less and they black becomes grey for some reason.

Using PNGRewrite I got it to 9,148 (60%)

:slight_smile:

4

Yes, sounds good but for really “serious” hardcore psycho-driven shrinkage it would have to be 256 colours or less.

5

Aha! A new contest idea! Not a design contest, but
See Who Can Shrink the PNG The Most! : )

6

While I’ve stored photos as PNGs to prevent loss, I’ve never put them online as pngs except a few times as indexes thumbnails.

I want to benefit from lossy on the web. But, any text on a photo must be readable, so my lower limit on some photos re quality is 85%. That sounds a lot higher than what others are mentioning here, but the Mittineague park sign photos, I can’t read them, and the text is a main feature of the photo. I would have saved it higher for readability.

7

I did some more experimenting. Normally for such a simple graphic I would NOT use jpg, but I wanted to test compression vs. noticeable artifacts.

I made a simple 400x300 image in Micrografx and got these weights at these compression amounts

compression 1	74KB	100%
compression 5	53KB	72%
compression 10	41KB	55%
compression 15	34KB	46%
compression 20	30KB	41%
compression 25	26KB	35%
compression 30	24KB	32%
compression 40	21KB	28%
compression 50	19KB	26%
compression 60	16KB	22%
png		15KB	20%

I notice that the relative amount of weight reduction drops off considerably at higher compressions. That is 28% for the first 5 but only an additional 17% for the next 5 and only another 9% for the next, etc.

Most of them, even I could see “dirt” in the white areas, first noticeable (to me) at compression 10 and getting progressively worse. But 5 looks good to me and as that’s where a larger amount of weight is saved and none of my photos are as “simple” (easier to hide the “dirt”) I’m happy.

But I can sure see where png has it’s place - for this simple black and white 15KB - 20% of the jpg weight!

Now to try some new apps :slight_smile:

8

PNG stands for “Portable Network Graphic” and CompuServe helped develop it (seems it was originally named GIF24). There is only one PNG format :slight_smile:

For those interested you can read about the history of the PNG format here: http://www.libpng.org/pub/png/pnghist.html

9

Hmm, yeah I am only ‘short-sighted’ so I could see quite a huge difference between [1] and [3] for the first set of images (forest).

For the ‘MITTINEAGUE Park’ I found it harder to read on [2] but didn’t notice a lot of difference between [2] and [3]. As for [strpng.png] that is pretty dire and looks like 8-bit.

<browser_talk>
Hmm, a web browser has no concept of dpi thus it will appear different to say Photoshop (where you can see print and actual size, etc.) As far as the browser is likely to be concerned anything over 72 dpi is meaningless anyway (or for that matter so is 72 but that’s another story).

In reality the dpi ‘Text Size’ is a “Logical Inch” computed value. Don’t confuse “logical inches” with “real inches” - very different concepts.

For example we have three; 100px by 100px images, one at 72 dpi, 96 dpi and 300 dpi. It will look the exact same size within a web browser but when printed it will differ.

Basically DPI does NOT apply to video screens; video systems know no concept of dpi at all or any concept of inches either. You should notice that the terms “dpi” or “ppi” simply do not appear in any user manual for any monitor or for any video board.
</browser_talk>

Hence why the file: strpng.png (400 x 300) is larger (File-size [KB]) than; strpng2.png (374 x 281) it is the dimensions you changed NOT the dpi (as such both are 2 dpi). Also you reduced them to 64 colours and into PNG-8 instead of PNG-24 - you physically altered dimensions not dpi.

With the files: dircopy.jpg , str60.jpg and ws60p.jpg they are all (400 x 300) and (107 dpi).

I think you have got yourself completely confused over DPI and colour depth and the fact that in image editors; they may handle re-sampling/sizing differently.

It sounds like your Image Editor is a little peculiar. I suspect when it mentioned CompuServe what it actually did was convert the image into a GIF or at the very least reduce it to 256-color. That would explain why you had those 2 freaky results (and only 64 differing colours) on the last 2 PNG files.

It’s horses for courses, and PNG-24 would have a hell of a time trying to compete with JPG on a complex colour photo for file-size even if the JPG was saved at 100% quality. You’ve probably seen this: http://www.sitepoint.com/forums/showpost.php?p=4518703&postcount=23 and how I managed to get PNG to beat JPG on a like-for-like photo (without colour reduction).

Although without a doubt PNG-24/32 is the superior format for quality when using RGB images.

I hope some of this makes sense. :wink:

10

Old IM versions :- http://sourceforge.net/projects/imagemagick/files/

IM changes/improves every month and so there may be quite a few things you can not do with an old version.

Examples of most of the operators around version 6.5.0 IM operator examples The pages are quite large.

11

Thanks. I think I understand dpi better, though not well enough to explain it to someone else.

And I hadn’t noticed the different dimensions between the png images (I don’t know what happened there), but of course that would explain it. :d’oh:

I’m beginning to see there is no “easy” “one-size fits all” answer regarding compression ratio. It all depends on colors, content, dimensions etc.

I’ll have to curb my desire to hack file weight too drastically and settle for minor tweaking.

I’m guessing “blockiness” would be most apparent in a simple compostion containing diagonal parallel lines?

I’ll do more experimenting with staged compression increases and see when I first notice a difference. Then back-off some to allow for my poorer vision.

12

Mitt: Linux box?

13

My OS is a big problem that only continues to get bigger as time goes by.
It severely limits my ability to upgrade existing apps and install new ones.

Of course when I first bought it, it was “cutting edge” with “extras”. But we all know how long that lasts :wink:

I have Windows98 8GB. It’s getting harder and harder to find apps that are compatible with it, yet unless I come into a windfall I don’t see where I’ll be able to upgrade my system any time soon :frowning:

I did take a look at ImageMagick. With a little trial and error I should be able to find a workable archived version.

14

Ah, I had JavaScript disabled in the previous post and hence the lack of whitespace between paragraphs.

Windows 98 and 8 GB (I expected you to say something a little more modern like; Win Me and 20 GB). Yes, I was running a system with that OS and same hard-disk size still in 2006. Even in those days it was “nightmare” processing and waiting for certain applications to load - I understand your pain. :frowning:

Have you tried Irfanview: http://en.wikipedia.org/wiki/IrfanView it’s an image viewer but may help with some editing or PNGOUT for compressing PNG there will be Win98 versions archived on the net.

We have discussed; JPG will in nearly all cases produce a ‘smaller-photograph’ but always ‘loses quality’ when “lossy” saving.

So for the “final” web photo it basically will have to be JPG (filesize comparisons) although of course you may edit the file as a PNG or some other “lossless format” to keep integrity/quality during the ‘editing process’.

However, obviously PNG-8 will nearly always produce a smaller file than GIF so typically you should never have any need for the GIF format assuming you only want static images.

Good Luck! :slight_smile:

15

Good catch. That certainly clears up some confusion. Because the forum’s Attachments allows
Valid file extensions: bmp conf doc gif jpe jpeg jpg pdf png psd txt zip
I figured the Profile Album would deal with png files too - silly me. It does in fact change them to jpegs.

direct copy ~ 89.9KB

compression ratio 60 ~ 16.0KB

websaved compression ratio 60 progressive ~ 15.3KB

So using “web save” as I always have does help some.

One program saves pngs as CompuServe and the other as Portable Network Graphic - I have no idea if there’s any difference. But they’re still larger than the jpgs. Although one app lets me change the dpi and that made some difference. 232KB vs. 206KB

I trust your eyesight more than mine. I’m guessing that the blotchy I see only when I zoom in is noticeable for those with better vision. I had a feeling I was getting a little over-excited seeing the weight go from 45KB to 12KB. Short of my staying completely away from graphics because of my compromized vision, I would still like to use some compression factor to reduce the weight.

So is their any “safe” compression ratio that even a blind man could use and trust that quality was not trashed? I have to be honest with myself and admit that I can’t go near the “judgement required” zone.

Also, is reducing the dpi a bit relatively “safe” or “risky”?

16

Yes, image editors like Photoshop usually refer to DPI because they are typically talking about PRINT sizes so when you change the DPI it will alter the hardcopy “print size”.
In some editors that will means they also re-sample the image and thus you may unwittingly change dimensions - like happened with your PNG files.
I suspect that is why you wrongly thought you had altered dpi - between the two PNG files - they could have been 100000 dpi and still appeared the same size (dimension) in the browser. In contrast your image editor may have choked or drastically resized them.
Really, my question should have been what type of OS and computer specification do you have?
Since more than likely you could benefit from some different image manipulation tools and there are quite a few freeware or open source tools that may help with minor image edits, or image compression, etc.

17

If you use interlacing it will make the file larger as it’s supposed to be like interlaced GIF where it loads every other line first.

I took a look at the three files you had as examples my machine reported:

[1] Direct Copy [JPG] 44 KB (45,422 bytes)
[2] PNG Copy [PNG] 27 KB (27,434 bytes)
[3] Compressed Copy [JPG] 12 KB (12,056 bytes)

The last version is pretty blocky and of fairly low quality and actually the [your] “PNG” didn’t save as a valid PNG file and explains why it reported itself as 27 KB! - I suspect you uploaded the wrong file and the program just appended a *.png extension?

Unless my browser has gone haywire the file [2] was a JPG and even the header said it was JPEG - it was not PNG. :confused:

Thus I took a look at Alex’s PNG (which was a valid PNG) and on my machine it said it was: [80,856 bytes] I just lossless saved it using the normal method I use for all web PNG and go it down to [70,856 bytes] without even editing it thus about a 13% reduction on Alex’s version.

The PNG should be several times larger than a JPG (for most photos) anyway as it has to store all the colour spaces and hence why Alex got the “FAKE” file to “increase” in size from: 27 KB to ([“78KB”] quoting Alex). :slight_smile:

I assume those are the same files everyone else saw and I haven’t had my browser cursed. Plus I am not quite sure what Alex did; so I apologise to him, if he used another method or file.

18

Out of interest there is a 8bit version of IM as well as the 16bit.

19

Mittineague, your “experiment” with PNG is flawed…

While you had such a high file size with yours, I managed to get the PNG down to a much more reasonable 78KB (without any effort).

20

Which can all be explained by the Rate-distortion theory :slight_smile: