I noticed that Digg and Google are using a kind of CSS optimization in their GIF header image. For example digg uses this image:
Why are they using this technique and how to do it in my own site?
These are called CSS sprites. They are used to reduce the number of server requests.
Check out this nice article about them: http://www.alistapart.com/articles/sprites/
CSS Sprites: Image Slicing’s Kiss of Death:
A List Apart
Another article at Smashing
Magazine
A hack to support IE6
The purpose of this technique is to reduce HTTP-requests by combining all images.
It's called a css sprite
I believe these are called splices (or is it sprites); basically they load up the whole image one time and tell CSS to display only part of it, that way they avoid having to (pre)load lots and lots of images.
They add more responsiveness to the page, since consecutive images are loaded immediately.
As weichsel mentioned, check the article # A List Apart.
They use that technique so one image is downloaded rather than the browser potentially making many different connections to download multiple images.
You can then "crop" the image as a CSS background-image using a combination of CSS properties like "background-position" and "width".
The the links the others are posting while I write this probably have good techniques to crop the images.
Related
I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.
I look at the techniques used, and see that:
you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
you need to make the foreground element to somehow disappear with css tricks.
All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer
(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)
One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.
As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.
The main difference is that in the img tag the image is hardcoded.
With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.
As #Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.
Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.
The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:
The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).
However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.
If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).
One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.
This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.
I been working on rollover images with pure css and i am aware of 2 solutions to achieve the desired result. I wonder if there are any benefits which i am unaware of with those methods and if there is a preferred method or is it just a preference (I just want to make sure before i finish a giant project so there are no surprises later)
first method
The first method i run across is to save multiple images as one image.
then to set the image as the background of a divider (that is smaller then the whole image)
then on :hover you set background position to negative and the other images appear
Some cons and pros i thought of is that:
pros
you do not need to preload the images manually (by placing code at the end of css file)
It might be easier to organize your image files as there could possibly be fewer of them
cons
it can be difficult to know how much exactly move the image especially if you have seperate team designing the graphics
second method
The second method i run across is to set an image background of a divider and then to change the background url on :hover
Some cons and pros that i can think of on top of my head:
pros
possibly less time in development
can exchange rollover images with more ease and dont need to specify the size of the divider
cons
need to preload images at the end of css file
possibly more mess in your image folder if you have a lot of files
Is there any pros or cons that i am missing? Is one method generally preferred over the other and why? Or is it personal choice and there is no problem with using either one??
Update:
Here is a link to simple preload for the second method with pure css. I thought there was an even simpler way (of just placing the links) but i cannot find it. Still this is pretty basic.
Update(2):
I have learned that sprites have additional
benefits of making websites faster by reducing the number of http requests.
and benefit of rollover being as fast as possible with no flicker
And a blunder of making a less accessible site, and would limit the potential benefits of the title and alt attributes in the HTML. (if used incorrectly for all images instead of just decorations and buttons)
CSS sprites (the first method) is generally favored due to the fact that pre-loading isn't necessary to maintain a quality user experience.
the ALA link Wex posted is a good primer on the benefits of sprites, and Smashing Magazine recently published an article which addresses your concerns about background-position when using a sprite with many images
http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/
The first method is much better than the second one. You don't always have to bundle up every image into one giant image - that usually makes it hard to add new images - but it does make sense to put every image and their hover state in the same image so you don't see a flicker on hover, and so you don't have to rely on some preloading script.
Here's a good article that talks about the benefits of using CSS sprites: http://www.alistapart.com/articles/sprites
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.
I'm a real noob with css and have seen many times, many little icons in a larger file. I'd like to know if I can use something like this for a rating system that I'm making. 5 stars being the best and one being the worst. I'd like to be able to use a single file that contains all of the stars and then based on the rating, show the proper rating. I'm used to doing it the old way by slicing up the images and then showing the rating that way.
What is this and where can I find more info on it?
This is a technique known as CSS sprites. The main advantage is that you save some (or sometimes, a lot) of HTTP requests.
You can read about them here, for example, and one good article to read is also this one on diagonal CSS sprites.
When you come to building your own, there's a lot of tools around that will assemble smaller pictures for you and also generate matching CSS with the proper background-position values.
Try searching for CSS sprites - here's a decent intro
http://css-tricks.com/css-sprites/
and SpriteMe is is a funky little bookmarklet that does the heavy lifting of creating the sprite image for you
http://spriteme.org/
Both links point in turn to other reading for you
It's called css sprites.
its called "css sprites" look on this article, with example how to do it to rating image:
http://www.last-child.com/image-sprites-flexible-and-accessible-packages/
i want to know about sprite technology used in css regarding fast accessing of the web pages.
They are cool because you can minimize http requests with them and make your page's performance improve. They are considered good in terms of SEO as well. Check out this for more info:
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This page gives a pretty good overview.
Essentially it puts all of the page's images into one large image file and then uses CSS to display only parts of that file (to give the effect of multiple images). This has the advantage of only requiring the browser to make one request for all the images rather than a bunch of individual requests (each of which has an overhead).
If you have the group of icons for example , you are creating one jpg or png file and adding the images one after another. Then you just creating the backgrounds based on only one image and fixing it in percentage / pixels view. It makes your code organized and saves images loading time . For example , you have a window and it has close , unfold icon. You can create a png file named windowControlSprite.png that contains two icons one after another , then you can create properties in your css to this element. #somediv {background-position:0px -20px;}
Also, you can find CSS sprite X and Y easily with tools like http://www.getspritexy.com/
Otherwise you need to use image editors like Photoshop or use Firebug to find X and Y coordinates.