Combine images with css sprites

Combine images using CSS sprites

Imagine you have six images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster. Instead of downloading six images, your webpage would now only have to download one.
This is the beauty of CSS sprites. One resource, but several uses.
Most webpages use several small images in their design. Background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed.
Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.
The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.

How to combine images into CSS sprites

There are two main steps to take when creating CSS sprites. First you must make the image and second you must position the image.

Combining images

We will use a simple example here. Let’s say we have two images we want to display on a webpage for style purposes and wish to combine them into one. We must know the size of the images in order to create the sprite. We will use an example where both images are the same size (50 pixels by 50 pixels).

To combine these images we would create an image that was 100 pixels by 50 pixels. We must call this image something, let’s call it “sprite.png”. Now that we have a combined image, we can use what we know about the image to display it correctly on our web page.

The combined image has a width of 50 pixels and a height of 100 pixels. As such we could say that the first image (the megaphone) resides in the top 50 pixels of the new image, and that the second image (smiley face) resides in the bottom 50 pixels of the image. We can use this knowledge to position our images correctly on our page. In essence, we will display the top half of the image when we want the megaphone and the bottom half of the image when we want the smiley face. This is how we go about doing that…

Positioning the images on the page

For this example will we use the images as background images in divs. This means that we will create empty div tags in our HTML to display images. if we wanted the megaphone image to show up somewhere on our page we could create a CSS div class of “megaphone”…

The above CSS code is saying the width and height of the megaphone image (50px by 50px) it is also calling the image “sprite.png” which is our combined image. Finally it is saying the “0 0px” part, which is how the sprite works. By telling the image to start at “0 0px” it is saying that the image should be displayed from 0 pixels X and 0 pixels Y. Dont let this scare you or bring up bad algebra homework nightmares. It is really saying “start the image at the top” and “start the image at the left”.
Since we defined the width and height of the image in the CSS, the image will only display 50 pixels down the image (where the megaphone is) and will stop, thereby not displaying the smiley face at all. Now let’s do the smiley face and see how that changes our code. We will create a CSS class called “smile”…

Note that we are still stating the same width and height, we are still calling the same image, but what we have changed is the “0 -50px” part. This is because we are now telling the image to start somewhere else. specifically, we are stating that the image should start 50 pixels down (-50px). This is because the smiley face image does not start until the bottom half of the combined image, 50 pixels down from the top.
Now that the CSS is done we can just call a div in our HTML wherever we want the images to show up. Where we want a megaphone we just enter an empty div called “megaphone”

When we want the smiley face we enter a div called “smile”

That is the basics of combining images into CSS sprites, but there are many ways to do it and it is worth exploring what is best for your pages. The above tutorial was just to generally display how sprites work and is by no means an in depth discussion of them.

Источник

Combine images using CSS sprites

Status: Must be applied by the user.

Introduction:

Image spriting has been created and implemented as a standard by video game designers. It allows a lot of textures to be grouped on the same image file so that when the game engine requests the textures only one file has to be loaded. Then the engine chooses which of the textures from the file to show. This use of image spriting pre-dates the creation of CSS by 20 years.

How CSS sprites work:

Combining images with CSS sprites works on the same principle as spriting in game development. When the web browser requests from the server the images on the page it wants to load, there will be created additional HTTP requests for each separate image file. When images are combined with CSS spriting, they are grouped in the same file and when the browser requests the images only one HTTP request is sent to the web server. Then according to the request only the image that is needed is shown instead of the entire group. Although combining images can make the end file bigger than the total sum of the original files, the speed increase from the reduced amount of HTTP requests is much greater than the delay due to the size of the file.

Combining images using CSS sprites provides the following Advantages:

• Fewer HTTP requests to the web server
• Improved page load times
• Caching a single file

How to Combine images using CSS sprites:

Using CSS Sprites offer good speed boost for your website’s icon heavy pages. There is a great open source tool to help you optimize your website and combine your images using CSS sprites:

This bookmarklet is basically a JavaScript that will analize the page on which it is started and will find all spritable images. It will also group the images by attributes like pixel dimensions to get the best possible results in spriting.

Источник

Css how to use sprite with 2 images

Solution: My favourite sprites generator is https://spritegen.website-performance.org/ All you need is to drag and drop small images to the window, download spritesheet.png, stylesheet.css and then change background-image and background-position properties of this images in your style.css Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

How to combine images using CSS sprites

My favourite sprites generator is https://spritegen.website-performance.org/ All you need is to drag and drop small images to the window, download spritesheet.png, stylesheet.css and then change background-image and background-position properties of this images in your style.css

Using CSS Sprites: Does replicating one large image many times, You wouldn’t make 114 CSS sprites. A CSS sprite is exactly what you did, many images combined in one. Now all you have to do is set this one

Combine images using css sprites

In this tutorial will teach you how to Solve combine images using css sprites very easy way Duration: 12:57

How to set css for Sprite Images ?

In this video, I will take you through what is sprite image and what are benefits of using sprite Duration: 2:55

Implementing image sprites in CSS

Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of HTTP requests is reduced.

Note: When using HTTP/2, it may in fact be more bandwidth-friendly to use multiple small requests.

Implementation

Suppose an image is given to every item with class toolbtn :

.toolbtn  background: url(myfile.png); display: inline-block; height: 20px; width: 20px; > 

A background position can be added either as two x, y values after the url() in the background, or as background-position . For example:

#btn1  background-position: -20px 0px; > #btn2  background-position: -40px 0px; > 

This would move the element with the ID ‘btn1’ 20 pixels to the left and the element with the ID ‘btn2’ 40 pixels to the left (assuming they have the class toolbtn assigned and are affected by the image rule above).

Similarly, you can also make hover states with:

#btn:hover  background-position: px px; > 

HTML, CSS, Responsive: How to use a sprite containing images of, Create one sprite file, with background-position and width , height with pixels. You can use transform:scale() to fill your responsive content.

How to dynamically size multi-css sprite image

I have a few questions, that might lead to a solution:

1. Why are you using multiple images for something that can be easily achieved using a bit of css3 and a single image (the cross thingie)? A single image can more easily be resized, as a percentage of the container width, or even using css3 background-size property.
2. If you must use images for each thing, could you possibly consider never using sprites, ever? Its maintainability is pure annoyance, especially if someone has to take the project away from you later on.
3. Perhaps a combination of both?

If you choose the second option, I suggest using data uris. Here’s a short explaination: http://css-tricks.com/data-uris/ It saves one more http request than sprites, easier to maintain, and the difference in overall size is rather insignificant in my honest opinion, and support is great — IE8+ and all sane browsers our there. Setting up is easy enough, especially if you use the all-mighty sass interpreter, but there are some nifty utils out there (command-line, gui or even web-based) to transform your images into base64. It can even support IE7 with a little effort!

Edit 3.11.12

You can also add http://css3pie.com/ to the options to check out — it lets you do the css3 tricks we so love and adore with internet explorer. It’s a bit unpredictable to my taste, but for a small feat like this it can definitely do the trick.

Further, I commented on your browser-support needs below. IE7 is not what’s going to stop you;)

You can use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox

[class^="icon-"] < display: inline-block; background: url('../img/icons/icons.png') no-repeat; width: 64px; height: 51px; overflow: hidden; zoom:0.5; -moz-transform:scale(0.5); -moz-transform-origin: 0 0; >.icon-huge < zoom:1; -moz-transform:scale(1); -moz-transform-origin: 0 0; >.icon-big < zoom:0.60; -moz-transform:scale(0.60); -moz-transform-origin: 0 0; >.icon-small

One of the ways to achieve it will be to use inline CSS and to dynamically generate attribute values in JavaScript or PHP/What you use.

Assuming you know the width of the top container and the position of the css sprites

Calculate the left middle and right

You can also opt to generate the CSS code in a separate file

CSS image sprites, Choose a method and stick to it: either use images in your body (which will result in multiple images and therefore multiple requests) or use

HTML, CSS, Responsive: How to use a sprite containing images of different sizes?

I think you have few options to manage with your problem.

Create one sprite file, with background-position and width , height with pixels. You can use transform:scale() to fill your responsive content.

But I never use sprite for big images for responsive print. In my opinion it’s not good habit because you load big .png file instead of one on demand (like your few backgrounds).

How to use a CSS sprite for a Repeating background image?, You can use an image sprite to do what you want. They can only repeat along one axis, i.e. repeat-x, but in your case that’s all you need. Also

Источник