Webdesign - jpg or png that is best for websites

Question

I have been a web developer for a long time, and I'm used to converting all my projects to png file format to create my web pages. Despite the fact that png, unlike jpg, allows image transparency, is this the best solution?

The question is about page load time and best web design techniques, as well as file size and image quality.

What do you think is best to use?

Answer 1

Given the ever-increasing speed of the average network connection, I am not inclined to think that page loading time is of great concern [ducks!]; Actually, it’s much more useful to think about what you are trying to achieve using the resources that you have at the end: for example, limited bandwidth? Then the desire for more severe compression is not difficult. Will the graphic content of the site expand, ensuring that the cost of space on the server increases over time? Then the desire for more severe compression will delay this cost. Is this an art portfolio? Then - yeah! - Compression artifacts in working with the probe can be really desirable! Are you trying to flog a game? Then the screenshots should probably be ultra-clear.

In the general case, I would repeat what was said, although perhaps in a slightly different language: for furniture for sites, which are usually computer-generated and will be cached for reuse between pages, tend to png; For site content that will often be page specific and probably large and complex to mask lossy compression, lean towards jpg.

With a special link to switching to png, where you decide it is appropriate, run everything through PNGCrush for granted - otherwise they will not be displayed with the colors that you expect in each browser, and the overall quality of your design will decrease .

Answer 2

It depends.

PNG is better for crisp, low-color images,

JPG is better for a low-bandwidth image - however, it is not as crisp and therefore not very good for a graphical user interface.

Typically, JPG is for photos and images, while PNG (or GIF) is for layout.

You can find this page as it covers the basics of PNG and GIF.

Answer 3

Google wrote about this very well. From Choosing the right image format, you can find a block diagram to make a decision:

Answer 4

"Given the ever-increasing speed of average network connections, I'm not inclined to think that page loading time is more worrying."

According to website SEO optimization, Google evaluates your website worse if the page load time exceeds 2 seconds, so compression is necessary, especially on new websites that are heavy on schedule.

Answer 5

jpg is usually preferable for photographic images that have many subtly different colors. png works well with computer graphics.

This is my rule of thumb.

Answer 6

I am a starter, and basically what I do is if the image is too large, I do small if it is not a background image. And if it's for layout, I choose PNG and JPG for images.