If I specify srcset only in W units, does the browser consider high pixel density displays full resolution or its scaled down resolution?
For example for this code...
<img srcset=“image-xl.jpg 2560w,
image-l.jpg 1200w,
image-m.jpg 900w”
src=”image_o.jpg” />
...a 2x pixel density display with a real resolution of width 2560 is more likely to trigger the 2560w image load or on the contrary it will trigger the 1200w image load, due to it appearing to the browser as a 1280px width display ?
From my tests, it's the former i.e., taking the density into consideration.
2560w in this example.
Related
Why we have breakpoints for 400px or 600px, for example?
These breakpoints are verifying the resolution of the device, but now smartphones have resolutions such as Full HD (1920 x 1080 ) or 2k (2560 × 1440). That's why I'm confused. Why do I have to use breakpoints for smartphones with 400px - 600px if now most of them have 1080px - 1440px?
I have a 1080 x 2340 pixel device, but my webpage looks like it's 500px wide
The pixels we define in breakpoints refer to the viewport size of the device, while the pixels defined in a device's screen resolution refer to the number of physical pixels that device has. Viewport size exist to compensate the difference in screen sizes of different devices.
This unit of measurement is sometimes referred to as “device independent pixels” or “CSS pixels”.
For instance, a laptop and a smartphone, both with a screen resolution of 1920x1080. If the screen of the two devices are treated the same way because their screen resolution is the same, the same content (let's say a 1200x1200 image) displayed on both device would look fairly large on the laptop but would look very small on the smartphone because even though they have the same screen resolution, their screen sizes are very different. But with viewport size, the same content can be scaled depending on the device's screen size.
You can read more about this topic in Difference Between Viewport, Screen Resolution, DPR, and PPI for Responsive Web Development.
Hope this information answers your question.
How does image resize[Adding and Reducing size of image] works and what happens to the pixels and RGB ?
explain briefly
An RGB image has three channels: red, green, and blue. RGB channels roughly follow the color receptors in the human eye, and are used in computer displays and image scanners.
If the RGB image is 24-bit (the industry standard as of 2005), each channel has 8 bits, for red, green, and blue—in other words, the image is composed of three images (one for each channel), where each image can store discrete pixels with conventional brightness intensities between 0 and 255. If the RGB image is 48-bit (very high color-depth), each channel is made of 16-bit images.
Image interpolation occurs when you resize or distort your image from one pixel grid to another. Image resizing is necessary when you need to increase or decrease the total number of pixels, whereas remapping can occur when you are correcting for lens distortion or rotating an image. Zooming refers to increase the quantity of pixels, so that when you zoom an image, you will see more detail.
So the number of pixels will be reduced which means it will have a less rgb pixels.
I am using ImageResizer to resize the images and display on the bootstrap layout.
Here I am fixing the image sizes while retrieving them to display the sizes in URL.
Issue is, image quality is lost as dimensions are different for different screen sizes and I am unable to adjust the image which is retrieved to fit exactly to the screen size.
Eg: for 14 inch monitor if size of image is 300*300 which gives perfect quality image, if the same image is viewed in 21 inch monitor the 300*300 image retrieved from imageresizer is loosing quality and getting blurred.
Can some one say what is best solution to retrieve images?
Thanks in advance.
Praveen.
Slimmage.js offers automatic resolution and dpi-switching using the ImageResizer URL API. It is probably the easiest way to achieve what you are looking for, as you just install it and set a CSS max-width on images. Done.
Why this is a problem (like Amy says in the first comment):
Because of high-density displays, browser pixels and screen pixels are not 1-1. Thus you need to use a images-swapping technique like srcset, picture, or Slimmage.js. srcset and picture require polyfills to work on older browsers.
Similar to calibrating a single camera 2D image with a chessboard, I wish to determine the width/height of the chessboard (or of a single square) in pixels.
I have a camera aimed vertically at the ground, ensured to be perfectly level with the surface below. I am using the camera to determine the translation between consequtive frames (successfully achieved using fourier phase correlation), at the moment my result returns the translation in pixels, however I would like to use techniques similar to calibration, where I move the camera over the chessboard which is flat on the ground, to automatically determine the size of the chessboard in pixels, relative to my image height and width.
Knowing the size of the chessboard in millimetres, I can then convert a pixel unit to a real-world-unit in millimetres, ie, 1 pixel will represent a distance proportional to the height of the camera above the ground. This will allow me to convert a translation in pixels to a translation in millimetres, recalibrating every time I change the height of the camera.
What would be the recommended way of achieving this? Surely it must be simpler than single camera 2D calibration.
OpenCV can give you the position of the chessboard's corners with cv::findChessboardCorners().
I'm not sure if the perspective distortion will affect your calculations, but if the chessboard is perfectly aligned beneath the camera, it should work.
This is just an idea so don't hit me.. but maybe using the natural contrast of the chessboard?
"At some point it will switch from bright to dark pixels and that should happen (can't remember number of columns on chessboard) times." should be a doable algorithm.
I'm learning about WPF. WPF uses device-independent pixels. But I can't really understand them. Why are they better than device-dependent pixels, if most other apps are device-dependent and WPF apps aren't? Would they stick out?
The advantage of device independent pixels is that when specifying a UI you can determine the size that UI components will appear on the user's device, regardless of the user's screen resolution. Unfortunately, it's not quite as simple as that, as it requires the user to have various settings set 'correctly', and it can be overridden by a user who wants to change the resolution of their device (e.g. a partially sighted user who wants to run at a low resolution to make text easier to read).
In addition to the other link posted, you can also check out this one:
Is WPF Really Resolution Independent?
Note that you can turn on snapping a control to device pixels with the SnapsToDevicePixels set to true to avoid the blurriness that occurs when a horizontal/vertical line is drawn on the boundary between two device pixels.
Before understanding device independent unit, it is required to understand what DPI is. DPI is dots per inch, that means there would be certain number (96 usually) of pixels in an inch . But what is important to understand is in Win32 environment this inch is not fixed in size as a physical inch. So when the number of dots increases / decreases by changing the resolution there would more / less number of dots in an inch as a result the "inch" size increases or decreases.
However in case of WPF the inch size is as good as a physical inch as a result every time the DPI changes the system adjusts it self accordingly.
It's about UI and font scaling depending on the system's DPI setting:
Not all applications are DPI-aware: some
use hardware pixels as the primary
unit of measurement; changing the
system DPI has no effect on these
applications. Many other applications
use DPI-aware units to describe font
sizes, but use pixels to describe
everything else. Making the DPI too
small or too large can cause layout
problems for these applications,
because the applications' text scales
with the system's DPI setting, but the
applications' UI does not. This
problem has been eliminated for
applications developed using WPF.
WPF supports automatic scaling by
using the device independent pixel as
its primary unit of measurement,
instead of hardware pixels; graphics
and text scale properly without any
extra work from the application
developer.
This is taken from the link Kishore provided. (http://msdn.microsoft.com/en-us/library/ms748373.aspx)