UX: Images Vs. Screen Size

A professional website is one of the biggest and most important investments a company or organization can make. It’s how you reach your potential clients, donors, and members, plus it’s the most effective way to reach your current ones. With the advancements in modern technology, it’s important to meet your clients, members, and donors where they are. And this means not only on a desktop computer but also a smartphone, tablet, and even smart watches. Yes, you read that right.

In order to reach your audience, your website must be viewable across the board, which means it’s your responsibility to make it responsive. But beyond screen size, making a website fully responsive also means the images and graphics are useable across the various types of technology. Since every device has a different screen size and a different pixel size, some images look pixelated on screens with higher solutions, such as retina displays and 4k screens. Ever tried to pull up an image, but it was fuzzy and distorted? That’s one of the quickest ways to send your audience on to your competition. This is a result of old web design practices not adapting to newer devices and technology.

So, what can you do?

The first factor to consider is making sure your images are the correct size and number of pixels. In the past, the standard resolution for screens was 72 pixels per inch (PPI), but with so many new technologies out there, it’s now much higher. The devices that use higher densities of pixels in the height and width in the exact same physical size. Screens with higher resolution displays, in theory, should show images sharper than their counterparts. We will discuss an easy solution below.

Image Types

Images are two types of files; either SVG (Scalable Vector Graphics) or Bitmap. SVG images are not made of pixels, and can be used at any size without losing resolution. Bitmap, on the other hand, are pixel-based and lose their resolution when viewed at a larger size. Because of this, SVG files are preferred in web design. They can be searched, indexed, compressed, and edited with any drawing software or text editor. Plus, they are becoming supported by all modern web browsers.

Used in both digital and print mediums, JPG, GIF, TIF, and PNG are all considered bitmap files because they can’t be changed without losing resolution. AI, EPS, and PDF are vector files because they can be changed or resized and still keep their design in tact. Not all of these formats work on the web, but we recommend vector files for things like your company logo because it’s something that will need to be used at various sizes. For example, you’d want your company logo on your business card, letterhead, website, promotional materials, and multiple advertising or marketing avenues. Each of these would likely call for a different image size, which would get complicated and costly if you were only working with bitmap files. The web is no different.

What If Your Image Files Aren’t Vector?

With so many different screen sizes available, what’s the best way to design a vector image that will work on all of them? The short answer is that it’s pretty much impossible to accomplish this.

You would spend countless hours coming up with image resolutions to fit every type of technology out there, so it’s important to narrow your focus. Where are most of your viewers accessing your content? Chances are, they’re using their mobile device.

So, if you don’t have easily-convertible vector images, then you will need to strive for designing your images at 1x, 2x and 3x scale, which is standard for Apple and Android devices. You would call in the appropriate image size for the device that is viewing it. This would accomodate download speeds for slower devices and give a better user experience for those on newer devices with higher pixel densities. This means your images will appear sharp among the varying screen sizes.It also means your designs will be “future-proof” and continue to work for any new screen sizes that remain to be introduced. How simple is that?

Need Help? Contact Signify Studio Today!

While we still recommend designing vector images, we realize this isn’t possible for everyone and that’s why we’re here! Drop us a line or give us a call at 813-767-7288 and we’ll be happy to help you design images that will work best for your audience. In this day and age, web design is all about the user’s experience – don’t lose your users by designing low-resolution images that view poorly on their devices – contact us today for help!