![]() With the srcset attribute we can optimize the images according to the devices. If the srcset image does not load or the browser does not support it, then the image indicated in the src attribute is displayed. ![]() The purpose of this attribute is to speed up loading, the src attribute is used as a "fallback" or default image. With HTML 5, browsers can manage sizing information in order to select the most appropriate image for the device. This significantly impacts loading times, and is contrary to any good web development practice. If in a Web page we insert an image that must be displayed in a container that has a maximum size of 200x200, for retina displays we will have to insert it at 400x400 pixels actually taking into account the latest displays of this type, we will have to insert a 500x500 pixel image. Here comes the real problem of 2x images, they are double images compared to the size really needed. The WebP format points to the exact opposite, which is to balance the need for content loading speed with quality ( read why it matters ). With the exception of graphic processing intended for printing, a high pixel density monitor has no practical sense, on the contrary the problems related to excessive magnification of the contents make normal use in the desktop environment less pleasant. In a 27-inch retina the resolution of a 49-inch monitor is condensed, for example my current display (Samsung Odyssey) has a resolution of 5120x1440 pixels, because for the same price I preferred a 49-inch panel instead of a 27 inches with high pixel density and the same resolution? Simple, for my use I need to view multiple windows side by side, a 27-inch retina type, too, is too small. For example, the 27-inch 5K screen of an iMac is 5120x2880 pixels, normal 27-inch 4K UHT IPS monitors have a resolution of 3840x2160 pixels. Excellent in my opinion for small devices such as tablets, to read magazines and books with a definition similar to printing, impractical for other activities such as web browsing. Basically it's like viewing everything with zoom, at 200%, without 2x images you see everything blurry. They are completely different philosophies, the first aims to offer the highest quality of visualization of images and texts, through screens that have a pixel density from 2 to 2.5 times greater than a normal display. However, Apple has a slice of the market between 12% and 15% and, except for the latest models, there are really few those equipped with displays of this type.Ī reversed situation with respect to the spread of Google's WebP format, also introduced in 2010, but still poorly supported, only recently Apple's Safari browser has finally introduced support for this important image compression format. Only Apple's retina displays introduced in 2010 are used in the consumer arena. So in this example the logo has the dimensions 250×75.ģ.Perhaps due to the fact that high pixel density displays are not very widespread, currently PC solutions are extremely expensive and consequently not very widespread except in the professional field, the support of PrestaShop templates for high resolution images is not yet very much used. height and width from the example above must be replaced with twice the size of the actual logo. ![]() This can be extended either via the functions.php (only with your own theme which you develop yourself!) or e.g. To implement this in the Genesis framework, proceed as follows:Īdd_theme_support( 'custom-header', array( The CSS property background-size is then used to set the normal width and height of the logo. To support double pixel density on Retina (iPhone) the logo image must have double the pixel size. However, with the logo, the image size is set to the actual pixels. Genesis uses the WordPress feature to put a logo in the header instead of the title and description.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |