Just imagine how much more profoundly a retina logo would stand out on your website in comparison to standard pixilation. If you have an HD mobile device, and your images were not optimized for Retina displays, then the image will look something like this:Īs you can see, the images definitely have more detail and look much sharper on a Retina display. To keep this simple, I will show you an example. So we will force the browser to resize the 500px x 200px image to be 250px x 100px, which will keep the same proportions. “Wait, what?! Doesn’t that mean that the image will show bigger on the screen?!” Yes, it will, but we can specify the size of the image in the HTML or CSS. Therefore, the retina version of the logo will be 500 pixels by 200 pixels. When formatting images for Retina displays, the 72 DPI is still used, but to increase the quality, we just double the actual dimensions of the image.Īs some of the best web designers around (we’ve got the awards to prove it), we use pixels as a means for image measurement, so if we have a logo displayed on a web page on a non-retina display and it’s sized at 250 pixels by 100 pixels, then for retina displays, we have to increase it two-fold. This is a standard resolution for saving files, because screen display resolution has a max DPI of 72 pixels per inch, or dots per inch. When we save images in Photoshop, or any other advanced graphic editor for screen display, we used a DPI of 72 pixels. This means that almost every image, icon, and graphic displayed on a Retina, qHD, or QVGA screen has to be doubled in size, but still keep the original size that was intended. What Does Using Retina Display Mean for Your High Definition Website? Since then, this metric has been the main standard used to describe retina screen quality, with many new models since then including even greater number of pixels per inch. was the first to brand retina image display by using it in its first iPhone 4, by making screen images appear at 326ppi, or pixels per inch. Overall, retina display makes images appear more detailed and vivid on desktops, iPads, iPhones, Mac, MacBooks, and more. Retina displays allow graphics and photos to become sharper and clearer on a display, this is done is by doubling (and sometimes tripling) the amount of pixels within a photo or graphic to enhance the quality of the image, hence making it HD. Apple calls it Retina display, and Android may call it qHD or QVGA. Mobile website design and development is definitely on the rise, and with so many mobile devices on the market, all with different display resolutions, one concept that is growing tremendously is High Definition graphic displays on mobile devices. ![]() Take out QVC, and they NOW share a MAJOR component in mobile web design, and that is the ability to stuff about twice or thrice as many pixels within an image to serve up a crystal clear photo, or a graphic that is almost life-like. What are The Effects of the Retina Resolution?Īll the terms listed above have one major constant in common – they can all display a flameless candle.What Does Using Retina Display Mean for Your High Definition Website?.You can also change padding of your logo for both default Top logo & Side Logo. ![]() There is no limitation for size of logo, but please consider responsiveness of your website when creating & inserting logo. ![]() You will also need to fill Side menu logo that located on Customizer» Header & Navigation» Side Menu Logo & Side Menu Retina Logo You can change logo from Customizer» Header & Navigation » Logo & Logo Retina. Change faviconīefore changing favicon, you should create 2 fav icon, first for normal display, and second for retina display monitor After that you can easily change favicon from Customizer» General options» Faviconĭefault size of favicon is 16×16 Pixel, and 32×32 Pixel for retina display favicon. You will also need to prepare your retina logo & favicon. ![]() This themes provide option to change logo & favicon.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |