Using CSS, we can play with background position property to display only the icons we want hiding the rest from view. Instead of using 24 separate images, we use this single sprite image to reduce number of server requests and bandwidth. Here we have a image sprite – “last-guardian-sprites_0.png” containing a number of character icons. Moreover, a lot of accessibility issues are also solved as background images are invisible to text browsers and screen readers unlike images which are regarded as content. This resulted in the conservation of bandwidth and increased website load speed. Sprites proved to be revolutionary for web fonts by solving the malice of generating multiple HTTP server requests triggered by individual images. By adjusting the CSS background property, only the required icon is displayed. Image sprite arranges all icons in a single GIF or PNG file and is loaded as a CSS background image. An image sprite is merely a collection of separate individual images put together to form a single image. Rise Of Image SpritesĮarly 2000s started a new trend of image sprites. Although use of images for icons is still quite common, it represents a terrible practice which must be avoided at all costs. Also, if an image icon has a hover effect, then a new image for its hover state needs to be loaded separately using Javascript/jQuery. Lastly, since images are not scalable, each image icon needed to have multiple resolution formats for different screen sizes. Another major drawback was that if a webpage was using multiple images for icons, each of them would trigger a new HTTP request which seriously downgraded performance. Image formats like PNG and JPEG suffer from the dramatic loss in rendered quality when up or down scaled. The biggest drawback of using images to display web icons is the lack of scalability. You can choose icon fonts or SVG but you should make sure that your designs are responsive so if you are looking for a free next-gen browser to build, test & debug mobile websites you can try LT Browser a dev-friendly browser in which you can see the mobile view of your website on Android and iOS resolutions & check its responsiveness.īut this technique was troubled with a plethora of shortcomings. In this article, we will explore in brief the history of web icons, pros, and cons of font icons vs SVG icons. SVG icons system ensures better performance, higher accessibility standards, high rendering quality, unmatched flexibility, and extensive customization. However, in recent times there has been a general consensus and momentum towards SVG icons format. Proponents of both icon formats argue the merits of one over another. This is a debate that shows no signs of abating is splitting the dev community into two. ![]() But now developers have 2 choices at their disposal – Icon Fonts vs SVG Icons(Scalable Vector Graphics). However, using images for icons delivers scathingly poor performance in terms of render quality and resolution. Traditionally, developers had to rely on just images formats to quench their needs. Consequently, every developer has to face this conundrum – Which icon set should they use? From navigation menus to social media icons, symbols and indicators, icons feature heavily on almost every single website and app on the internet and its popularity showing no signs of waning anytime soon. In the world of modern web, icons have become an indelible and integral part of UI design.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |