Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I have a site that will have lots of images of large size. What is the best format that I should choose for displaying these images?

I need the website to load fast. I am jumbled with different formats of images like jpeg, png, gif, bmp, etc. Which to use in this case and why ?

share

closed as off topic by gnat, Robert Harvey, MainMa, Walter, World Engineer Oct 30 '12 at 22:09

Questions on Programmers Stack Exchange are expected to relate to software development within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

3  
Flagged as off topic. Belongs on webmasters.stackexchange.com (though it is probably a duplicate, there) –  Brian Oct 30 '12 at 19:48

3 Answers 3

Use JPEG for images with gradients (like photographs) and PNGs for images with flat colors and straight lines (like screenshots). Use GIF only if you need animations for some reason. Don't use BMP.

JPEG is lossy, so you get artifacts if you try to use it on screenshots.

PNG is lossless, so it looks great with screenshots, but the filesizes get really big for photographs.

GIF is kind of obsolete, PNG is better.

BMP is not a standard web image format.

share
    
This is straight up the correct answer. I will note that you can often make PNGs even smaller using PNG compression utilities, assuming your program for creating PNG files does a poor job with compression...which is often the case. Note also that GIF does not support 32bit images; if your GIFs are smaller than your PNGs, it is usually because you are using 16bit gifs and 32bit PNGs. –  Brian Oct 30 '12 at 19:46

In short, consider small thumbnail images as .png formatted wherever you list them in list. And spend some time on caching and its configurations.

In combination with this thumbnail images, have your large-sized images as png/jpeg. Generically speaking displaying list of all full-sized images will slow down your page load time.

However, having a wise caching configuration of the static web content through web-server is very important for performance, and it is a good way to go.

share
    
If you're after performance, try to avoid having too many small images, regardless of format. Read up on sprites. –  Carson63000 Oct 31 '12 at 4:48

If your aim is as you say to for "the web-site to load faster" then you might also want to look at making the images available via a Content Delivery Network (CDN) like Amazon Cloud Front or Max CDN.

share

This site is currently not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .