If you believe this is done incorrectly, unfortunately, if you decide to switch to just about any other Mac photo editor out there like Affinity Photo, Pixelmator, etc., you will find that they treat magnification exactly the same way Photoshop does. It’s just that the display pixels got a lot smaller, in fact about 50% smaller.
But that is not wrong, as long as 100% means 1 display pixel to 1 image pixel. That resulted in 100% magnification suddenly looking around 50% smaller than before. Then, when Mac Retina displays (and HiDPI displays in Windows) came out, the resolution of computer displays suddenly went over 200 ppi. Over the last 30 years, 100% or 1:1 size slowly got smaller and smaller as screens went from 72 ppi in the 1980s, to over 100 ppi by the 2000s. 100% does not mean 100% real world magnification. Then with JavaScript you can detect if the pixel ratio of the browser is 2x, just like you did with the media query: if (window.What you are seeing as a “50% view” is actually 100% as defined in Photoshop and other photo editors, where 100% means 1:1, or one image pixel to one screen pixel. Just like the background images, you’ll want to create a normal image and one image. repeatingPattern JavaScript for Retina Image Replacementįor your retina images that aren’t backgrounds the best option seems to be either creating graphics with CSS, using SVG, or replacing your images with JavaScript. To add the new image to your site simply add in the media query below (You can add any additional styles that have background images within the braces of the same media query). It will be useful to have a standard naming convention such as adding for these retina images. For example ‘bgPattern.png’ at 100px x 100px and ‘ ’ at 200px x 200px. You’ll first want to generate two versions of each image. Retina Background Imagesīackground images that are specified in your CSS can be swapped out using media queries. if you left out the 114px the iPhone 4 would use the 144px icon). If the correct size isn’t specified the device will use the smallest icon that is larger than the recommended size (i.e. These sizes for regular and Retina icons ( from Apple) are as follows: iPhoneįor each of these images you create you can link them in the head of your document like this (if you want the device to add the round corners remove -precomposed): When users add your website or web app to their homescreen it will be represented by an icon. If you’d like to do something more advanced keep reading below for how you can apply this technique using scripting. This can be done manually by setting the height and width in HTML to half the size of your image file. The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 200 x 200 pixels), and setting the image to fill half of that space (100 x 100 pixels). If you’re creating something that will be used more often on a WI-FI connection or have an application that is deserving of the extra wait for hi-res graphics these steps below will help you target only hi-res capable devices. If your site is mostly used on-the-go over a 3G network it may not be wise to make all your graphics high-definition, but maybe choose only a select few important images. The main issue with adding retina images is that the images are double as large and will take up extra bandwidth (this won’t be an issue for actual iOS apps, but this guide is covering web sites & web apps only). Things to Consider When Adding Retina Images First there are a few tough questions to consider, but then this guide will help you get started making your websites and web apps look amazingly sharp with Retina images! For designers this immediately brings up the question, “What can I do to make my content look outstanding on these new iPads and iPhones?”. Apple’s newest devices feature the Retina Display, a screen that packs double as many pixels into the same space as older devices.
0 kommentar(er)
