What is the difference between png and jpg in html/css

Difference: 1. The png format supports transparency, but the jpg format does not support transparency; 2. The png format is a lossless compressed picture and occupies a large memory, while the jpg format is a lossy compressed picture and occupies a small memory; 3 , png format web pages load slowly, and jpg format web pages load quickly.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

When I first started writing web pages, I thought that inserting pictures would be enough. I didn’t care about the image format at all. Today I learned that there is a certain difference between the use of .png and .jpg format pictures in the web page. It’s too late to meet them. Ah... there is a little easter egg at the back: fixed position and return to the top design...

eg:

1).png: supports transparency, has a wide range of colors, high picture quality, and is more commonly used. Lossless compressed pictures take up a lot of memory and the web page loads slowly;

2).jpg: does not support transparency, takes up a small amount of memory and has a fast web page loading speed. It is a lossy compressed picture.

Case:

The code is as follows:

      
  
 
lalalalalallalalala
 
lalalalalallalalala
 
lalalalalallalalala
 
lalalalalallalalala
 
lalalalalallalalala
 
 返回顶部 
 
  

If you exchange the order of the two background images (i.e. .jpg The picture in the format is on top, and the picture in .png format is at the bottom, this will be the effect):

Visible: .png format supports transparency, and .jpg format not support.

Related recommendations: "html video tutorial"

The above is the detailed content of What is the difference between png and jpg in html/css. For more information, please follow other related articles on the PHP Chinese website!