More resolution means bigger file sizes. That used to be just a print requirement, but now it applies across the board, from website banner ads to social media and blog posts. How big should your image resolution be? Gone are the days when people would browse from one device. Today, viewers access images mostly from their smartphones using a variety of mobile apps. The pixel densities on those mobile devices are increasing. People refresh smartphones relatively quickly thanks to contract arrangements, so they will view your images on ever-higher quality displays.
By choosing high-resolution images from the beginning, you can guarantee that your campaign will look impeccable on media ranging from smart watches to social media, blogs and email to print, not to mention newer media like augmented and virtual reality.
Getty Images offers Retina-class, high-quality photographs and illustrations to support diverse campaigns across all these channels, covering usage rights across different formats including large, medium, and small. It also covers a broad range of licensing and media types including royalty-free, video, animations, vectors, and photos.
Find the high-quality imagery you need to fuel your campaigns. By newscred. Agency , Corporate , Media. What is a Retina-class display? Why should I optimize my images for Retina-class displays? Related articles. Discover UltraPacks. Best Practices.
Overview Plans and pricing Premium Access Assignments. Brand name for high resolution displays featured in many products from Apple Inc. Part of a Retina display on an iPhone 4. The pixels are not visible at normal viewing distance, creating an impression of sharp print-like text. Part of a non-Retina display on an iPhone 3GS. The pixels are visible at normal viewing distance. June 7, Retrieved June 4, Trademark Applications and Registrations Retrieval.
Retrieved June 19, Claims priority filing date with respect to prior application in Jamaica. Canadian Trade-marks Database. Also cites prior application in Jamaica. Retrieved Archived from the original on Retrieved 28 July Nielsen Norman Group. Daring Fireball. Retrieved June 21, Retrieved 22 March Wired magazine. April 4, Retrieved July 9, March 19, Retrieved March 20, PC World. Retrieved 9 July Ars Technica. The Inquirer. Archived from the original on September 14, Retrieved 30 August Blog archived.
Archived from the original on March 12, Coding Horror. Retrieved 18 September June 9, Retrieved June 10, June 21, July 26, Retrieved July 26, Retrieved June 15, Retrieved 9 October Soneira used the 0. A better number for a typical person is more like 1 arcmin resolution, not 0. The Centre for Vision in the Developing World.
Categories : Apple Inc. Hidden categories: CS1 maint: unfit URL CS1 maint: url-status CS1 maint: multiple names: authors list Articles with short description Short description is different from Wikidata All articles with unsourced statements Articles with unsourced statements from November
Retina Displays, with high pixel density, have been on the market for a few years now. They offer considerably better viewing experience and increase user satisfaction. Considering that more and more retina-based devices appear on the market each year, adopting websites to this technology should be on top of to-do lists of all developers. Today, web content can be browsed on a plethora of devices, each with their own display resolution, most in a much higher pixel density than the old standard.
Those old images pixilate heavily on the new displays. This is where vector graphics come in. Vector images can be scaled to fit all screen sizes and retain their impeccable quality. An additional benefit to vector images is the drastically reduced file size required, meaning your website loading times will drop noticeably. Everyone loves a faster website! Vectors can only be used for things such as illustrations, charts, graphs, and fonts.
Photos will need to remain in a bitmap format, but we have solutions further on in the article. So while not a total solution, you will find that vectors can replace a large amount of display items and even website UI. But SVG graphics are particularly valuable because they can be used to make websites retina-friendly. SVG graphics offer unmatched viewing experience. As such, SVG images remain smooth and clear even when in extreme close-ups.
Source: The Mud Pit. So if your business has a desktop web page and its responsive equivalent that works on mobile devices, SVG format is what you should implement to provide your customers with crisp graphics and uninterrupted viewing pleasure. Icon fonts are invaluable when creating visually appealing websites for retina devices. Unlike traditional fonts, which are saved as image files, icon fonts take up much less space and can be scaled and modified almost as much as one pleases.
Now, the problem with regular fonts is that they cannot be adjusted for viewing on retina displays. Icomoon offers a large collection of free vector icons. Plus, it allows you to create your own icon fonts. Including glyph icons to your website is also a good solution, for they can be scaled endlessly, and they are easy to modify using CSS.
Plus, glyph icons are retina optimized by default. Each browser renders fonts differently, ensuring that perfect icon font optimization is unattainable. Non-retina screens, for example, will show half the number pixels because of varying anti-aliasing settings on the most popular operating systems like OS X or Windows. Graphics, charts and fonts are great to move to vector, but what do you do with the images that must be bitmap?
The benefit of using retina. Another drawback of using retina. The problem arises when the scr attribute of the markup is set to use an SVG file. Another way to adjust your site to retina devices is to use Retina Images. Retina Images application automatically chooses the images to be viewed on different devices, and allows users to decide which of the images available on their page are to be retina-optimized.
Here is a nice retina-optimized WP theme, Avada. Unfortunately, without relying on third-party development it is difficult to adjust a website to retina devices. Anyway, in small websites you can change lots of images for their responsive versions with some media queries.
For example, if the image file is pixels wide, you should set the width of the graphic to px. Always be mindful of the advances that are constantly occurring in web development and technology in general. Retina displays are a beautiful and increasingly common improvement that every web developer needs to take into account. Phone Stalk us in the wild. Optimizing Images for Retina Displays And graphics for other high resolution screens.
Stalk us in the wild. Facebook Instagram Twitter Dribbble Clutch. Custom Made in Santa Cruz California. With bare hands. Mostly in the middle of the night. We'd like to thank you for reading the fine print. We're detail-oriented too. We like you already. Let's talk.