Page 10 - Payout Magazine Online Volume 9.2
P. 10
Creating a
Progressive JPEG
Though you might not know it, the typical How Are Progressive JPEGs Even How to Use a Progressive JPEG on
format of many JPEGs you see on the Possible? Your Own
internet nowadays has changed drastically.
The new format, entitled Progressive JPEGs, The following section is definitely more The way to encode your own Progressive
largely invalidates the original type, the reliant on technical terms, but if you want to JPEGs is easier than you think—it’s merely a
retroactively-named Non-Progressive JPEGs. be truly familiar with the process you’ll want to matter of knowing the right scan script and
Like most people, you may not even know the understand this method. then inserting it into a text file.We recommend
difference or even how to make a Progressive using this one, for ease:
JPEG yourself. To help with this predicament, To start with how Progressive JPEGs work,
in this article we’ll be telling you what exactly we’ll have to turn our attention to the pixels 0 1 2: 0 0 0 2;
a Progressive JPEG is and helping you create themselves. When you load a Progressive 0 1 2: 0 0 2 1;
your own. JPEG, the process begins by converting the 0 1 2: 0 0 1 0;
baseline RGB (Red, Green, Blue) pixels into 1: 1 63 0 0 ;
What is a Progressive JPEG? YCbCr pixels (Luma along with two chroma 2: 1 63 0 0 ;
pixels). This allows the photo to separate the 0: 1 63 0 0;
Whether or not a JPEG is Progressive elements that distinguish it from being a clear
or Non-Progressive is determined by how photo versus the colors that the human eye After you insert this code into a text file,
the image itself loads. For example, you may picks up, in order to prioritize certain elements use an available encoder (we recommend
be familiar with the Non-Progressive way of the photo while holding off on other aspects. either mozjpeg or libjpeg) with the following
of loading a JPEG in which the image slowly script:
begins to appear, bit-by-bit, until it is completely After the pixels are themselves separated,
loaded on the screen. This is quite different another process begins called the Discrete cjpeg -scans scanscript.txt < input.ppm >
from a Progressive JPEG because of how the Cosine Transform (DCT). DCT divides the output.jpg
image isn’t there inherently and must load fully pixels into blocks of 8x8, then classifying each
for you to see the full size of the image. block as high frequency or low frequency The encoder will then be able to help you
depending on how much detail each block has. output a Progressive JPEG easily.
In more technical terms, a Non-Progressive
image is encoded from the top to the bottom, By separating the pixels this way, the See? It’s not a truly difficult process, it’s just
meaning that the pixels are prioritized in a photo can then begin to load based on the important to know what is exactly happening if
specific order that then dictates the size of the different elements in the photo that are higher you want to make effective use of the format.
overall image. frequency versus the aspects that are lower
frequency. This is why you’re able to slowly Final Thoughts
In contrast, Progressive JPEGs begin the see different details of the photo more clearly,
loading process with the entirety of the image. as that’s quite literally what is happening. The Our technological world is constantly
The image, though, is very blurry, inciting the elements of the photo that don’t have as much changing and innovating new things we once
actual clarity of the picture to be the part that detail (often giving off the shape and color of thought were impossible and our transition
is loaded over time. any given photo) will appear first, while the from Non-Progressive to Progressive JPEGs is
specifics take more time to load. no exception. There are many benefits to using
So, progressive images are encoded in Progressive JPEGs in virtually any situation,
a different way that does not prioritize top The main benefits of using this type of making it a logical choice to familiarize yourself
or bottom motion, but instead an encoding encoding process is that you’re able to give with the proper encoding knowledge to be able
process that allows the image to be encoded image previews without having to rely on a to make them yourself.
from the inside out while still being able to give fast connection. For example, those who have
you an accurate view of the image’s full size. mobile plans that aren’t as fast or are on not- We hope this guide has been helpful and
as-strong wifi connections can be able to get you’re effectively able to use Progressive
the general gist of a photo without having to JPEGs to make your website pages more
download the entire image. coherent and accessible!
10 PayOutMagazine
