I'm trying to find a way to resize an image for retina display, without it being a background image or using different images.
My plan is to use 800x600 px images, and for normal displays simply down sample this to 400x300, but for retina keep it at 800x600 but at double the pixel density, i.e it gives the appearance of showing 400x300 but it has twice the pixel density.
Is there a way to do this in CSS?
The closest I can get is something like this to find the retina ratio:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {}
But then how to make the images display at twice the pixel density, effectively making it half the size on the retina?
Maybe you will make some use of this Retina.js by imulus - seems to have wide variety of tools useful for dealing with retina-only media queries.
Here's the link: http://imulus.github.io/retinajs/
Still, it's not a way of dealing in CSS, you'd have to give the JavaScript a little bit of love here.
Related
This question relates to web development.
I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:
Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?
Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).
Answering my own question. The short answer is YES browsers will show different amounts of detail based on screen resolution.
CSS pixels ARE NOT screen pixels. If an image is 600x600 pixels and you decide to display it in a CSS-defined area of 300x300 (img:{width:300px;height:300px}), it could display as 300x300 screen pixels or it could display as 600x600 screen pixels. Which of the two it is will depend on the end user's OS screen resolution.
Example:
I created a 4x1 pixel png image:
I added this image to an html page and sized it with a img:{width:2px; height:1px;}. For good measure, I also added a blue div with div:{width:2px; height:1px;} bellow it.
I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.
This is how it displayed:
Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution (technically it's probably more of a stretch than a duplication, but you get the idea).
I'm not entirely sure about this but I'm assuming at this stage that all browsers act in a similar fashion.
I know that imageset is the CSS equivalent to HTML's srcset attribute. However the current spec only supports the x pixel density units, not the w and h sizing units.
For example:
<img srcset="high.jpg 2000w, medium.jpg 1200w, low.jpg 800w">
If I resize my browser window to 400px wide Chrome first loads low.jpg. As I make the window wider it loads first medium.jpg then high.jpg. The point at which is switches is dependent on my display's pixel density so my retina Macbook loads the higher resolution images at half window size compared to my old Windows laptop.
How can I reproduce this behaviour for a CSS background image? I started doing it by specifying a bunch of min-width and max-resolution media queries but it quickly became a tangled mess. There must be a better way. I'm willing to use a JS polyfill if available.
There is unfortunately no easy way (yet?) to match srcset-w features in CSS.
You should read this great article on the topic: https://css-tricks.com/responsive-images-css/
CSS media query: pixel ratio
Or Picturefill
Is there a way to fix the Retina Blurry icons on cellphones without using the 2x sizing images hack?
I'm a Front-End developer and the Designer is not avaibable to giving me the icons of the Website at the double of its size.
So, I was wondering if there is any way to keep the original icons size and make it looks correctly on cellphones with Retina display.
Small pixel images are automatically enlarged by the browsers and the quality of the anti aliasing is depending on the rendering engine of the browser.
If you don't want to use the media queries #2 trick you could use svg icons instead as vector graphics are cristal sharp on every screen resolution and ppi.
Edit: As mentioned in the comment below you can disable antialias in browsers as described here: Disable antialising when scaling images
But that will not create eg a sharp round circle out of a 16 pixel graphic as the pixels will still be squared pixels (just enlarged)...
I want all images for a mobile site to be 640px wide, based on iPhone screen size.
All images should be the full width of the screen when shown img { width: 100%; height: auto; }.
For the images that are smaller than 640px wide, is it better to use the above CSS to scale them up, or should I use Photoshop or something to scale the actual image up? Does it even make a difference?
So does scaling up an image using CSS result in a better or worse image quality than using something like Photoshop to increase the size?
Scaling images up doesn't go well for the quality of said images, you need to sort out your priorities on this one. You can work on those images and increase the quality and size of those images in Photoshop so you don't lose any quality when resizing, but this will increase page loads or you could lose some quality, but improve page loads with smaller but more crappy images.
If you really want to target each device (computer vs mobile) perfectly you can use javascript to switch out the images. This can be done really easily using http://foundation.zurb.com/docs/components/interchange.html or similar libraries.
If the images are graphics or icons I might suggest just making them svgs and using those instead as they are crisp at a greater range of resolutions. If you go with this option its best to make their sizes multiples of two.
I'm building a page which is supposed to be full retina ready. I'm creating a retina version of all the small-medium images.
It looks good when you look at the 100x100 pixel version of a 50x50 image on devices with high density screens. But what if the image is much larger? Like a background image of a slider with 1700x600 pixel dimensions, should this get a retina version as well? The image's size is already much bigger than almost every mobile device's resolution. Would a 1700x600 or a 3400x1200 image look different on a 640x960 display?
Don't forget about retina enabled laptops, and iPads... In my experience most images you can save at a scale of about 150% the expected viewing size, and they still look great on a high density screen. You should play with compression quality as well, a lot of times you can lower the quality and still have an image that looks great because of the shear amount of extra pixels.
See this for an example of what I'm talking about: http://filamentgroup.com/lab/rwd_img_compression/