I've tried these 3 approaches out, and they all seem to give me the same result.
I tried to research to find out the different performance between them, I didn't come across anything so far.
<div class="col-lg-3"><span class="success-icon"> </span>icon</div>
<div class="col-lg-3"><i class="icon-circle-blank success"></i></span>icon</div>
<div class="col-lg-3"><img src="img/success-icon.png"></span>icon</div>
I'm wondering which way is the most efficient way to do and why ?
From a performance perspective, a sprite image set or font icon would be preferable to using a single image for an icon. Still, using too many custom fonts can create some performance issues if you use a lot of them and a sprite image set is not always easily applicable to every situation or design.
If using font icons, use something like Fontello to compile a custom font icon library that only includes what you need so that the size of your font library is minimal.
If using sprite image sets, use tools like Dan's Tools Sprite Generator to render your sprite images with different alignment and different spacing to make it work for your project.
Don't use single images for each icon.
Related
I am curious about the pros and cons of using a CSS image sprite for my social media icons vs. using a custom UI font.
Which one will offer superior performance in terms of page load speed?
It seems to me that a CSS sprite may be better- as there is only a single HTTP request & the file size can probably be kept smaller than a custom UI font for social icons.
Anyone have insight on this?
One of the two techniques will have a slight 'superior performance in terms of page load speed', but most of the time project requirements and development time far more important than load speed.
Image sprite vs Icon font and page load speed
Number of requests: Both techniques need CSS and load one file. You need to generate multiple fonts, but only one font is requested and used.
Amount of CSS: More or less the same. #font-face is more initial code but less applying the icon.
File size: More or less the same, but depends on icon size. Bigger icons need bigger image sprite. Fonts use vectors and will stay the same size. I looked up a font with 300 glyphs it is a 25KB WOFF (the SVG is double the size). A font containing one glyph is 4KB. To compare the two I should render all glyphs black on transparent in a sprite. But at what icon size?
Render speed: Negligible.
Cache: Negligible. There are CDNs for icon fonts.
I think both techniques score the same. The differences are negligible. Off course one will be slightly faster than the other. But you should measure that in your specific situation. Anyway, we know multiple requests are the bottleneck. And both fonts and sprites only need one request.
Image sprite vs Icon font and stuff that matters!
Color: Sprites can use all RGBA colors in the same icons. Fonts only have one color. You can apply effects to make fonts more special (and these effects will match the same effects on other page elements).
Shape / size: Image sprites need duplicate icons if you want to apply different sized icons (e.g. high resolution displays). Fonts can be applied in any size.
Rendering: Image sprites render pixel perfect. Fonts get applied by render engines, resulting in differences per platform. Windows utilizes the built in hinting instructions. Creating good hinting requires a lot of skill.
Use area: Image sprites can also be used by other page elements (backgrounds). Since fonts are applied as text, they have a smaller use area.
Maintainability: The icons need to be one pixel bigger. This kind of change makes you generate the sprites and update CSS. With a font changing just one font-size value will get the job done.
Development time: Above points are important design decisions when creating your own icons. That said, most developers just use the technique they feel comfortable with. Or pick one of the may sprites or fonts out there.
To come back to your question. Do you want to use multiple colors in a single image? Than an image sprite is the way to go. I would include each icon as separate Base64 image. It keeps maintenance easy. Although this will come at a cost: Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
I'm curious what your considerations are. Looking forward to your comments!
1) Icon Font glyphs are going to render faster than image sprites.
2) An Icon Font can also be smaller in k size than a comparable sprite sheet if you use Fontello (free, and easy to use) to create a custom font that only includes the glyphs you are going to use in your app / site.
For example, for a recent project I created a TrueType font that contains 8 glyphs, weighs less than 8kb, and the icons scale beautifully up or down; sharp and clear.
Easily apply colors, try 80% opacity, etc.
Css sprites do improve on load times but with the speed of the internet the average viewer would never even notice the difference. This website has a full breakdown of what they are and what they do, comparisons and more. http://css-tricks.com/css-sprites/
Hope this helps :)
My manager tells me not to use icon fonts on our websites, as it is another http request plus the extra kBs to download. Also because I would have to use content before for the font (I can't change the html), he prefers background images so it works in IE7.
Personally I love the little things, so nice and crisp and resizeable!
I get it if we only use a couple of icons on a website but if I would use, say 5 icons on a site - what do you guys think? Is it worth using an icon font or is he right thinking that it is not?
I am just a sucker for anything new and exciting, and this year it is the retina display.
Icon fonts and high density screens
Using icon fonts will be more and more relevant as more high resolution/density displays become available.
A 16×16px icon can look horrible on a high density display (>300ppi). It may either display incredibly small or unsharp due to automatic scaling. A 1em font icon on the other hand will render correctly and sharply regardless of screen density.
It of course all boils down to your
application users and
your requirements (IE7 seems to be the major breaker)
For now sprites are the way to go.
Downsides?
Icon fonts have a different problem as well. All icons are single colour. There's no font standard as of yet to have multi-colour capability. And it likely won't be. At least not for fonts. There are possibilities of doing multi-colour using SVG fonts which isn't a font standard/format per se but can be font container and used as a font delivery mechanism in your browser. Doing multi-colour icons as SVG fonts makes it possible to have colourful scalable icons (thanks to #Joey).
Vectorised icon images would better suit full colour resizeable icons.
Requests and font icons
Your boss' argument about additional request are simply false. It doesn't really matter whether your icons are part of a file or (in best case) part of a sprite image.
Both yield an HTTP request to fetch the resource. File size heavily depends on complexity and format but it may be that sprite image will be smaller. But having a few kilo larger font file doesn't really make much difference. They both get cached on the client afterwards.
I personally use Font Awesome as my primary resource for fonts, In my case I load it from the CDN hopping other pages that use it already fetched it and this was cached by the browser.
If file size is a concern, I can recommend to you this incredible awesome tool
http://fontello.com/
It allows you to merge several fonts into one single file, and only includes the icons you actually use.
http://www.icnfnt.com/ does the same for fontawesome, but I kinda like more fontello because it allows to use more fonts.
icon fonts is the way to go honestly in my opinion...
EDIT I lately have being using this app a lot too: http://icomoon.io/
When you use fonts, different browsers on different platforms will give different results. PNG files will give stable and independence results.
I have implemented a font icon library using icomoon and it works well on all the browsers including ie7. For small sets of icons this is a suitable practice, the font's scale properly, can be changed to any colour you require and you don't have to worry about PNG/GIF transparent background colours matching.
However... If your library becomes larger (mine is now around 40 icons), it becomes increasing difficult to maintain. If the designer ceases to work on the project, or you need to change the icons, it is a laborious process to update the fonts. Everything then needs to be retested. It is also difficult to dynamically icons using CSS (for ie7).
So, given the difficulty of maintenance, I'm considering switching back to a series of sprites (of different colours). The reasons being:
Any designer can easily add a new icon to the set.
The CSS doesn't need to be retested or altered.
You don't have to screw around with javascript workarounds for IE.
You don't need javascript at all.
For retina displays, simply create a verion of the sprite at twice the size,. You will probably need to have a different version of the CSS for retina regardless, as all the other images on your site will have the same density problem.
I would recommend 2 solutions to your problem these is what i would use for best customers support like they wanna change the text, size or other stuff
Use Fontsquirrel to make a webfont and embed it in your website trough your css and add it in your ftp directory if thats not getting pretty then use google web fonts
If non of that looks like it should i would go for the image solution your boss said..
All this also depend on which amount of time you have to solve your problem and such
Btw if you cant access the html i thought you could access the css which you can do trough most backends, if you cant then go for the image!
Last but not least, if you decide to go with the image solution, make a sprite which you direct trough on a background position. This way you only have to load 1 picture for all your little icons.
He's right. I'd use css sprites in this case. And if you have to support ie7 (I'm so sorry) you don't really have any options. Exploring those things on your own - of course, you never know what will come in handy or when.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
Is there any advantage to this?
How can this be used?
For example, for the following Stack Overflow sprite, how would I display just one of the images?
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
Change the css property background-position.
yes , using sprites is good for website performs because every single component on website send different http request .So, when we use sprites images the http request become less & website performance increase.That rule is also apply on css also less css files less http request. you can yourself with the help of safari web inspector.
for more better performance download "yslow"
And with CSS sprites is also possible to make e.g. menu button hover effect without waiting until second image loads. see
It has the advantage that only one image needs to be loaded so that things like hover (roll-over) effects are faster. The technique is usually called "CSS sprites". Google for it.
It has been common for a while to put two images on one sprite sheet, but the tendency has been moving towards combining ALL of your background images on the same sprite sheet to load just one file for all of them. There's a rather good tutorial here.
Has anyone seen tooling, or even a process concept to generate css sprites from an existing website's images, and css during the build process?
I should think the steps would be:
walk an images directory
create a single sprite file from all the images in that directory
for each image
find any css classes using that image
update the css class to use the new sprite file
I'll using asp.net so something in msbuild would be awesome. However, I'm finding little out there even coming close.
You could use this http://spritegen.website-performance.org/ which is BSD licensed code. (see the download link on the right hand side.)
An automatic process like that only works well if you have a few simple images. There are several reasons to do the process manually:
Some image formats work better than others for sprites. If you try to make sprites out of JPEG images the compression will easily bleed from one image to another causing artifacts. Index color formats like GIF and 8-bit PNG has a limited number of colors, so if you put images with too varying color palettes together you will lose colors.
You may want to repeat an image horisontally or vertically, which makes it harder to combine the sprite image.
If the image is smaller than the element that you use it in, you would have to pad the image with transparent pixels. If the size of the element is dynamic in any way, the automatic process would not even know how much padding the image would need.