Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've read articles, forums posts, answers here and everyone suggests font-icons are a way to go when it comes to load times and speed of a website.
I was about to use FontAwesome for a couple of icons and the problem is large weight of a font itself (not to mention 25KB CSS unless you take what you need).
You end up with cross-browser compatible font extention list that weighs 705KB !! Just to use a couple of small icons on a page?
I've done those same icons on Photosohp and total file size is around 28KB. That's more than 20 times smaller for browser to download!! So why the heck everyone is talking about speed of font icons over images or image sprites?
yea fonts are faster than images because on loading of multiple images multiple http request needed but for fonts they can load from CDN server, there is another reason why we use fonts because we can change font size colour and dimension easily.
refer this link
why Fonts better than images
There are a few things to answer here.
First, why do people talk about iconfonts, well they are kinda old news, but the as for the reasons why they're still used they would include:
Browser backwards compatibility
Ease of use (especially inline with text)
Maturity, many existing icon sets come pre-packaged in this form
Second as to the size issue, you can customize icon fonts to include whatever you need specifically, check out IcoMoon (assuming you're not already using an automater such as gulp / grunt). It'll allow you to build / manage your fonts.
Third, i personally don't use icon fonts anymore, because of 2 reasons:
They are affected by font anti-aliasing
vertical alignment is more difficult (since it's affected by line height, etc)
Instead i use SVG sprites, i also have a nifty gulp process that will let me design in illustrator, and create sprites just by saving them in a particular directory, naturally it also optimizes / compresses them.
If you want to figure out how to do this for yourself i suggest checking out:
https://github.com/sindresorhus/gulp-imagemin
https://github.com/w0rm/gulp-svgstore
For the initial load of the page, there might be more data, but fonts tend to be cached, so subsequent loads, or loads of other pages that use the same font will be faster.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm developing a website for a photographer. The landing page is made of a big responsive background image and a menu. I know how to make a responsive background image, but the question I have is : Which resolution should the image be? Should I get 2-3 different sizes and apply them depending on the device width or one which I would reduce? Which should be the biggest size for the biggest screens? Thanks.
Focus more on compression and format than resolution. If you use caching and compression on the server you won't need to decrease the resolution of the image. As for this question:
Should I get 2-3 different sizes and apply them depending on the device width or one which I would reduce?
Use the same image for all screens. Also note that changing the image size attribute doesn't decrease load times, it just resizes the image after downloading it
I'm not sure I agree with Random User 100%. I would, if possible, use differently sized images for different media sizes. Since theres a huge range of screen sizes, and also a huge range of bandwidth limitations, If you can serve the smallest possible image size for the screen, it will have a large effect on load times. While Random User may be correct about compression and the size attribute, BUT caching won't help if users are loading your page for the first time. A high-res image loading on a 3G connection is gonna hang up your page load, one way or another.
Currently there isn't wide support natively in browsers for responsive images (yet), such as the srcset attibute or the picture element, but there are Javascript alternatives. The one I use is Interchange, part of the Foundation framework.
You do want to be careful that you are not trading image loading savings for Javascript loading losses. However, in general, javascript libraries are fairly small, and the additional HTTP request for a JS file will usually be outweighed by the savings gained by not loading a massive image on a mobile device. I would recommend combining and compressing your Javascript into a single file, but thats another thing altogether.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I have a website that pops-up animated icons when you mouseover them
But i think that maybe it could result in poor graphical performance from the browser. I could put animated icons in a sprite, and not-animated icons in another, but what is the point? in that way sprites stop being useful. Do you recommend using a script that animate the icons placed in the sprite manually?
What is your recommendation? Since i need a good performance.
Don’t guess, test! Seriously. As long as the animated gif is of reasonable dimensions, I doubt it’ll be a big problem. However, the best way to find out is to try it. Try using Chrome or Safari’s Web Inspector to profile page load times with the various strategies (no animation, animated icons in a separate file, everything in one image), and see which performs the best. If there’s not much difference, choose the easiest one. You can always change it later if performance becomes an issue.
The gif compression format is a tricky one because all of the blank space isn't treated like it would be in a jpg or png (bitwise). However as the number of animations increases and the number of colors increases, the gif format will begin to break down. What you should do is test the individual sizes against the size of the sprite image. The performance of moving the sprite shouldn't really be an issue at all, but as other answers have said you'll have to test it with different browsers and form factors.
The support for animated GIF is present in all majors browsers since nearly the beginning of the World Wide Web (www); 2 decades ago. I would be very surprised if they were of any concern for any modern browser excerpt for those who don't support graphics like Lynx.
You might have a problem with some browsers if the frame rate is too high but this clearly not the case for these icons that you are showing us.
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.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow.
What are its cons?
Will it work in all browsers as claimed in their site?
Yes, it is a good technique.
You can reduce the number of HTTP requests and it is a page optimization technique.
The first rule in
Best Practices for Speeding Websites by Yahoo
is
Minimize HTTP Requests
80% of the end-user response time is
spent on the front-end. Most of this
time is tied up in downloading all the
components in the page: images,
stylesheets, scripts, Flash, etc.
Reducing the number of components in
turn reduces the number of HTTP
requests required to render the page.
This is the key to faster pages.
CSS Sprites are the preferred method
for reducing the number of image
requests. Combine your background
images into a single image and use the
CSS background-image and
background-position properties to
display the desired image segment.
One way to reduce the number of
components in the page is to simplify
the page's design. But is there a way
to build pages with richer content
while also achieving fast response
times? Here are some techniques for
reducing the number of HTTP requests,
while still supporting rich page
designs.
When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.
It is supported by almost all modern browsers.
This is also a good article on CSS sprites
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
It worked for IE 6 Safari Opera 8+ and FF2+.
You should read this:
Gif Compression
It explains how GIF (and other image files) are compressed.
For example displaying the same data in "rows" instead of "columns" reduces the space usage dramatically.
Furthermore you preload all images and there is no delay if you swap images.
Another plus is that you can use one sprite for a "red" design and another sprite for a "blue" design.
However there is one disadvantage:
Most of the browsers cache the image sprites.
So you might running into troubles when it comes to updating the sprite.
Its a great technique, but you have to be real carefull as how you do it so it works correctly in every browser.
It can be done and is a good optimizing tip, but as always, pay attention as how it works in IE, Firefox and Chrome while you are doing it.
The cons are that it can't be used always, and you have to stick to the least common denominator for cross browser css support.
Done right, it should work fine in all browsers (even IE6).
The biggest con I can think of is that if you have too many images in one sprite, and need to change the dimensions for just one of them, it can cause you to have to change a lot of CSS (since the offsets for other images will probably change as well)
One downside i've run into is that CSS sprites don't seem to print properly in many browsers
Of course, because it saves lot of http request, that very important for your website loading time.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great explanation and everything you need to know about CSS Sprite.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
When I build a site I tend to do a bit of graphic design (developer style) in Paint.NET, but how do I know the colors will all display properly on all browsers on different machines? What color depth to you generally code for? 16bit 256 colors etc.
I don't worry about whether the colors will display perfectly everywhere, as even the most basic of cell phones support 16-bit color.
In my opinion, the days of having to worry about 'web-safe' colors is mostly over.
As long as you're not using colors incredibly similar to each other, you should be good.
Another item to consider is:Color Blindness
FYI, when choosing colors you might want to take Color Blindness into account, about 5%
of males are color blind.
This Page describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people.
Here is more info on Color Blindness
On a related note: be aware of using png's.
Different image editors (not sure about Paint.NET) embed the so called gamma correction information in the png. This gamma correction info is used by some browsers and makes the png look different than the rgb colors that you expect.
I have personally encountered this problem on several projects where a png transition to a background color was a perfect match in firefox but not in IE.
Best practice is to remove the gamma correction using pngcrush. Which is a good idea anyway since it reduces overall filesize, even when gamma correction is not an issue at hand.
Here's some more info if you fancy some reading: http://hsivonen.iki.fi/png-gamma
Sorry if this sounds kindof offtopic but I just thought I'd mention it to you when using colors and Paint.NET for use on the web.
I shamelessly steal lots of color styles from here. I haven't had much trouble with the color schemes on most peoples' computers.
I say this noting that I'm not a web designer, but a programmer who is forced to design webpages on occasion, so take that for what it's worth.
According to w3schools only 2% of visitors still have 256-color displays. If you don't use web colors, they'll just see somewhat different colors from what you intended, so there's not really any reason to stick to web-safe colors, which really limit your choices.