Testing Progressive JPEG
Created: | Updated:Just a simple page to test if a JPEG image is progressive or not.
JPEGs can be stored as baseline JPEG or as progressive JPEG. In the case of a baseline JPEG the whole file needs to be loaded before it can be displayed. In case of progressive JPEGs they can be displayed as a blurry version of the image while still loading the whole file.
This is mainly achieved by storing the coefficients of the image in a different order. In the case of progressive JPEGs the primary coefficients of each 8x8 pixel block are stored first. Therefore it is possible to show a color block for each 8x8 pixel block pretty fast and improve the display of the image as soon as more content is loaded.
This simple code over here is just testing for the JPEG markers 0xFF, 0xC2 within the file to determine if it is progressive or not.
Example
Over here you can test your own files. Just open the file you want to test and get the result immediately.
Select your JPEG file:
Code
And here the Javascript code of this test:
function loadFiles(files) {
var binary_reader = new FileReader();
binary_reader.file = files[0];
binary_reader.onloadend = function() {
var test = /\xff\xc2/.test(this.result);
var status = document.getElementById("status");
if (test) {
status.innerHTML = "Progressive";
} else {
status.innerHTML = "Not Progressive";
}
}
binary_reader.readAsBinaryString(files[0]);
}
And the HTML part:
Select your JPEG file: <input type="file" onchange="loadFiles(this.files)" />
<div id="status">Select ... </div>Creating Progressive JPG with PHP
Creating JPG images with PHP is pretty straight forward but per default it creates baseline JPG images.
To create progressive JPG images just set the imageinterlace bit to 1:
imageinterlace( $im , 1 );
imagejpeg( $im, $target, '90' );