The note sent out to third-party software developers says that any future updates will not be approved by Apple unless 960x640 pixel screenshot is included, a change from the company's earlier policy which supported Retina Display screenshots but did not require them.
I recently got a retina display MacBook, and all my screenshots (via ⌘ CMD+⇧ SHIFT+3 or ⌘ CMD+⇧ SHIFT+4) end up being twice the size compared to how they appear on-screen. For example, here is a screenshot of the Ask Different logo taken via ⌘⇧4 on a retina MacBook Pro running macOS 10.15.7. When the file is opened locally in Preview or Quick Look, it appears at the same size as. RetinaCapture makes this easy by simultaneously taking a 1x and 2x resolution screenshot and saving both to a single directory. The 1x screenshot is redrawn at the lower resolution, rather than scaled, so everything looks crisp. A Retina Mac is required to take 2x resolution screenshots. @wladimir-palant: What about Key-Board, Because when i use to take screen shot of sceen where user type, then key board not capture,how can i add key-Board in screen capture.? – g212gs Jul 4 '14 at 4:56.
Previously, non-Retina Display images and apps were scaled up from their native 480x320 pixel resolution on devices that sport the high-resolution display, and many apps in the App Store have yet to support to the higher pixel count.
Liquid Retina Display
Currently, the only Apple products to boast the Retina Display are the iPhone 4, iPhone 4S and the fourth generation iPod touch, however speculations that the much-rumored next-generation iPad will include its own high-resolution display have been cropping up since early last year.
The iPhone 4 was the first device to use the 960x640 pixel screen, with the display being introduced to the current iteration of the iPod touch in 2010.
AppleInsider has affiliate partnerships and may earn commission on products purchased through affiliate links. These partnerships do not influence our editorial content.
Trashme 2 1 17. If you have an iPhone, iPad, or other device with a retina display, you probably noticed that images appear crisper than on your regular computer monitor. The retina display significantly increases the number of pixels per inch that fit on the screen, increasing the resolution of the images.
What does this mean for technical writers including screen captures in online help files? In short, use larger images and scale them down in the browser rather than with a graphics editor. This will increase the file size, but it will also make the images a lot crisper.
Let's look at a quick example. If you have an iPhone or iPad, look at this same post -- yes, the one you're reading right now -- on your Apple iPhone or iPad device. (Go to http://bit.ly/RLfDrR for a shortened URL.)
Below is a sample screenshot from a tablet app. Its dimensions are 604px by 1028px.
(This screenshot is from a mobile app I recently documented.)
Normally, this screenshot is too large to include in an online help file. Not only are its dimensions large, it's file size is 145KB. The traditional approach would be to scale it down in a graphics editors to a smaller size before adding it to my online help. I'll resize the image to half this size using a graphics editor such as Snagit.
The file size is now only 80KB, nearly half the size. This smaller file size increases the loading speed of the image. The tradeoff is that the image is a bit fuzzier. On a computer screen, because monitors display only about 72 DPI, the Snagit-resized image would look about the same as a scaled down image in the browser, right?
This isn't the case with a retina display. Here's the same full size image with some height and width dimensions applied to it so the browser scales it down (instead of scaling it down with a graphics editor):
On a regular computer monitor, the previous two images look about the same -- both a bit fuzzy. But on a mobile device with retina display, the last screenshot is clearly sharper than the screenshot I resized with a graphics editor. The last screenshot is just as sharp as the first screenshot.
Application to Tech Comm
For technical writers, this means that when we include screen captures into help that will be viewed on a mobile device with retina display, the screen captures will be a lot sharper if we use larger image sizes and scale down the images in the browser rather than resizing the images beforehand in graphics editors.
I usually don't resize my images in graphics editors anyway, since I use Flare. I generally have Flare automatically scale the images to the sizes I've set. But now I'm thinking that I probably won't do this (at least not for mobile targets).
If you want to use the larger image file sizes, don't select Flare's 'Generate resized copies of scaled images' check box shown below.
This setting will automatically convert a 600px image (with a filename like samplescreenshot.png) to a different file size based on your manual scaling. The regenerated image file will end up looking something like samplescreenshot_300x511.png to reflect the resized dimensions.
For desktop help, this option is usually extremely helpful. But maybe not for mobile.
Instead of selecting this option, let the image be inserted at its full size, which may be twice the dimensions.
Retina Display Screenshot Keyboard Shortcut
Then edit your stylesheet and add some responsive queries to tell the browser to resize the image instead. For example, add the following:
@media (max-width: 480px) {
img {
max-width:100%;
}
}
@media (min-width: 481px) {
img {
max-width:302px;
}
}
Flare will strip out these media queries, so be prepared to add them back in. (Tip: It would be great if Madcap were to release an update to Flare that didn't strip media queries out of its mobile target.)
Once you add the media queries back into the stylesheet, the browser will show the image at these smaller sizes. For devices with 480px screen sizes and smaller, the image will expand to fill the maxiumum width of its frame, which isn't a whole lot given the small size of the device. The larger image will rescale and display crisply in that space.
For devices larger than this, the max width will be 302px.
Here's that same image scaled down through a media query instead of through height and width dimensions in the image embed code:
Any video converter portable. If you look at the code, you won't see any height and width dimensions applied to that. It just looks like this:
<img src='https://s3.us-west-1.wasabisys.com/idbwmedia.com/images/samplescreenshot-1.png' alt='Sample screenshot at full size' />
(Also, if you look at this same post in IE8, you won't see any resizing, because IE8 doesn't support media queries.)
Using larger images will impact the download time of the web page, but not that much. Instead of a 80KB file, it will likely be about twice that, 145KB. For some users on weak cellular networks, it might be an issue. But for most, the download speed will be negligible.
More importantly, the screenshot will be clear and crisp for the user. This can be especially important if the screenshot shows text.
Now, whether you include screenshots in a mobile output is another discussion altogether, but I'll save that for another post.
Additional Reading
For more information on retina displays, see these posts: Photo theatre slideshow movie maker 3 5 0.
About Tom Johnson
I'm a technical writer based in the Seattle area. In this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, visual communication, information architecture, writing techniques, plain language, tech comm careers, and more. Check out simplifying complexity and API documentation for some deep dives into these topics. If you're a technical writer and want to keep on top of the latest trends in the field, be sure to subscribe to email updates. You can also learn more about me or contact me.