after logging in to facebook, if you right-click on the image meant to show friend requests just beside the facebook logo at the top left side of the page, and inspect the result in google chrome, you find the css rules as #fbRequestsJewel.hasNew a.jewelButton. This is the background image url there.
Number of images inside it and i think those individual images are used in different places in FB,
How is that done? Is it image mapping or what? Why to do in that way instead of using separate images? What are the advantages?
It's called a CSS sprite and is basically an element that uses background-image and background-position to reuse a single image to show many different smaller images.
It's done to speed up the time taken for a page load load, as each resource the browser requests adds an overhead of an additional HTTP request.
A List Apart has a great article on the usage of CSS sprites.
It's called Sprite may be you have to check this answer
How to make a single image, treated as three different images?
check this article for more http://css-tricks.com/158-css-sprites/
hi this is called css sprite on images
Basically when we have individual images on server we have to load each images seperatly.
this will load the image in one single server trip and using css background-position we can displayed the image which we want where ever we need.
You can refer this website for simple and complete understanding of css sprites.
CSS SPRITES
Related
I have the following images/slides on the home page of my website;
Home page: https://www.atlasestateagents.co.uk/
Images:
https://www.atlasestateagents.co.uk/img/Liverpool-Slide.png
https://www.atlasestateagents.co.uk/img/Landlord-Slide.png
https://www.atlasestateagents.co.uk/img/Vendor-Slide.png
Having used some online SEO tools I can see they are considerably adding to the page load time which apparently can have a negative affect on SEO performance.
The images have to be large in size as the site uses the Bootstrap framework and scales up/down depending on screen size.
Is there anything I can do to reduce the file size and/or load time?
File Types
The first and simplest thing to consider when optimizing images is file type. Certain image file types are better suited for specific images. For example, JPGs are best suited for photographic images. PNGs, on the other hand, are best suited for simple images with few colors or for images using transparency. 24-bit PNGs are best suited for images containing both photographic elements and simple graphics. 8-bit PNGs can further reduce file size in images with fewer than 256 colors.
Sprites and Preloaders
A helpful practice for reducing load time is the use of CSS sprites, which are CSS codes that display a piece of a larger image. This technique is often employed for mouse-over states on buttons. For example, with a sprite you can display a piece of an image as a button on your site and display a different piece of that image as the button whenever a user mouses over it.
Though sprites are frequently used for interactive menus and buttons, they can also be used to display multiple site images from a single image file. This would require the browser to only download one image instead of, say, three or four.
In addition to sprites, images can be preloaded using JavaScript, jQuery, Ajax, or CSS. When an image is preloaded, the browser downloads or “preloads” the image and then instantly displays it when the user goes to access it. Preloading can greatly decrease load times with image heavy websites, especially sites with photo galleries.
Using CSS Instead of Images
Sometimes the best way to decrease image load time is not to use an image at all. Improvements to CSS have made it possible for the browser to render certain “images” using pure CSS. It is now possible to generate rounded rectangles, gradients, drop shadows, and transparent images using CSS. Be warned, every browser won’t always support these techniques and browser compatibility should be carefully considered before replacing an image with CSS.
Suggesting some good reads on image optimization and reducing load time if using images.
http://www.getsnappy.com/web-optimization/improving-page-load-times.html
http://www.monitis.com/blog/2011/05/29/30-tips-to-optimize-htmlcssimages-for-smooth-web-experience
http://www.practicalecommerce.com/articles/3354-Optimizing-Images-to-Reduce-Load-Times
Do Images Load Faster in HTML or CSS?
When i create gallery on my website, i need thumbs? Or i can use full images and resize it with css?
For example, i have gallery like that: http://otomoto.pl/renault-20-r-20-1-6-1-6-gtl-C21940610.html
If every images will be resizing with css, then browser will load the same image many times or one? Page will load faster when it will be image01thumb.png, image01normal.png, image01full.png? Or just image01full.png?
If you resize with CSS, then the client will have to download the whole image and resize it, which is not good in terms of bandwidth. You want some thumbnail-sized images so that you can send a small image to the client rather than having to send the full thing.
It depends what kind of gallery you have. Obviously when you are using thumbnails the client does not have to download the full image if he never sees the full sized one. But if you have a dynamic gallery where for instance you make an image bigger with a tween/animation on mouse over it might be preferable that the image already is loaded so the transition goes smoothly.
When I search in Google, instead of their main page, when I look at their logo, and copy the image path, it shows that:
http://www.google.com/images/nav_logo91.png
Well, it is not a logo only, it have many icon as well. Is there any reason why Google use this way to do so? any results or just for showcasing their technique skill? Also, how can only show a part of a image only? Thanks.
It's a sprite. Doing this can reduce file size and load time.
You can splice the image using JavaScript or using CSS (CSS being the more popular choice). You can make the element with a div tag, then set the background-image property to the URL you've specified. Then use the background-position property to align it appropriately. Lastly, set the expected width and height of the div.
Its called CSS sprites. A lot of websites use this technique, where in all (decorative) images on the site are contained in a single image.
This single image tends to be smaller in size than the sum of all the individual images (each image holds its own color table). Also, fetching a single image from the server means lesser HTTP server requests.
The large image is then placed as backgrounds in div's and manipulated using background-position and other CSS properties to ensure only the portion of the sprite shows that is required.
It's like animuson has already explained, they're called CSS sprites, to expand a little they are used to prevent excess HTTP Requests.
By having just one image to load, it is cached and then the website can use that one image for multiple backgrounds but only make certain areas viewable by using background-position.
A good explanation is here: http://css-tricks.com/158-css-sprites/
I'm on the fence about coding about 8 social media icons on a site as either img tags or anchors with CSS background images that use sprites.
I wish I could do a poll here, but I'm interested in hearing from you all what you think is best and why?
Here's a link that addresses when it is best to use img tags versus CSS background images that use sprites:
When to use IMG vs. CSS background-image?
It specifically gives the instances when CSS with sprites are better, because CSS with sprites
are faster loading and
can be used when you only want to partially display the image.
The link I gave provides a much more complete answer (my two points were off the top of my head, I bookmarked the link above and often use it for reference).
I think, in terms of my preference, I like to use sprites. Primarily because you can put all your icons in one image file, css-move the background image to the location(s) and then the user only has to download (cache) the one file. This means less requests on your server, less files to wait for AND you can preload just the one file. And updating is easier, IMO.
Hope this helps.
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
My questions:
Is this a good idea?
If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images?
Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
Why?
Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
You can add other UI or layout images to your sprite
Optimize the resulting PNG:
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
When not to use sprites:
When part of the images in the sprite change frequently
In this specific case: when the majority of users would need less than the (about) 10% of the images
I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e. x * -64px and y * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.
Yes, this is a good idea: it reduces load time, since one only has to download one big image, instead of hundreds of smaller ones.
It depends. If you have caching-abilities for a page, then you can "stitch" all thumbnails into one image file. If you have a very dynamic webpage, then it's quite harsh to build this stitched image every time the thumbnales are updated.
Not sure, if this is what you ment with "sprites", then no, if you ment something else with "sprites", then yes: this answer is an example of one.
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.