Can I change the compression ratio of a JPEG image on travel.state.gov?

Question

When on travel.state.gov's photo editor, I get

Image is overly compressed. Please use a compression ratio that is less than 20:1

Is there anyway to get past this screen in the application given a jpg file? Can I open it up in a gimp and make less-compressed knowing the quality won't be better?

Solution

We can devise two ways to do this (1) by editing the image, or (2) by editing the JavaScript code.

How it works

Looking at the code, you can see how it's calculated from the definition of

function getCompressionRatio(e, t) {
    return 3 * e.naturalWidth * e.naturalHeight / t
}

And the call site,

var e = getCompressionRatio(image, imageNumBytes);

So in the definition e is image and t is imageNumBytes. This is the assumption that the raw image is 3 bytes-per-pixel (TrueColor).

function getCompressionRatio(image, t) {
    return 3 * image.naturalWidth * image.naturalHeight / imageNumBytes
}

Our options

1. Editing the image: In order to get a lower "compression ratio" for your image you need only lower the numerator ( 3 * image.naturalWidth * image.naturalHeight ) or raise the denominator by making imageNumBytes (image size) bigger.

2. Editing the JavaScript code: Alternatively this error is rendered here,

   if (MAX_COMPRESSION_RATIO < e)
       setUI(UIModeEnum.INIT),
       setMessageDialog("Your photo has been rejected for the following reason(s):", [{
           description: "Image is overly compressed. Please use a compression ratio that is less than 20:1"
       }]),
       showControls(!0, ["divMessages"]);
   

   In Chrome you can open up the developer console (Ctrl + Shift + J) and run,

   MAX_COMPRESSION_RATIO = Infinity
   

   And then the conditional will never trigger and you won't get that error.

Comments

[Yorik]

compression ratio may be a red herring: include the pixel dimensions of your failed upload in your question. FYI passport photos are 2x2 inches, which is 600x600 pixels if printed at 300 ppi. No need for the image you upload to be larger than that.

[Yorik]

it is not that crazy: 3 * pxwidth * pxheight is, for 8bpp RGB, the byte size for the raw image data. This ignores all headers, metadata, and file specification of course, but for a rapid file-spec-agnostic rule of thumb. it is sane. In addition, I haven't traced the code, but it assumes a canvas of 600x600 (see my comment to the question), so their method captures massive downsampling aka "effective resolution". The real problem is their failure to mention that 600px square image is optimal.

[Evan Carroll]

@Yorik Good observation. That makes sense. I don't think you understand their application. The whole purpose of it is to crop a regular photo to their desired dimension with proper sizing (guidance whether or not the face is within the margin of error). If you had a perfect passport photo you wouldn't need the application to begin with. Think Mom wants a passport photo and you have have only a cell phone and the photo needs to be 2in x 2inc, with the face 1in-1.3in wide.

[Yorik]

So reducing and printing a 7000px square image as 2inch square @ 300ppi tends to blur the contents. I think the point of the uploader is to help identify potential passport rejection problems. So objecting to an overly reduced image is possibly part of the rationale. If it were me, and I knew the desired spec(!), I would reduce the size before uploading to check for sharpness. But I have done a lot of book design even going back to the 80s so I know what to look for. The site doesn't assume lots of knowledge, but the error would be improved by actionable information for graphics design novices

[Yorik]

I will add that it isn't simply a wording problem: I know lots of "normal" people whose eyes glaze over even trying to relate the most basic information about size and ppi etc.

[Ali Ghanavatian]

I created a google sheet for this. it could be useful to find out how much should you resize the image to bypass the validator.

[Evan Carroll]

@AliGhanavatian I think the MAX_COMPRESSION_RATIO = Infinity trick is much easier. ;)

[Ali Ghanavatian]

@EvanCarroll surely.. that disables the check altogether. I just thought there was a reason that forced the developer to write that code, and it probably would have an effect on the system or probably filter the application out. :)

[Evan Carroll]

@AliGhanavatian Nope, you don't even have to use their tool to do this. In fact, in March when they deprecated the Flash tool I basically just did it in Gimp (this tool wasn't out). Worked fine. I'm not sure why that code is there, but there is no government regulation anywhere that talks about compression ratios and how they're calculated. Government probably said "can we make sure these very bad photos aren't accepted." And this is the best a stupid developer could do in the time allotted.