Today's Question: 

Hide

Different programming are similar in helping people build staff work as people want them to. But they all have their own features which differentiate them from other programming languages. The language type may be different, for example Java is OOP, some may have different syntax. A programming motto usually can best describe the characteristic of the programming language. For example, "Write once Run everywhere" for Java.Do you know any other programming language motto?
Do you know the mottos of programmig languages?
Description My Answer

Technical Article => Web =>  Web design

Use progressive JPEG to improve user experience

Source : 标点符    Date : 2013-07-25 08:11:50  

JPEG image files can have two different save types : Baseline JPEG and Progressive JPEG. Both of them have the same extension name but with different display effect.

Baseline JPEG

This type of JPEG files are scanned from top to bottom consecutively, each line of the image data will be saved sequentially. When opening this kind of images, data will be displayed with the save order line by line until all the data are read. If the image size is very large or network speed is very slow, then we will see the image is displayed line by line from top to bottom.

baseline

Progressive JPEG

Different from baseline JPEG, progressive JPEG file involves multiple scans. These various scans will be stored sequentially. When opening this kind of images, the blurred contour of the image will be displayed first, with the increase of number of scans, the image will become clearer and clearer. The advantage of this kind of images is we can see what the image is about even when the network speed is slow. We can see this kind of application on some websites with large images. the drawback is it occupies CPU and memory, but it's no big deal now as PC is becoming more and more powerful.

progressive

How can we save or convert an image as progressive JPEG?

1. PhotoShop

We can choose "Save for Web&Devices...", then check the Progressive box.

2. Linux

We can identify whether an image is a progressive JPEG using  identify -verbose filename.jpg | grep Interlace. If it outputs None, then the image is not progress JPEG, if it's Plane, then the image is progress JPEG.

We can use convert infile.jpg -interlace Plane outfile.jpg to convert a baseline JPEG to progressive JPEG.

3. PHP

Use imageinterlace and imagejpeg

$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);

4. Python

import PIL
from exceptions import IOError
 
img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)

5. jpegtran

jpegtran -copy none -progressive

6. C#

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { 
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); 
    EncoderParameters parameters = new EncoderParameters(3);
    parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
    parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); 
    source.Save(@"D:\temp\saved.jpg", codec, parameters);
}

Source : 标点符

Save as PDF Mark as read Mark as important
By clicking the "Mark as read" button, this article will be marked as read. It will be removed from the homepage's latest news and the article list on the "Technical article" page in following visits and it will be put to your read list which you can find in "Amin->Article read list". There you can unmark the read articles.
By clicking the "Mark as important" button, this article will be put to your important article list which you can find in "Amin->Article important list". Later when you want reread this article, it's easier for you to find it by checking the "Article important list".

Tags : Progressive JPEG,Baseline JPEG,User experience   Read(1614) Comment(0) Version(0)

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious 

 Previous : Origin of Windows blue screen
 Next : Do IE developers feel guilty?

  ::Related Articles

  ::Comment Zone  (Total 0 comment)

No comment for this article.

  ::Comment

Nickname  
Email 
Comment

:: Other versions

No other versions available yet.

:: Recent articles

:: Most read

:: Contribute

Want to share with the world your understanding about technology? Want to record the process you solve a technical problem? Want to make the world benefit from your understanding and solution? Write them down. You make the world better, the world makes us better.

Write article

:: Find us

Back to top