Ok I want to know what is the best practice for performance regarding CSS background images and http requests.
1. Use many different 1px png background images resulting in several individual http requests
OR
2. Use one large image sprite with big gradient block chunks for use as background image. This will increase file size but save on http requests.
Love to hear you opinions...
I think it would be better to use data:uri technique for small images (like 1px-backgrounds).
background: url(data:image/png;base64,....) top left repeat-x;
It works for all modern browsers. For old IE browsers (like IE6, IE7) you can overwrite styles by conditional comments.
background: url("path/to/background.png") top left repeat-x;
Of course this way you have to re-encode background, if it has changed. But it saves a lot of requests.
If you're talking about using these images for gradients, I'd suggest using CSS gradients, then you won't need any images at all.
Of course, the obvious problem with CSS gradients is that it isn't supported by older versions of IE. The good news is that there is a fix for IE called CSS3Pie that allows it to support the standard CSS gradients feature (along with several other useful CSS features.
No more images required; just one HTC file (which only gets downloaded by IE).
saving http requests is always the better solution. But nevertheless you should watch the file size, so that it does not get to big. Then you should consider making two images or more.
Look at the following tool which allows the easy creation of sprite images from unsprited images:
http://spriteme.org/
Related
I have this website. Which uses Stellar.js. Therefor I have lots off background images. They have to be large for big screen display. So they stay nice. How ever on mobile it's maybe a bit to much to download especially on 3G.
I was wondering if there isn't a better approach then using media query's with different image sources as background-image. Such as a plug in or something? Any ideas? Really don't want to scale all the 68 in different formats.
For a css/background-image Have you looked at the image-set property in css? It's the css equivalent to the html img elements srcset. The downside may be browser compatibility (however for mobile you should be covered http://caniuse.com/#feat=css-image-set) and whether the expanded syntax has been added to those browsers yet.
example usage:
background-image: -webkit-image-set(url('my-img-1x.jpg') 1x, url('my-img-2x.jpg') 2x);
However, If you can use actual img elements in your HTML srcset itself now has pretty good browser support and expanded syntax to allow changing images at different screen-size breakpoints http://caniuse.com/#search=srcset
srcset example usage:
<img src="my-img-1x.jpg" srcset="my-img-1x.jpg 1x, my-img-2x.jpg 2x, my-img-wide.jpg 1920w" />
Looking forward the <picture> element is also starting to gain browser support, however probably a bit far away from mainstream adoption to use now.
I've done CSS for many years, but I've always tried to stay away from transparent images or backgrounds due to the lack of support on older browsers. Right now I need to create rounded borders, and I know you can do this in CSS3, but just as well I can use a .png image. Neither is supported on ie6 - except there is a .png fix for ie6 which seems to work sometimes - so I'm wondering what the best approach is.
25% of my viewers use ie6 (most from middle eastern countries), so even though I wish I can pretend ie6 doesn't exist, I must.
I believe that most (if not all) .png fixes do not work for repeating or positioned backgrounds, so you will need to use a single image as the background. You would need to re-create these background images if the content of your site changed to have longer blocks of copy in these areas, as the static background images will not scale to your content.
Consider the fact that using a .png is not the best choice in terms of accessibility for visually impaired users.
For users which need to have an increased font size for reading text on screen, the text may end up running outside of the container with the .png background, and may in these cases become unreadable.
The best bet may be to use css3 to style the container, and have it fall back to square corners for IE users.
If the only thing you need is rounded corners, use CSS3 border-radius and drop in PIE.htc for IE6 support. It's probably the easiest and simplest way to go about it.
I'm looking to use CSS gradients for an element of my web app that is drawn repetitively, as it would allow me more flexibility in dynamically changing its appearance. However, my question is whether gradients are more expensive for the browser to render than bitmap images. Or do images use more processing power? (And I'm not concerned with cross-browser compatibility- the app will only be used on the iPad)
According to an article on the Webkit Wiki, images perform better:
Sometimes it's tempting to use webkit's drawing features, like -webkit-gradient, when it's not actually necessary - maintaining images and dealing with Photoshop and drawing tools can be a hassle. However, using CSS for those tasks moves that hassle from the designer's computer to the target's CPU. Gradients, shadows, and other decorations in CSS should be used only when necessary (e.g. when the shape is dynamic based on the content) - otherwise, static images are always faster. On very low-end platforms, it's even advised to use static images for some of the text if possible.
Source: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages
Of course, you have to balance that CPU time with the extra time it would take to load the image from the server. Also, for Internet Explorer, filters are extremely slow, especially if you have many on one page.
This above answer is directly lifted from How does the performance of using background-gradients in CSS vs using images?
These links can be useful read for you
Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients
CSS gradients are faster than SVG backgrounds
http://leaverou.me/2011/08/css-gradients-are-much-faster-than-svg/
Runtime Performance with CSS3 vs Images
http://jacwright.com/476/runtime-performance-with-css3-vs-images/
To set a semi-transparent background I use:
background-color: rgba(0, 120, 180, 0.8);
For IE, which doesn't support rgba I use a 1x1 png with the same color:
background-image: url(http://i53.tinypic.com/2mgtu9e.png);
(demo here)
Question 1
I know that there is another method for IE which uses filters.
Is this method considered as W3C compliant ?
Question 2
Say I combine 20 1x1 png images into a single sprite.
How could I use this sprite to set an element's background color according to the 7th pixel in the sprite ?
As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.
Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.
For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.
Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.
Answer #1
This method is not W3C compliant. The way that Internet Explorer uses Filters is not the regular one. Filters are not supported at all from the W3C specification. The filters are Internet Explorer plugins.
Answer #2
There is no way to use them. In sprites you can only use images that are not repeated in the background.
In example: Say that you have the following sprite
x y z
r t s
u v a
if you have now an area that you like to use as a background the image t from your sprite. You can set the very top left side of the div to display the t image, but then when you need to reapeat the background you will start again from x. That means that you will have repeated all the images from the sprite.
Question 1: CSS3please. The box-gradient shows how to use the MS-filter.
To check if valid: W3C CSS validator . I'm getting errors, so I guess it's not considered valid CSS
I want to put images of the 1024x768 as backgrounds and load quickly using css. I could use
background(url....)
in the CSS, but will that solve the issue, of downloading images quickl?
Thanks
Jean
If you have to use this technique, then remember to compress and cache the image, this will speed it up somewhat, but try and be creative with alternative solutions.
For example can the background repeat on the x-axis? If it can you'll be able to create a 1px wide version that you can repeat across the page.
Try searching for this. It helps cutting off a few KB of data. PNG Gauntlet is also a free software for PNG compression that also cuts Gama correction that causes problems with IE6 and IE7.
Body background images are usually saved with lower quality, thus reducing size.
If your backgrounds are changeable, preload them. It is done by putting divs of zero height at the beginning of the page, and assigning background-image style to each. The images are loaded at the beginning, so when the background of the body gets changed the user doesn't notice the lag.
Google started to count the load time already, so classic preloading causes problems with SEO. Loading with JS, after the page fully loads is an option, or even assigning styles with JS after certain actions are made is also a solution.
remember you can't change the user dsl speed. so css background would be good. Maybe start with take a higher JPEG compression to minimize the file
(btw. i hate (full size) background images at websites with my dsl light)