Design & UX
Article

What Do Super High-Res Displays Mean for Your Website?

By James George

When retina displays hit the market, web design experts and web developers gasped at the thought of having to deal with a new resolution.

From a web design standpoint, it was a nightmare. Responsive design dealt with content for different screen sizes and device widths, but pixel ratios were a whole new ball game. Now Apple is releasing iMacs with 5K displays and a lot of web designers are sweating at the thought of scaling everything up once again.

5k Display

The problem with this comes from the fact that the main consumers for these types of machines are web and graphic designers. We are always upgrading our equipment. We're only human, and we are looking for the most features for our money. The problem is that in order for graphics to appear crisp, so they'll need to create images that are 4 times as large in pixel size.

Problems Arise

There are several problems that arise when screen resolutions drastically increase. For Retina displays, images doubled in size. Now, with the 5K display, they doubled again, meaning they are 4 times larger than typical images.

Bandwidth is limited

Serving large images is fine when you're on your desktop computer with a high-speed internet connection. However, it's impossible to ignore the 80% of browsers who are looking at your site on a mobile device. 4X images will crush 3G and 4G internet connections. You will have to serve smaller images to those devices for quick load times and to save as much bandwidth as possible.

Another Size to Remember

Not only is it rough on bandwidth, but it's another image size you have to remember. When building a website, you'll have to accommodate those devices, creating an image size optimal for those devices. If you're concerned with conserving resources, it's an issue. A handful of 1-4MB images may not cause an issue, but what if you have thousands?

How Can We Address These Issues?

Fortunately, our field is working on solutions and workarounds to increasing image sizes. It would make our jobs more difficult to create multiple versions of sites or pages, but with simple scripts and options, we can serve the best version of our site and its files to the right people.

Images

The newer version of Photoshop has the ability for you to export an image in multiple sizes at once. This single feature can save you a few minutes per image of saving it at different sizes, including 2X for Retina displays. All that is needed is for Adobe to add 4X to their size options. It will be as simple as clicking a button and saving the image to a folder.

Media Queries

Media Queries

Media queries will allow you to serve different images to different devices with different pixel ratios, whether they are 1, 2, or 4. This will give you some degree of control over images looking crisp on the right device.

Picturefill

PictureFill

This lifesaver allows you to serve images to every user, depending on a variety of conditions you may encounter, with all of the different devices out there. PictureFill handles situations like screen size, viewport size, screen resolution, and more. It enables the element feature, as well as workarounds for browsers where it isn't supported.

Other Issues

With all of these issues to address and things to consider, as well as the solutions we've covered so far, there is still the issue with the weight of your site. With these huge image sizes, your site's weight is going to drastically increase. Most hosting companies allow limited resources. Not everyone can afford abundant hosting. The biggest issue is keeping your site's weight down.

SVG

SVG is constantly evolving, and it's a great way to cut down on weight. SVG file sizes are small, so whenever you can use them, it will help trim the fat on your site. Responsive SVGs means that the same graphic resizes to fit the screen size and different devices.

Optimizilla

Image Compression

Image compression is another way to cut down on the weight of your site. Just because your images are large and you have multiple copies, it doesn't mean they have to be full size.

There are several image compression services available to use and they are free, too. The top choices are WP Smushit, TinyPNG and Optimizilla. You'll want to choose the right one for you. You may want to try them out yourself to decide which one gets the best results for your images.

Just as an example, in the image above, I reduced the quality to 70%, but I couldn't notice a visual difference, but the file size was reduced by a significant 50%.

Services

If you're concerned with eating up too many resources, you can also serve those images from a service such as Amazon Web Services, which is an affordable way to serve files without worrying about hosting limitations. This is a case where you only pay for what you use, which can help serve a lot of files quickly. It really depends on the size of your site.

Conclusion

It's no question that screen sizes and resolutions are growing. Technology is ever-growing and ever-changing, so the need to accommodate the newest devices will always be a challenge. It's important to note that web technology is growing with it.

It won't be long before we have a rock-solid system in place for handling and serving different images for different screen sizes and pixel ratios.

In the meantime, it is important to keep our sites as lightweight as possible, using the methods we have available.

  • M S i N Lund

    SVG is awesome for logos and graphics.
    Its so handy to be able to use one single little file for all sizes, from tiny bullet-points to the biggest header.

    Hopefully we wont have to bother with fallback-hacks much longer.

  • http://www.bunce.space Mike Bunce

    Picturefill is a great polyfill if you want to start using picture element now. Soon of course there will be full browser support for picture element, and we will be able to use it natively. In the meantime though picturefill makes it work, and solves the issue of both responsive images, images with art direction, and large scale image adaptability. The future is almost here!

  • Ralph Mason

    I’m still not convinced by the move to serve up multiple images. My preference is still to set the image to very large dimensions but reduce the image quality—a cool method that works well across devices when it’s actually squeezed down to the appropriate size. The technique is discussed here: http://blog.netvlies.nl/design-interactie/retina-revolution/

    • http://SalaryNet30.com Lisa Cook

      like Russell replied I’m stunned that a mom can profit $8748 in a few weeks on the internet. pop over to this website on `my` `prof1Ie`

      ~“““““““““

    • http://www.ryantoyota.com/ Ryan

      That does seem to be an ideal solution. Looks pretty indistinguishable and requires less code, less server space and less bandwidth.

  • http://www.ryantoyota.com/ Ryan

    Where are you getting that the iMac 5K’s resolution is 4X? It’s the same 2X increase as all of Apple’s other retina displays, save for the iPhone 6/6s Plus, which is a 3X retina display. To clarify, it’s four times the amount of pixels, as all of the 2X retina displays are (double the width and double the height makes four times the pixels overall), but it’s not a “@4X” display.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.