My idea, assuming you start with a 200x200 sprite (meaning the double resolution image is 400x400) is this:
.sprite {
background-image:url('1x.png');
background-repeat: no-repeat;
background-size: 200px 200px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.sprite {
background-image:url('2x.png');
}
}
Live example: http://ov3rkill.com/temp/a5dii52/
I've struggled for a while trying to determine the best way to deliver higher resolutions images (previously I kept all images separate and sized them individually) and this frankly seems too simple.
Can anyone see any potential drawbacks? I'm toying with this for production use and so far it appears to work.
Since the media query for retina is being called at load it should override the original call to load the small image.
I've never witnessed the low-res image flashing in when using this method on retina displays.
Has anyone used JS to confirm that the smaller image loads on a retina display? I curious to know.
Related
Say I have body{background: url(image1.jpg)} by default and I also have a media query for mobile (active when viewport width is less than 600px) which sets some image2.jpg image to the same body element.
On mobile, will image1.jpg still be loaded then replaced by the media query by image2.jpg?
No, only the mobile image is loaded. It's actually very simple to demonstrate this. Resize the snippet window to below 768px before running it, wait for the background to load, then resize it to fullscreen, you can see the desktop background is loaded anew:
body{
height: 100vh;
background-image: url('https://static.pexels.com/photos/96918/pexels-photo-96918.jpeg');
background-size: cover;
}
#media screen and (max-width: 748px){
body{
background-image: url('https://static.pexels.com/photos/27714/pexels-photo-27714.jpg');
}
}
<div class="demo"></div>
Since user #Johannes doesn't agree, I will give a more solid proof.
This is before I expand the window:
And this is after: (the background is now white because the image has not finished loading)
Only image2.png is loaded(gets into viewport). That is the reason for media query. Just the same way your div is rearranged or restyled with media query so are urls. The changes would only occur when it reaches the stated viewport.
EDIT: I was misunderstood when i used "loaded". What i meant was. both files are loaded but the one with the specified query is displayed.
Yes, both images are loaded, which means bandwidth is wasted. The reason: Both rules apply to the small screen, the second one overwrites the first one, but only AFTER the image from the first rule has already been loaded.
The reason for the term CSS = Cascading Style Sheet is that one rule after the other is followed. If a later rule overwrites an earlier one, that's normal, but still the earlier one is "obeyed" at first. CSS doesn't wait until all rules are read and then calculates a result, it reads one after the other. So everything that's not in media queries is always read, and if that contains a background-image, it is loaded (also if it's not displayed due to subsequent rules).
To avoid this, you can use a mobile-first approoach: First (without media queries) writing the rule for the small screen and then - in a media query only for screens above 600px) loading the big image. In this case the big image will be ignored (and not loaded) by small devices.
Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?
One real-world example usage is when performing printing of web document:
#media print and (min-resolution: 300dpi) { ... }
The above media query will display given styles when printing DPI is set at minimum of 300dpi.
If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.
Imagine you’re displaying images, via CSS, in a same-sized element:
.my-image {
background-image: url(path/to/image.jpg);
/* Exact dimensions of image */
height: 200px;
width: 200px;
}
This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.
#media (min-resolution: 72dpi) {
.my-image {
background-image: url(path/to/image-large.jpg);
}
}
Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.
The picture pretty much explains the problem.
On mobile phones, my clean/crisp repeating background (position center bottom, repeat-x) looks like crap. It doesn't actually appear that large on the phone - it looks visually the same size as on a computer, but - I assume since the phone is a higher resolution, it's making it look pixelated and choppy.
I can't believe I've never come across this issue before, but searches for the subject just turn up "how to make repeating backgrounds on mobile" or "how to do full-screen backgrounds on mobile"...etc.
How can I make a background image that will look clean/crisp/good on both mobile and computer?
I tried making the image 200dpi instead of 72dpi, but - no luck.
Whilst the optimal solution is SVG, the easiest way to do this is using pixel-density media queries.
e.g.
.container {
background-image: url('images/bg.jpg');
}
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
.container {
background-image: url('images/bg-2x.jpg');
}
}
If you are using preprocessors this becomes even easier as you can create mixins for different breakpoints including pixel densities.
On this site: http://goo.gl/VNct8O I made a widget for available payment methods. All the logos in it are expected to be retina ready.
I used coolrunnings to develop the sprites using spriteme service.
However, when I zoom to 200% in chrome all logos looks stretched. Positions are correct, just the images are stretched. How can understand what's wrong...
I dont have a ton of experience with Retina but this might help, i think you need to use a media query for it
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
Here is a good article about it http://css-tricks.com/snippets/css/retina-display-media-query/
Changing the background-size to 64px 584px; on your ul.accepted-payment-methods li.american-express span class resolves the stretching. From there, just adjust each payment type's background-position and you should be good to go.
I am working on a page for my mybb forum and I added some images and I want them to scale with the screen resolution so if I have a 17" it looks the same as someone with a 19" screen. Because right now the images just look all messed up. Here is the page that I am working on. http://crescentgaming.com/forums/test.php
In your CSS, use percents.
HTML
<img src="/folder/whatever.jpg">
CSS
img{
width: 45%;
}
Of course, you could switch it to whatever percent you want. There is a more complicated way with JavaScript, but this usually works (for me).
try the % instead of the px unit
or use #media and specify dimensions for any resolution
#media
CSS #media for standard devices
I hope that will help
PS: under the #media you can specify changes only for certain elements, ID or classes so you don't have to redesign the hole page (as far as I know) so don't be shy to give it a try :)