![]() These days, 4K screens (usually 3840×2160 pixels) are all the rage, and more and more manufacturers are jumping on the bandwagon. The question remains what the maximum image size should be. Consequently, providing images double the size is sufficient for normal use. This means that with a pixel ratio of two, you would have to press your nose to your smartphone to be able to see individual pixels. With a pixel ratio of two, this is true already at half this distance. However, with a pixel ratio of one, the human eye can no longer distinguish individual pixels at a distance of a little over the screen diagonal. With connections in the 3G range in particular, this would cause long load times. In theory, this means that images need to be provided in up to quintuple size. Therefore, your background image should be delivered double the size in this case.Ĭurrently, device pixel ratios on the market range from one to five. ![]() In this case, an image with a width of 640 pixels looks pixelated on a 640 pixel screen. If the value is two, each logical pixel of your background image consists of four physical pixels (two vertical and horizontal each). The device pixel ratio describes how many physical pixels (device pixels) a logical pixel (CSS pixel) consists of. The ratio of logical and physical pixels (device pixel ratio) should also be taken into account in the selection of the suitable image sizes. The dots per inch (dpi) are not important in this context. Any background image for this range should have a width of at least 640 pixels. For example, a range covers screen widths of 320 to 640 pixels. Then, each of them is allocated an image that has been optimized for the respective range. In order to deliver the background image that matches the respective screen size, we use media queries to classify the sizes into ranges. But first, there are some aspects that play a role in choosing suitable image sizes and help to better understand how images on the web work. And if all you need is a quick solution to conjuring up a background image for your website, just scroll right down to the end.Ī definitive answer to this question is given in the “Media queries” section below. But if you are looking for a substantiated answer to the issue described above, you should read this post. If you are researching how to choose the right motive, or you want to use an svg file as a background, you are unfortunately looking in the wrong place. ![]() Is there a simple, clean solution to meet all of these requirements? ![]() And it looks the same in all common browsers, from Android browsers to Chrome, Safari, Firefox, and Internet Explorer.It adjusts to the size of the device or browser window without any whitespace.It does not take up too much network traffic.The first question: What characterizes a good full-size background image? Are mobile browsers supported as well? You often won’t find that information, and the standard solution fails your own test. Should a 2 MB image be delivered to mobile devices with 3G? Probably not. They work quite well at first glance, but once you take a closer look, more often than not you will be disappointed. Setting a full-size background image with CSS3 is no problem, right? There are numerous solutions available on the internet. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |