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.
Related
We are using the background-image style for one component in our application. we need to make it responsive with different resolution images. I have seen that we can make use of image-set to achieve it and implemented it as below and working as expected.
Please see the below code snippet I have implemented.
<div style="width: 50%;height: 50%;background-repeat: no-repeat; background-image: -webkit-image-set(
url(smallCat.jpg) 1x,
url(BigCat.jpg) 2x)">
</div>
Now, I would like to give a specific resolution of the screen in place of 1x,2x.
Since it is possible in srcset with sizes, do we have any way to set sizes for image-set?
Please let me know your thoughts.
Thanks.
Nah, there is no syntax for this. But:
Another difference, is that unlike with the srcset attribute, where you can also give image options based on the width of the browser (when art direction is required), you cannot do that with the image-set. However, art direction can still be achieved in CSS using media queries!
Source: Creating responsive images with image-set
So, if you want to rule all the images using CSS only, use media queries.
Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.
So far so good. But these images still download on these devices, causing an increase in bandwidth.
What is the proper way to make these images not download on the specified devices?
Any response would be much appreciated!
Two options I can think of:
Detect small devices on the server using browser-sniffing, and send them different HTML that doesn’t reference the images.
Display the images via CSS instead of HTML (in style attributes if you like), using either background-image or :before/:after and content (not supported by IE 6 or 7), and wrap that CSS code in media queries so that it’s only displayed by devices with larger screens.
The only accessible solution right now is to wrap the image with <noscript> tags, then pull the image out later with javascript. Cookies don't work on first page load (HTMLPreloadScanner), nor with CDNs. Browser-sniffing is useless if your images aren't always 100% of the viewport.
Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.
The markup is pretty simple as well:
<noscript data-slimmage>
<img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>
Of course, you can make a server-side helper to even abstract this away.
If you don't mind a javascript dependency you could check window.innerWidth and insert image tags for sufficiently large screens.
Images would only be requested if javascript is enabled and the window big enough.
If you don't have any issues using additional JavaScript, then you may try THIS. I've stumbled upon it while searching and learning about media queries.
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/
I'm working on a site that uses images diagonally aligned. The images are fairly simple and have some text inside so I can achieve the effect using either images or the CSS3 transform: rotate and border-radius properties, granted, with all the proprietary extensions.
However I'm wondering if there are significant advantages for using one over the other. I'm thinking maybe the CSS-only alternative would load faster, but a downside would be the use of more code for each image. Although using images I'd still have to do a lot of positioning for each element. Also, the CSS in the first case would not validate using browser-specific extensions, how important is this if I still make sure the site is correctly displayed in most browsers?
Is there a general approach for using either one of these options? What would you recommend?
The use of CSS3, versus images, is best answered by your need to support Internet Explorer (or other older, or CSS3-unaware, browsers): if a large portion of your user-base browses with IE then you should use images.
If you're only interested in the later, more standards-compliant, browsers (possibly including IE9, but I've no experience with it as yet) then CSS 3 is likely the better option, since it might involve a larger CSS file, but it does allow you to switch your layout more easily in future, without having to create/recreate a new set of images for the new design.
You could, of course, combine both approaches: use CSS 3 for the compliant browsers, but include an IE-specific stylesheet, with conditional comments, to supply the images as, perhaps, background-images to build up the design. This is, of course, likely to be a lot of work, though.
I would honestly recommend an image for this. CSS3 is cool, but browsers that don't support it might break your layout. Also (possibly more importantly), text really needs proper anti-aliasing to be readable when rotated or scaled, and you can get finer control over that with an image.
Two things I think you should consider here:
Images are a killer for those on mobile devices. So if you are targeting those with mobile or expect a large mobile audience, you may want to reconsider using a lot of images (and having your users pay a ton in bandwidth).
The text in your images (if you use images) will not be searchable by search engines and will not be accessible for those with accessibility issues, unless you are good at filling in your alt tags. ;-)
Shouldn't we use "Pixel" for anything in CSS if we are making a site for mobile devices?
px for layout and font. Should we only use em or % for everything on mobile sites?
and if i'm using <img> then should i defined height and width for <img> in HTML code? or it's good to not to define. or i should define size in css for <img> also in % or em
Edit:
Note: Question is not again about px vs em debate My question is specifically for separate mobile site. when we are making separate mobile site with different domain or sub-domain.
Everything depends on the context. Like with CSS for desktop browsers, there are situations where using pixels is not a good idea (for example mostly for font sizes), and there are situations where pixels are still very useful (for example fixed layout).
In general, avoid using pixels every-time you don't need to. For example, there is no reason to do it for fonts: it's not you, but the user who chooses if the font must be big on a high-res screen or not. Using percentages also helps you somehow to remember that a piece of text can never have an exact width and height, and force you to adapt your design.
Now, sometimes, for cost or other reasons, you have to do fixed layouts, or at least some parts of a page, associating images and text, have to be fixed in size. In this case, there is nothing wrong to use pixels. If I have a <div/> with some text inside and a pretty 200×100px background, the most obvious thing is to set the width and the height of this <div/> to 200 and 100 pixels.
if i'm using <img> then should i defined height and width for <img> in HTML code?
IMHO, you never should do that. The size of an image is purely a layout/design thing, so it has nothing to do with HTML, but with CSS.
Do you have to specify the size of an image in CSS? If you want your image to be displayed 100%, than no, you don't have to: this is by default in every browser. If you want to scale it down and, for some reasons, you can't scale the image itself than save the scaled image on server, than yes, you may want to specify the size of the image.
Remember than sending a big image and scale is down on client side is always a bad idea. The visual quality might be affected, and the client will have to wait more to see the image appear.
Actually, I recommend using different CSS files (and sometimes different templates) for browsers vs. mobile. Mobile isn't just a smaller browser, it is a fundamentally different user experience.
As for the pixel issue, I tend to use pixels in my base CSS rules and then use % or em's everywhere else so that things scale up and down together. It doesn't always work the way I would like, but it normally allows a lot of tweaking during development.