Viewing Retina?
Retina?
|
User: Roddy 11 years ago
|
|
|
Judging by the posts in this forum and the emails I receive, there still seems to be confusion caused by image sizes in general and the retina thing in particular. Although I have had a Retina Macbook Pro for quite a while I never seriously used it for web design - for obvious reasons. I upgraded my desktop at the end of last year to an iMac Retina and using it reminded me of why I always check the actual size of images. I create a lot of icons. These are created in a DTP apt 200px square. I then take a screenshot and crop it at 200px, remove the background and save it @2x and then create a 1x version. The slight difference in this procedure from when using my old non retina iMac is the size of the cropped image. Although the icon is created at 200px square, the actual screenshot is 400px since the DTP app is presumably displaying the object as "retina". The lesson here is to always check the actual size and adjust it to suit the application using the technology of common sense. My general rule is to always import an image into the web design app at the actual size that it will be displayed on the web page. Nowadays, if I import the image at around twice the size - but do NOT use this as a "retina" image - it works just as well. In other words my standard image can be retina sized and this is my reasoning... Desktop computers are using broadband connections and, with the general increase in internet speed, can handle larger images anyway. The number of visitors using mobile devices to surf the 'net is now around 60% and rising. A large percentage of these devices are retina so why not just use an @2x image and forget about the 1x? Since these devices are often using mobile connections with monthly data limits, the @2x image is punishing them anyway. The desktop user will be blissfully unaware of having to wait a few milliseconds. Before committing to a high res @2x image, it's worth inserting it and then testing in the iOS simulator to see if it is absolutely necessary. Is the image so important that it needs to be uploaded at a quality which rips holes in your visitors data limits and causes them to wait longer for it to download. Just because you can add an image @2x or 3x doesn't mean to say that you should in most cases. Suppose I have a web page with a slider containing 30 beautiful images @2x. Who is even going to find this page when I didn't insert alt text and fig captions? Are the few who actually find it going to wait for it to download and use up a large chunk or their monthly data allowance? Will those who do visit ever come back? Now we will start to get questions about @3x which is recommended by Apple for the artwork and graphics used in apps destined to be viewed on iPhone 6 Plus. Even these aren't actually displayed @3x. The assets need to be suitable for a 414 x 736 @3x screen. This means that a full screen image would need to be 1242 x 2208. The actual physical size of the iPhone 6 Plus panel is 1080 x 1920 so it needs to be down sampled and so on... If you want to create websites - rather than get involved in all this tech stuff - remember the old adage, "If it looks right it is right". Last edit 11 years ago ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: James G. 11 years ago
|
|
|
I asked about @3x yesterday, was curious and wondered how many threads it would produce. I fully agree with what you said. I struggled with getting both sets of images correct; then sat back and thought about it and started uploading one image at 1.5 to double the size as would be displayed. I finally got it to work well and they display well on any computer/device (haven't looked on one of those giant mac displays yet). It takes some fiddling to get to the point between jagged image and non-jagged but load quickly. I feel one of the best things I did was take a URL I decided not to use and use it for testing, it has helped me quickly see if something works in real world. After sizing the image, I use Compression app. I like that as it compresses it ramps up the quality. I will compress to about 80 percent and it ups the quality to about 150 pecent Last edit 11 years ago |
|
| Post Reply |
| You must login or signup to post. |