I want image in HTML page. I am wondering what way gives best optimization performance stand point. I have two option to load image.
Load image directly using image tag inside div of html.
Get image to div background using css background.
They would be about the same, at least if there was a difference, it would be so small you would never notice it.
Speed of load would mostly depend on the size of the image whether its set to the background in the css or placed directly in the mark-up. I think this is answering your question but it's quite vague...
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 was looking around to find some best practice and hints when building css image sprite.
The questions:
Consider a site with lots of images:
Should I group and put images with approximately same size in one png?
What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
Is there any recommendation for number of images in one sprite image ?!
Is it make any difference on how to put and align images in the sprite image? I just find a hint at http://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340 which mentioned (keep images Organized, it will be more maintainable) but is it the only reason
If it helps:
I use compass sprites utility, and it automatically convert a folder of images to one png file and creates a css file for it. The images aligned under each other automatically
Should I group and put images with approximately same size in one png?
While Michael has a good point on grouping images by usage, you may also want to keep in mind that the optimal sprites have as little whitespace as possible. Saving file requests is awesome, but you do not want to load a bunch of unused pixels instead.
What is the acceptable sprite image size? Is it recommended to make different sprite images, instead of one huge file?!
Imagine a website with a huuuuge collection of icons, buttons and other graphical elements. Now image you put all those elements in one sprite, because, you know, low amount of requests and all. The sprite is 5MB big.
A visitor enters the page, and loading begins. Text appears, but you are still waiting for Megasprite to download. Depending on the filesize and the internet connection, a visitor has to wait a potentially long time before crucial (navigational) elements of the site are usable.
For a simple site a single sprite will do, but when things get more elaborate, it might be beneficial to use a couple of sprites. Furthermore, putting all your images in one sprite is a pain in the gluteus maximus when it comes to maintenance (although automation helps a lot). All in all, huge sprites are bad sprites.
Is it make any difference on how to put and align images in the sprite image?
Not really. There are a few thing you should keep in mind though. First of all, you want the sprite to be as compact as possible; the less unused space the better. However, that may force you to do ridiculous meticulous positioning in CSS. If you're willing to set background-position for each element by hand that's no problem, but nobody will blame you for cheating a little bit and using positions that are easier to work with.
One more thing
Have you considered using SVG sprites? Small in file size, perfectly smooth and crisp at every resolution. CSS Tricks has excellent articles on it here and here
To question 1:
From my experience in working on a large mobile service provider website, it is certainly a good idea to group images together, but probably better grouped logically, by what component or section of the project they belong to, rather than size. So I would group sprites that make a border (sides, rounded corners, etc.) or background images together.
It will make bits of them easier to find and to maintain during development.
On the other hand, if you're making a game and you have all your images created already (e.g. 64 images of animated character) You might as well stick them all in the one file.
Hope this helps.
Michael
What are CSS Sprites?
CSS Sprites is a method of combining multiple images used throughout your website into one big image. You can then use the proper background-position CSS attribute to load the particular image you want from your CSS Sprite using the X and Y coordinates.
CSS Sprites and Website Performance
A lot of people are under the assumption that it would be faster to reduce image file sizes and load every image individually. This is not true, in fact, it’s quite the opposite. The reason for this is because every time you make an HTTP request (whether it’s in your HTML code or your CSS code) you essentially create one more connection that has to occur in order to fully load a given page. So, for instance, if you have a page with 16 background images (as referenced in your website’s CSS file) that means that in order for that page to load it has to make 16 individual HTTP requests for each of those images. That’s not to mention any additional HTTP requests that will have to be made for stylesheets, JavaScripts, etc..
By combining all 16 of those background images into one big CSS Sprite the website only has to make one HTTP connection instead of 16 individual connections. This also means that anytime an image needs to be loaded on the fly (i.e. a rollover image) that image will already be loaded without any delay thanks to the fact that it’s already been loaded as part of your single CSS Sprite file.
So, not only are you drastically increasing performance by reducing the amount of connections but you can also take advantage of your CSS Sprites by using CSS image preloading.
How to Make a CSS Sprite
When it comes to creating CSS Sprites you’ve got two options. If you’re proficient enough with a photo editing program such as Adobe Fireworks or Adobe Photoshop then you’ll have no problem creating a CSS Sprite. For people who aren’t as savvy with those sorts of programs we recommend using SpriteMe. SpriteMe is a bookmarklet. After you’ve added it to your bookmarks bar, you simply go to any website and click the SpriteMe bookmarklet. SpriteMe will then open up an overlay over the right side of your screen with everything you need. You’ll also find that there is a demo on the SpriteMe site which will greatly assist anyone who isn’t as knowledgable.
Here’s an example of what a CSS Sprite would look like (this was created in Adobe Fireworks):
CSS Sprite Example
The above is an example of what a CSS Sprite might look like. Keep in mind there are a lot of different ways to do this. Some people like to leave 1 pixel of space in between each image just to provide some space. Other people like to leave a substantial amount of space between images. You’ll also find some people who like to stack things next to each other in rows to maximize the use of space. The bottom line is that there really isn’t a wrong way of doing this. So, with that being said consider the above example just that, an example.
Implementing the CSS Code
Now that you’ve finished making your CSS Sprite it’s time to get down to the nitty gritty and put CSS code in place so that we can actually make use of our CSS Sprite. For our example we’ll use the CSS Sprite above and show you how we made it work with the ‘Submit Comment’ button on our Comment Form at the bottom of this post.
#commentform input[type=submit] {
width: 122px;
height: 26px;
border: 0px;
background-color: #FFFFFF;
background-color: #FFFFFF;
background: url(/images/btn-sprite.png) no-repeat 0px 201px;
}
#commentform input[type=submit]:hover {
cursor: pointer;
background-position: 0px 175px;
}
Basically the trick here in using the CSS Sprites in your code is that you’re referencing the X and Y axis from the CSS Sprite. In this case the CSS code uses the background attribute, references the image URL, and finally addresses the X and Y axis which happen to be 0px for both.
The hover version of the button doesn’t have to reference the background image URL since it’s already been referenced above. Instead you simply need to change the Y axis to 175px to reflect the fact that the hover state of the button is above the non-hover state of the button.
I realize this might initially come off as confusing but I promise you once you play around with it you’ll see it’s actually very simple. If all of the CSS Sprite images are aligned to the left then your Y axis always remains at 0 pixels. This is one reason we prefer to stack our images all aligned to the left since it takes a lot of the guess work out of it. Given that your Y axis would always be the same in this case the only thing that would change is your X-axis. So, if the non hover button is at 0 pixels on the Y-axis and 201 pixels on the X-axis then the hover button above it would be at 0 pixels on the Y-axis and 175 pixels on the X-axis.
I came to know that, if we dont give width and height attr. in image tag there will be a performance isssue.
I have a div element for which i'm setting width and height in percentages. Also the same div is having a background image of fixed size say 140px * 140px.
Here, will there be a perfromance issuse?.
markup example:
<div style="width:50%;background:url('imgofsize140*140') no-repeat"> </div>
Thanks
This isn't a one-size-fit-all case - Therefore we have to look at it case by case.
There are a lot of variables that we must keep in mind - User's internet connection speed, image size, computer capabilities, etc.
I found a few questions on SO that are somewhat relevant to this question. I will include them as I see it beneficial. I am NOT claiming to be absolutely correct.
BGIMG vs IMG
Performance Argument
AFAIK, browsers cache images the same whether they're in a DIV or an
IMG. In any case, I think this one of those cases where specific
performance is defined as an implementation detail internal to each
rendering engine (and possibly the browsers built around them). As
such, it's both out of our control as designers/developers and subject
to change from browser to browser and version to version. In other
words, I wouldn't spend too much time worrying about it.
Context
Technical differences yes, most notably you can set the width/height
of an IMG tag and it will stretch the image, which can be useful in
some situations.
The main thing you've got to keep in mind though is the context of the
image within the HTML document. If the image is content, say an image
in a gallery, I'd use a IMG tag. If it is just part of the interface I
might use a div instead.
- By Paul
And the response to that is just as important.
That said, you bring up an excellent point about the semantic
difference: an IMG is usually the better choice when the image is a
material part of the page's content, while a CSS technique is usually
preferred when the image is just decorative or for formatting.
This is not performance related directly - More about semantics and accessibility. By - Mr. W.
Then one more for Performance OFF of SO which I feel is directly related to your question.
Page Load Test
The version with background images actually gave me a “Document
Complete” after .0225 seconds – while the fully loaded page load time
was roughly the same as the inline image version. Could using all
background images speed up firing of $.document(ready)? It turns out
background-images are only downloaded after the element (containing
div, span etc) is available. This prevents blocking from all the round
trips required to get images.
results: inline image test page
results: background image test page
I wouldn't think there would be a performance issue in the same way as not specifying height and width on a img tag, since that forces the browser to repaint the whole page and that's where the performance issue is.
http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
tl;dr
You will not get a performance penalty (which is really small in the other case as well).
Some more details:
You shouldn't care (unless you work for Google) about the performance "penalty" you'd get from not specifing a width & height, but more about the layout flickering you might get.
Not specifing a width and height will make the browser display an initial box, as it doesn't know beforehand how much space the image will take, and after the image is loaded it will do a reflow - which means it will have to recalculate the layout of some elements which will be affected by the size change. But, this is actually going to happen very fast (and you're probably triggering reflows in lots of other places).
There is no reflow necessary for the background image.
I don't think this will effect perfomance.
If you combine your background images into one image and position it as and when you need to that will help speed up performance as you're only loading the one image rather than multiple images.
The background image will be displayed as 140x140 unless the div width has smaller size than 140px.
You might also want to check the result in older browsers such as InternetExplorer 6-7-8 just to ensure if there is any other performance issue.
Depends on the browser. I learned today that Chrome currently redraws the canvas as you scroll with an absolute position bg image. Firefox handles it just fine. This should be fixed in a future Chrome release.
On the contrary, specifying the img height and will cause the performance issue.
Because by specifying them, you tell the browser to resize the img first, then render the image. For example, storing thumbnail image is much better than resize the image on the fly.
If your image is already the specified size you want their is no need to specify the Height and Width in the attributes. Also, there will be no performance issue in using the background image.
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 was wondering what is the better/faster way to resize an image.
Normally I would resize an image with CSS, but a college told me that by using the width attribute, e.g.
<img width="size" [..]>
the browser would render the page faster.
Anyone know if this is true?
It would be even faster if you resized the actual image, and not the dimensions you want the browser to render it to.
You should set width and height properties of each img tag. It speeds up rendering page because browser doesn't wait for css files and images loaded.
width and height are semantic in the case of imges and objects. They provide metadata for images so it is completely fine IMO to rely on those attributes in order to tell the user agent that it should presize the element to X dimensions prior to the image fully rendering.
If we stick with presentation vs. structure, I'd put your image sizes in CSS. Speed really doesn't matter these days, the browser has to wait for the images to be loaded anyway, so the speed it takes to compose and render the page isn't really measureable, well unless your CSS fails to load...
Bit difficult to give definitive answers for very general questions like this, but I think it’s generally better not to resize images in HTML or CSS — make the image file the right dimensions.
Ignoring that, I don’t think there’s likely to be any perceptible difference between the two.
I have a div (.header) contained within other divs. When my page loads, momentarily just that one .header div "flashes" white as the page is loading, especially in in Firefox, but a little bit in IE8 too. I can't find what kind of CSS or lack thereof is causing this - there's no images or background color associated with that div. There is a logo.png within the .header. Thoughts?
http://dev.bwmsnow.co.nz/
From what I can see (Firefox on XP) it doesn't so much flash as it looks like it is slow to load the header-container div, and the associated background images. If I load without cache the whole of the logo bar loads last (and is white before load), but not just the one div. YSlow counts some 50 HTTP requests which might explain some of it. It doesn't look like the page is large so much as made up of a lot of pieces that probably create some processing lag.
If I understand the question, my suggestion is an old trick of adding a background color similar to the background image to <div class="header"> so that as the page loads (but before the image loads) the user sees a color similar to the background image. That way the visual impact of the image loading is not as noticeable.
I Photoshop eye dropped your background image and suggest using #a1dff8 as the color. The CSS for should be:
.header{
background:#a1dff8 url('images/yourheader.png');
}
Also, when looking at your code, I see that you have several external JS files. You should consider a minifier. Just Google or StackOverflow for JS/CSS minification.