When building mobile application for Android or iOS we must provide images for several resolutions (mdpi, hdpi, xhdpi..2x, 3x..etc), beacuse mobile devices do have different resolutions...
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
Actually we do, its called retina ready design.
Here three things are to be understood.
1. Pixel density
Pixel density is the number of pixels a display can fit into a fixed distance. This is most of the time measured is PPI (Pixel Per Inch)
2. Resolution
Resolution is a simple count of the number of pixels across the entire width and height of a device.
Now, to further explain this concept, lets take an example of two tablets of same dimensions, say 7 inch tablets, both are physically identical in width and height.
Now at a glance these both tablets may seem quite identical, but first one (Tab-A) has a resolution of 320 x 480 while other one (Tab-B) has a resolution of 640 x 960. So These directly affect the PPI.
What this means is that the Tab-B is cramming (displaying) more (double) no of pixels in the same physical dimensions, effectively increasing the PPI.
So if we choose an icon of say 150 x 150px and display it on both the devices, the same icon on Tab-B shall(should) be half the size of the same icon displayed on Tab-A. With this, the user of the Tab-B shall have double the content of what the user of Tab-A has.
This may sound good, but we must remember that the user of Tab-B has everything half the size of what the logo was originally intended to be, so now he has to exert his eyes more, in order to figure out what that logo is about. But thats not the case.
Here enters the Third concept.
3. Viewport
In my own view/understanding (for lack of official def), A viewport is the virtual resolution that your browser renders, irrespective of the native device resolution. This is supposed to solve the problem of "too high resolution making objects too small".
What this does is that, it renders the logo(and every other thing) on Tab-B the same physical size as Tab-A, effectively stretching the graphics.
Now if the graphics were vector then they would scale seamlessly, but if they are images, then they create a shabby/jagged edges making the images look bad.
This is where you need images 2x the resolution.
So, Coming back to your problem, The difference between the viewport of a normal desktop and its native resolution isn't much.
A solution to do this has been proposed some time ago now, as it is a totally relevant use-case.
The answer to your question about "why we don't have to do this" would be, "we do have to do this", as pixel density differs on bigger screens too and especially for responsive pages, there is need to provide different pictures (not just different resolutions) that fit the content better (commonly referred to as art direction based selection).
This is why the <picture> - element (link to w3c HTML spec) exists and has added support for various attributes like media-queries, multiple sources and srcsets for different screen densities, as we use them on mobile pages.
Additionally, srcset and sizes - attributes exist for the <img>-tag as well.
This page (usecases.responsiveimages.org) describes the different use-cases for this.
The "right" approach will always depend on what you want to achieve, but at least offering different resolutions for varying pixel-ratios should be a standard in my opinion.
So these elements and attributes give you tools to select your image based on
and you should make use of these tools, no matter what device you're targeting.
Note that the browser support for the picture-element is getting better and better, but is not complete now (at the time of this writing, only Chrome and Opera have it fully implemented when it comes to Desktop - Browsers, Firefox has it implemented but still locked behind a flag, this should change with FF 38). There is a fairly well working polyfill though (https://github.com/scottjehl/picturefill)
tl;dr We really should do this, no matter what device and modern browsers give us very competent tools for doing so.
You should not post the question with a (false) answer included:
We don't have to, but we should create and use images with higher resolutions for all devices that may have pixel ratio>1 because it is not rare that those devices display images using much more pixels than it supposed to. Even if the pixel ratio is 1, all browsers have a zoom feature, which also requires high(er) resolution images.
This means that simple image that we define as:
<img src="myimage.jpg" style="width: 200px; height: 100px;" />
may be displayed at 400x200 px or more. Check some common device pixel ratios.
Therefor all the images used should be at least 2x width, 2x display height (which means 4x larger). If possible, for vector images we should use SVG or icon fonts.
We can also target devices by pixel density using CSS media-queries (short article here. Personally, I do not care that much, serving few Kb or Mb more is nothing to current internet speeds (and will mean nothing in years to come).
