how to use sprite image in your code

<p></p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjtcnG7yYjr__mfgp-7zPjhDHBFJ1duG8NvxIFWT8YZ4sNOYMW0Y2mqg86cCqDVagwHYBWt19bJ7sZ79GKOqmk6xicJpN3LmbH__0PBVtofswfT5NE7BECMtJ_FSV4QSgMqKMvDgfppe9Df0UbCRep77YemgJPmj8nzFN8pnFJXZMfQR-1fvtGnY36S4A=s600" style="margin-left: auto; margin-right: auto;"><img alt="using sprite image in website" border="0" data-original-height="400" data-original-width="600" height="266" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEjtcnG7yYjr__mfgp-7zPjhDHBFJ1duG8NvxIFWT8YZ4sNOYMW0Y2mqg86cCqDVagwHYBWt19bJ7sZ79GKOqmk6xicJpN3LmbH__0PBVtofswfT5NE7BECMtJ_FSV4QSgMqKMvDgfppe9Df0UbCRep77YemgJPmj8nzFN8pnFJXZMfQR-1fvtGnY36S4A=w400-h266-rw" title="how to use sprite image in website" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><p></p><h1 style="text-align: left;">Sprite image</h1><div><span>    </span></div><div><span><span>    </span><span>    </span>Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because the website won't need to request each icon as it can load the image with a single request.</span><br /></div><div><span><br /></span></div><h2 style="text-align: left;"><span>How to use sprite images:</span></h2><div><span><span>    </span></span></div><div><span><span><span>    </span><span>    </span>The basic idea behind the sprite usage is to load the image using CSS and set the position of the image relative to the icon's position. e.g. if an image is 200 * 800 size with each icon being 200* 200 in size. Then the image would have 4 icons. we can use the first icon by using the span icon's background property and setting the background position to 0 0 coordinates along with its width and height to be 200 * 200.</span><br /></span></div><h4 style="text-align: center;"><span><span><u>Example</u>  </span></span></h4><div><span><span><b>HTML</b></span></span></div><div><span><span><b><br /></b></span></span></div><div><span><span><span><span>    <span class="twitter-icon" ></span></span>    </span><br /></span></span></div><div><span><span><span><br /></span></span></span></div><div><span><b>CSS</b></span></div><div><span><b><br /></b></span></div><div><span>.twitter-icon : {</span></div><div><span>background-image: url(" path of image");</span></div><div>width:200px;</div><div>height:200px;</div><div>background-position: 0px 0xp;</div><div><span>}</span></div><div><span>    <br /></span></div>We can then load the next icon by setting the background position: 0 200px which will show the next icon. <p></p><p>P.S. The best way to set icons properly is using DOM CSS and manipulating them according to your requirements and then setting those values as actual values. </p>

how to use sprite image in your code

Sprite image                Sprite images are made up of small images or icons combined to be used in the websites. They are helpful because...

View Complete »

how to create Sprite image online

<p style="text-align: left;"> </p><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhqkZMIWkmXj2LFjzlHuytkyGQdgdNKiEo7_sVw2pibH287WWVmTmjhFA2G8MhXbh93Gl-5HSfpPkY4xB9_smbDje_CXRneDxC3pzCyq3ax79zuzpcFj4XgwBKXB5GXnWcpfJctHtQL1ogftpv_TPCfS3hVWIMB7x0ZrFhkViA-YF6LGctM1_I9PKx4bw=s600" style="margin-left: auto; margin-right: auto;"><img alt="How to create sprite image with SVG Icons" border="0" data-original-height="400" data-original-width="600" height="213" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEhqkZMIWkmXj2LFjzlHuytkyGQdgdNKiEo7_sVw2pibH287WWVmTmjhFA2G8MhXbh93Gl-5HSfpPkY4xB9_smbDje_CXRneDxC3pzCyq3ax79zuzpcFj4XgwBKXB5GXnWcpfJctHtQL1ogftpv_TPCfS3hVWIMB7x0ZrFhkViA-YF6LGctM1_I9PKx4bw=w320-h213-rw" title="Sprite image" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Creating A sprite image online</td></tr></tbody></table><p></p><h2 style="text-align: center;">How to create a sprite image</h2><h3 style="text-align: left;">what is a Sprite image:</h3><div><span>    <span>    </span></span></div><div><span><span>    </span><span>    </span><span>    </span>Sprite images are two-dimensional or one-dimensional multiple images combined together to form a single image. These are created by combining a number of small images together to form a big image. Sprite images can be created in one dimension(vertical or horizontal) or two-dimension depending on the number of images.</span><br /></div><div><span><br /></span></div><div class="separator" style="clear: both; text-align: center;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEgcb-pUsiXNbwDbMRNDawk1hjZQSoergMMEzaOj8yAoEXQ_73LMialikaz1uyVy4mmINALV7A2Rgiq29lla3SY3RWREXU06BxAAOGbFobo7FaooiSmZ06JSECBcMMG5hJ2BAzBWB31ZM-m8K6i0TB7UXrymVtIleARCTHlFi9J5E6TBMhX43IRs3rNOXQ=s400" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="100" data-original-width="400" height="80" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEgcb-pUsiXNbwDbMRNDawk1hjZQSoergMMEzaOj8yAoEXQ_73LMialikaz1uyVy4mmINALV7A2Rgiq29lla3SY3RWREXU06BxAAOGbFobo7FaooiSmZ06JSECBcMMG5hJ2BAzBWB31ZM-m8K6i0TB7UXrymVtIleARCTHlFi9J5E6TBMhX43IRs3rNOXQ=w320-h80-rw" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Horizontal Sprite Image</td></tr></tbody></table><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEggJ2-xsosKVl6yymxGnIF2bhdkvQQNK7tTJNlTG1EX3CXUYUbvalKfA_H9Lh_695VWTzs4EvGnfxfF9SLSt6QfYPquUBaLctO3V79wEVXMxBJ-2rHV975RqfEn4WudZ6Z3rEFrPhkYcOLWj7_YAWD0IUatPb8AbllEHkUvs5EPzEOSvnfWe7ROiC8Yow=s800" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="800" data-original-width="200" height="320" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEggJ2-xsosKVl6yymxGnIF2bhdkvQQNK7tTJNlTG1EX3CXUYUbvalKfA_H9Lh_695VWTzs4EvGnfxfF9SLSt6QfYPquUBaLctO3V79wEVXMxBJ-2rHV975RqfEn4WudZ6Z3rEFrPhkYcOLWj7_YAWD0IUatPb8AbllEHkUvs5EPzEOSvnfWe7ROiC8Yow=w80-h320-rw" width="80" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Vertical Sprite Image</td></tr></tbody></table><br /><br /><br /><br /><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjNQ-fc5Kf9Fn1MVcFSS1mqBB1RmDOK_d9KzYHjN2b2kE6KeTDtDFG92feZ-dWkATCoEZddJemyoQFqCGmUp8Hy4bDx0YlkoLm2t8HWCCxKBdsJp3bPD7c-HOsqCgiVR8dcesSuyCiRJvtjuSQiJoAX-gSjiN0Be5GzNzOn1nynNm3gzbSOiMOb3IztKw=s200" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Sprite image" border="0" data-original-height="200" data-original-width="200" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/a/AVvXsEjNQ-fc5Kf9Fn1MVcFSS1mqBB1RmDOK_d9KzYHjN2b2kE6KeTDtDFG92feZ-dWkATCoEZddJemyoQFqCGmUp8Hy4bDx0YlkoLm2t8HWCCxKBdsJp3bPD7c-HOsqCgiVR8dcesSuyCiRJvtjuSQiJoAX-gSjiN0Be5GzNzOn1nynNm3gzbSOiMOb3IztKw=w200-h200-rw" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Two dimensional sprite image</td></tr></tbody></table><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><h3 style="text-align: left;">WHY Sprite image :</h3><div><span>    </span><span>    </span></div><div><span><span>    </span><span>    </span>Now a days, Almost all the websites includes icons and images. These images are loaded by making HTTP request to the server. If a website contains many different images and icons, it will cause to many http request which is not good for website. Creating a sprite image solves the problem as it is a single image consisiting of all the images.</span><br /></div><div><br /></div><div>Websites like Blogger, in the content writing section, we hhave a handfull of tools loike bolding the texting, making it italic, adding images to the blog etc. These all icons can be used in a single image for Optimization of website. </div><div> include an example like blogger or StackOverflow icon bar can be made using sprite image</div><h3 style="text-align: center;"><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span><span>    </span></h3><h3 style="text-align: center;">Usefull Links</h3><div><br /></div><h4 style="text-align: left;">Icons :</h4><div><span><br /></span></div><div><span>    You can get any kind of icons and images from the given link and create your own sprite image</span></div><div><span><br /></span></div><div style="text-align: center;"><span><i>                   <u><a href="https://github.com/bradtraversy/design-resources-for-developers#icon-fonts">https://github.com/bradtraversy/design-resources-for-developers#icon-fonts</a></u></i></span></div><h4 style="text-align: left;">Online tool</h4><div><span>    This tool can be used to avoid any installations for using the editing tool.</span><br /></div><h4 style="text-align: left;"><i style="text-align: center;"><u><br /></u></i></h4><div style="text-align: left;"><i style="text-align: center;"><span style="font-weight: normal;">                                                <span>    </span><u><a href=" https://www.photopea.com/" target="_blank">https://www.photopea.com/</a></u></span></i></div><div><br /></div><h3 style="text-align: left;">Create a sprite image</h3><div><span>    </span><span>    </span></div><div><span>    </span><span>    </span>Open the online tool and In the top navigation menu, go to File > New and set the dimensions for the sprite image.  e.g. if we wanted to create a vertical,we would set the width to 100px and height to 400px.</div><div><br /></div><div>Now import the images by going to file and importing the images. Scale each image to 100px width and 100px height. which makes 4 images in this sprite images. Arrange the images and saved the image so it can be used within the website. </div><div><br /></div><div><b><br /></b></div><div><b>NOTE : Use svg small images for using the sprite image which can be scaled up or down according to requirements.</b></div><div><b><br /></b></div><div><br /></div><div>Now you can use this image inside your website. </div><div><br /></div><div>Happy coding :) </div><div><br /></div><h2 style="text-align: left;"><br /></h2><p></p>

how to create Sprite image online

  Creating A sprite image online How to create a sprite image what is a Sprite image:                         Sprite images are two-dimensio...

View Complete »