JPEG compression and progressive JPEG

Question

I have a high res Baseline JPEG which I want to compress from 6MB to +- 300kb for my website and make it progressive.

Now I know how to do both, progressive with photoshop and compression with a tool online or gulp/grunt task.

I am wondering what is the best order for the image(best quality):

1. First, compress the original image and then make it progressive.

2. First, make it progressive and then compress the image.

3. doesn't matter :)

Answer 1

As regards the quality, that is a difficult call since it is dependent on the images - which you don't show. And if you are going for an 20x reduction in size, you must expect some loss of quality. So, I'll leave you to assess quality. As regards the processing...

You can do both at once with ImageMagick which is installed on most Linux distros and is available for macOS and Windows.

Check input image size is 6MB:

ls -lrht input.jpg

-rw-r--r--  1 mark  staff   6.0M  2 Dec 16:09 input.jpg

Check input image is not interlaced:

identify -verbose input.jpg | grep -i interlace
Interlace: None

Convert to progressive/interlaced JPEG and 300kB in size:

convert input.jpg -interlace plane -define jpeg:extent=300KB result.jpg 

Check size is now under 300kB:

ls -lhrt result.jpg

-rw-r--r--@ 1 mark  staff   264K  2 Dec 16:11 result.jpg

Check now interlaced:

identify -verbose result.jpg | grep -i interlace
Interlace: JPEG

---

You can also use jpegtran which is lighter weight than ImageMagick :

jpegtran -copy none -progressive input.jpg output.jpg