Use background image code and background image code

Use background image code and background image code

<Button class = "u-btn"> click me </button>

. U-btn {background: url (images/btn.png) no-repeat 0 0 ;}. u-btn {background: url (images/sprite.png) no-repeat 0-50px ;}

 

Merge Images

What is a Sprite puzzle:

 

Benefits of Sprite:

Reduces network requests and increases webpage loading speeds

 

 

 

Image optimization and merging

Balance and trade-offs

 

Compression Tool

-Lossless Minimage

-Lossy TinyPng

 

Merge-arrange

Gaps must be retained between images

Picture Arrangement

-Horizontal arrangement

-Vertical arrangement

 

Merge-category

Merge images of the same module

Merge images of similar sizes

Merge images with similar colors

Merge the above methods

 

Merge recommendations

Merge images used on this page only

Stateful icon Merging

 

 

Browser compatibility Solution

-IE6 does not support PNG24 translucent (store 2 copies: sprite.png 24 sprite_ie.png 8)

-CSS3 & Cropping