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.
Related
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.
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.
I'm working on a site that uses images diagonally aligned. The images are fairly simple and have some text inside so I can achieve the effect using either images or the CSS3 transform: rotate and border-radius properties, granted, with all the proprietary extensions.
However I'm wondering if there are significant advantages for using one over the other. I'm thinking maybe the CSS-only alternative would load faster, but a downside would be the use of more code for each image. Although using images I'd still have to do a lot of positioning for each element. Also, the CSS in the first case would not validate using browser-specific extensions, how important is this if I still make sure the site is correctly displayed in most browsers?
Is there a general approach for using either one of these options? What would you recommend?
The use of CSS3, versus images, is best answered by your need to support Internet Explorer (or other older, or CSS3-unaware, browsers): if a large portion of your user-base browses with IE then you should use images.
If you're only interested in the later, more standards-compliant, browsers (possibly including IE9, but I've no experience with it as yet) then CSS 3 is likely the better option, since it might involve a larger CSS file, but it does allow you to switch your layout more easily in future, without having to create/recreate a new set of images for the new design.
You could, of course, combine both approaches: use CSS 3 for the compliant browsers, but include an IE-specific stylesheet, with conditional comments, to supply the images as, perhaps, background-images to build up the design. This is, of course, likely to be a lot of work, though.
I would honestly recommend an image for this. CSS3 is cool, but browsers that don't support it might break your layout. Also (possibly more importantly), text really needs proper anti-aliasing to be readable when rotated or scaled, and you can get finer control over that with an image.
Two things I think you should consider here:
Images are a killer for those on mobile devices. So if you are targeting those with mobile or expect a large mobile audience, you may want to reconsider using a lot of images (and having your users pay a ton in bandwidth).
The text in your images (if you use images) will not be searchable by search engines and will not be accessible for those with accessibility issues, unless you are good at filling in your alt tags. ;-)
In what scenarios CSS sprites would be good to use and when not? Is it time saver or only server request saver?
I think bandwidth use will be same because image is same like ong big image but it's in a parts?
When and where use of css sprite is a time saving(in work) option ?
For navigation it's good for rollover pre-loading effect but not good for images disabled people?
What are other good usage which can save our time once and in future (if changes comes in design) both?
Edit: Sprites is only for css background so should we use images in background as much as possible to save sever request, is it good idea?
Update:
To implement takes more time then regular method and mostly client do not much worry about some slowness like http request. My question is can we save time in site making process and future maintenance of website using css sprite. or regular method is enough.
In nutshell my question is: “can CSS sprites save our designer and xhtml css coder time (I'm not talking about server request)?”
It reduces the number of HTTP requests which will enhance site performance.
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.
In Minimize HTTP Requests
CSS sprites are a time saver because it is a server request saver, as server requests are notably time-consuming. Using CSS sprites usually decreases your webpages' load/render time dramatically. There are times when they cannot be used, such as with background images repeating in two dimensions, but when you can use them, it's almost always worth the effort.
Of course you shouldn't sprite groups of images that are very big, especially if they're not very likely to be shown. Don't sprite an entire photo gallery into one big image, for instance =)
Other measures which amount to pretty much the same thing would be minifying, compressing and combining your scripts and styles into only one js file and one css file.
EDIT
With regards to your clarification, i'd say no, CSS sprites will always mean more work, never less, compared to just using the separate images as they are. I still wholeheartedly endorse their use, tho =)
CSS sprites are best used for elements that have a fixed width and height. Otherwise, you need large empty spaces in your sprite image, which can (depending on file type) increase the size a bit.
Due to the way different file formats compress images, sometimes a CSS sprite image will have a noticeably smaller file size than the total file size of separate images. That’s a nice bonus.
As mentioned, sprites reduce the HTTP request overhead, which can help load time. I’ve never seen any numbers on the magnitude of this effect.
Sprites will add a bit of time for your CSS developers. It shouldn’t affect your designers. But bear in mind that your developers code the site up once; the benefits of sprites apply every time someone looks at the site.
It will only reduce the number of requests but that will benefit both the server and the client. The server will not need to handle as many requests. The client, because it is limited in the number of parallel requests that it can make, will render faster as many of it's previous "requests" for the image will be served from its cache, allowing it to make the requests that it does need more expediently.
Using sprites reduces the number of requests and thus also the network overhead. Loading a few sprite image is faster and uses less bandwidth even if the image data is the same (or even a bit more) than the individual images.
It needs a bit more work and some planning to combine the individual images into sprite collection images, so the development time is somewhat longer. The difference is less if you have it in the plan to start with rather than combining the separate images afterwards.
Any scenario where you have several same size background images that replace each other (or complement each other) is ideal for sprites.
As long as you have something like a dynamic photoshop PSD file in the back, then the designer's maintenance won't be an issue. But if it is a static file like PNG/GIF, then maintenance will take more time as you cannot control the individual images separately anymore.
Overall, sprites is a great idea. Use it for fixed width & height images that are less likely to be updated frequently.
Sprites are always good to use. They help speed up the loading of web pages and prevent the blinking effect on navigation hovering.