Progressive JPEGs

[jensen]

What program is best to save a Progressive JPEG?

Currently I just use paint.net then save as PNG 8-bit but am reading that progressive JPEGs are encouraged to speed up load times. So how do we save or code a page to present images with progressive JPEGs?

 

[essellar]

Progressives just improve the apparent responsiveness (the user sees that something happened fairly quickly); they actually take longer to load and render completely. Almost all of the photo/paint software I've ever used can save progressive JPEGs, but you often have to go to an options panel after selecting JPEG as the file type (the settings appear in a separate panel rather than on the save dialog itself). But don't get too carried away here; PNG-8 and JPEG are best used for very different image types. If you need something with sharp shapes, such as pixel/line art or a logo image, PNG-8 with an optimized palette (octree is a good optimization) will almost always yield a smaller and sharper image than a JPEG. Save the JPEGs for full-colour images (photographs, blobby/cloudy backgrounds, that sort of thing). If you need sharp detail that can't be fudged a bit, you can't use much compression on the JPEG, and that will bloat your file considerably compared to a PNG.

As well, if the image is used in your CSS and it's under 2 kb or so, it's often a better idea to Base64-encode the file as text and include it as a data: URI. For example, this uses a small PNG image, Base64-encoded, to provide a carbon-fibre look background:

background: black url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAMAAADXEh96AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9QTFRFICAjJiYpQ0NFLy8xOTk7EYEfBwAAACRJREFUeNpiYGJiYmRkZGBhYWEAAmZmZhAFFAGKg1gIcYAAAwAFFgA936VlzQAAAABJRU5ErkJggg==) center top repeat;

It's bigger as text than it would be as a PNG file, but only by a few bytes -- and it saves an HTTP request. You'd be surprised what you can do with really small images.

 

[jensen]

Came across the Base64-encode when I looked at feedthebot.com He even has a tool for visitors to convert their images to Base64. Didn't quite understand it but seems like it saved on the round trips and made the website load faster.

Since the Base64 is loaded each time the page is called, wouldn't that affect it's overall performance when compared to a page that uses "caching" to reduce reloads on recurrent visits?

Note: Thanks for the guide -"below 2k image use Base64".

 

[essellar]

Stylesheets are also cached unless you force them not to be, so you won't ordinarily suffer an additional download with each page load. In fact, it's a good idea (generally) to set a very generous expire date on stylesheets and change the name of the CSS file if you want to update the site (post-development, of course -- it's a genuine pain to have caching in place when you're developing/designing and testing). Even if you're using static HTML pages rather than, say, an included page header file, you can do a simple search-and-replace for the filename across multiple files (and often recursively in subdirectories) with many text editors or with command-line tools like sed (which you can use in Windows under cygwin if your preferred editor doesn't do it) or Perl.