As you already learn about the performance of a webpage, Images
put a lot of effects on the performance of a website. If you want
to increase the response of website then you have to reduce the
images requests.
One strategy for reducing the amount of image requests is to mix
all of your little images into one big image file so just one image
gets requested. The big image will be the collection of you all
little images. Then make all the little images responsive to
display by using background-position property.
An example with source code is given below.
Social media sprites
<styletype="text/css">.c34-sp{text-align:center;background:lightgrey;padding:10px;border:1px solid yellow;outline:1px dashed orange;}.c34-ul{padding:0px;margin:0px;list-style-type:none;}.webtags_sprite{background-image:url(img/blog-img/webtags_sprites.png);background-repeat:no-repeat;display:inline-block;}.webtags-github{width:30px;height:30px;background-position:-5px -5px;}.webtags-gmail{width:30px;height:30px;background-position:-45px -5px;}.webtags-linkedin{width:30px;height:30px;background-position:-5px -45px;}.webtags-stackoverflow{width:30px;height:30px;background-position:-45px -45px;}.webtags-tumblr{width:30px;height:30px;background-position:-85px -5px;}.webtags-twitter{width:30px;height:30px;background-position:-85px -45px;}</style>
<divclass="c34-sp"><ulclass="c34-ul"><h4>Stay connected.</h4><i><ahref="#"class="webtags_sprite webtags-github"></a></i><i><ahref="#"class="webtags_sprite webtags-gmail"></a></i><i><ahref="#"class="webtags_sprite webtags-linkedin"></a></i><i><ahref="#"class="webtags_sprite webtags-stackoverflow"></a></i><i><ahref="#"class="webtags_sprite webtags-tumblr"></a></i><i><ahref="#"class="webtags_sprite webtags-twitter"></a></i></ul></div>
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
