What Are Progressive JPGs

[DRE]

On Xenforo 1.3 Beta 4. Ran a webpagetest.org test and it says I have an F for progressive jpgs.

http://www.webpagetest.org/result/140221_0C_10Q6/1/performance_optimization/#progressive_jpeg



Use Progressive JPEGs: 0/100
0.0 KB of a possible 29.5 KB (0%) were from progressive JPEG images

FAILED (29.5 KB) - https://tpc.googlesyndication.com/simgad/8878088576940046957
Info (1.7 KB) - https://8th.us/data/avatars/s/0/114.jpg?1364155356
Info (1.6 KB) - https://8th.us/data/avatars/s/0/75.jpg?1349554989
Info (1.6 KB) - https://8th.us/data/avatars/s/1/1734.jpg?1386273201
Info (1.5 KB) - https://8th.us/data/avatars/s/1/1629.jpg?1369862024
Info (1.5 KB) - https://8th.us/data/avatars/s/0/31.jpg?1345833281
Info (1.5 KB) - https://8th.us/data/avatars/s/1/1339.jpg?1384707264
Info (1.4 KB) - https://8th.us/data/avatars/s/1/1768.jpg?1393009477
Info (1.3 KB) - https://8th.us/data/avatars/s/0/126.jpg?1386273442
Info (1.3 KB) - https://8th.us/data/avatars/s/0/94.jpg?1392160769
Info (1.3 KB) - https://8th.us/data/avatars/s/0/59.jpg?1392180071
Info (1.1 KB) - https://8th.us/data/avatars/s/0/1.jpg?1392320951
Info (1.1 KB) - https://8th.us/data/avatars/s/0/90.jpg?1362539955
Info (1.0 KB) - https://8th.us/data/avatars/s/1/1607.jpg?1392876938
Info (0.9 KB) - https://8th.us/data/avatars/s/0/77.jpg?1392869611

Yo @xfrocks can one of your addons help with this?

 

[DRE]

Okay I found out whats up: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/

I want this!!! So instead of waiting for the image to load from top to bottom it decreases the resolution and increases it gradually, which gives it an appearance of speed.

 

[DRE]

Whatcha know about this @digitalpoint

 

[TPerry]

I want this!!! So instead of waiting for the image to load from top to bottom it decreases the resolution and increases it gradually, which gives it an appearance of speed.

Wouldn't

for i in path/to/images/*.jpg; do convert -strip -interlace Plane -quality 80 $i $i; done

take care of it if you have Imagemagick installed and shell access?

 

[DRE]

Hmm cool. I'll ask @MattW about this.

 

[TPerry]

Hmm cool. I'll ask @MattW about this.

No guts, no glory!!!! How ya' gonna learn?
It should work but I'm not sure how the system is set up. I'd back up the image folder first though.

 

[DRE]

I'll backup first. Good idea.

 

[HittingSmoke]

Progressive JPEGs are better in a lot of instances but for avatars I wouldn't even bother. Unless you have extremely low throughput you're not actually going to see any benefit. Unless your users are seeing the avatars load slowly line-by-line then you're solving an issue you don't have.

In reality you probably have a lot of regular users to your forum. The avatars are images that are loaded repeatedly by the same users over and over. On 90% of page loads users are likely loading them from browser cache anyway instead of downloading them.

You'd be hitting a thumbtack with a nailgun by putting all of your avatars through reencoding to make them progressive. Not to mention you're degrading the quality of the JPEGs by recompressing already compressed data a second (or third, or seventh) time.

Unless your forum is heavy with attached in-line JPEG images you really shouldn't bother with this. It's a waste of time for a meaningless score on a performance metric site that has no contextual reference to the images it's loading.

 

[DRE]

Progressive JPEGs are better in a lot of instances but for avatars I wouldn't even bother. Unless you have extremely low throughput you're not actually going to see any benefit. Unless your users are seeing the avatars load slowly line-by-line then you're solving an issue you don't have.

In reality you probably have a lot of regular users to your forum. The avatars are images that are loaded repeatedly by the same users over and over. On 90% of page loads users are likely loading them from browser cache anyway instead of downloading them.

You'd be hitting a thumbtack with a nailgun by putting all of your avatars through reencoding to make them progressive. Not to mention you're degrading the quality of the JPEGs by recompressing already compressed data a second (or third, or seventh) time.

Unless your forum is heavy with attached in-line JPEG images you really shouldn't bother with this. It's a waste of time for a meaningless score on a performance metric site that has no contextual reference to the images it's loading.

So adding progressive to my imagemagick will make my avatars look worse. Basically?

Forget that then.

 

[HittingSmoke]

So adding progressive to my imagemagick will make my avatars look worse. Basically?

Forget that then.

Not quite but sort of. That's oversimplifying it a bit.

JPEG is a compression method. You can't make JPEG lossless. Every time you save a JPEG data is lost. The more you save it the more quality is lost and the more pixelation and noise is visible. This is why when you see pictures floating around the net from the 90s they look much worse than we remember them. It's because they are. They've been recompressed so many times they're approaching unrecognizable.

Also recompressing already compressed data can actually increase the file size. Unless you're resizing a JPEG (like in the case of XenForo generating the three avatar sizes) you do not want to resave it because that puts it through the compression filter again degrading the quality and no reducing the file size. It's pretty much all negatives.

If you could modify the XenForo image handling script to save the resized avatars as progressive the first time they're processed that would give you progressive avatars without as many negatives. It's a lot of work for what will amount to almost no net benefit though.