Images occupy significant amount of visual space of your website

Images occupy significant amount of visual space of your website

Images occupy significant amount of visual space on your website  and it impacts the over all performance of your website and  its download speed.

Image Optimization

One of the most frequently asked questions from our clients is about image size or should that be image resolution? It can be confusing and one depends on the other, so we’re going to take a look at why these two terms often get confused and what they mean.

Both image size and image resolution refer to how an image is measured. When you capture a digital image, via a digital camera, your phone or a scanner, it’s measured in pixels – which is an abbreviation of means ‘picture element’ and it is the smallest unit of a digital image. Pixels are also measured in terms of DPI (dots per inch) or PPI (pixels per inch)  and it is this measurement that affects resolution. The more DPI or PPI, the higher the image resolution. Because pixels are tiny, we often hear about Mega Pixels, particularly when it comes to cameras and photography.

Why It Matters?

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website: the fewer bytes the browser has to download, the less competition there is for the client’s bandwidth and the faster the browser can download and render useful content on the screen.

Image optimization is both an art and science: an art because there is no one definitive answer for how best to compress an individual image, and a science because there are many well developed techniques and algorithms that can significantly reduce the size of an image. Finding the optimal settings for your image requires careful analysis along many dimensions: format capabilities, content of encoded data, quality, pixel dimensions, and more.

The background image size question is important because it is a balancing act of trade-offs to get the best performing and best looking site. Depending on how heavily your site’s look, feel, and branding rely on the background images, choosing the right size could have a huge impact overall.

Recently, full screen sliders and backgrounds have become hugely popular in general, and pecifically in “flat” style designs.

A few of the trade offs when it comes to background images:

  • grainy vs. slow download
  • squished vs. stretched
  • cropped horizontally vs. cropped vertically
  • fixed vs. scrolling
  • independent vs. integrated with other element positions

Some Examples (as of original writing)

Here are some examples of bigger corporation websites using full screen background images:

1400 x 875 –1.6 ratio– Patagonia

1920 x 1080 –1.78 ratio– General Motors

1920 x 1165 –1.65 ratio– Zara Clothing

Here are a few full width, partial height implementations:

2560 x 1707 –1.5 ratio– Burberry

1800 wide — Burger King

1600 wide — Nike

1440 wide — Adidas

Desktop and Laptop Screen Resolutions

One part of answering this question is looking at screen resolution. After all, the screen size plays the biggest part in how your work is going to be presented.

When it comes to just screen resolutions, the most popular Desktop, Tablet, and Console (not mobile) resolutions in India currently (March 29, 2018) are:

1366 x 768 (1.78:1 ratio)

1920 x 1080 (1.78:1 ratio)

768 x 1024 (.75:1 ratio)

1280 x 800 (1.6:1 ratio)

1440 x 900px (1.6:1 ratio)

1600 x 900 (1.78:1 ratio)

1024 x 768 (1.33:1 ratio)

 

Mobile Devices

On the flip side, there are mobile devices with much smaller resolutions–800 x 480 for Samsung, 320 x 480 for iPhone–in addition to maximum image size limits before things break. There’s a good, long list of mobile screen resolutions here. Also, there’s a nice, quick reference of just iOS resolutions here.

Here’s my own shortlist of mobile screen resolutions that I consider when developing a site:

Short side            long side              ratio       example

240                         320                         1.33        Android SDK

320                         480                         1.50        iPhone

360                         640                         1.78        Nokia nHD

480                         554                         1.15        Motorola Droid

480                         800                         1.67        Samsung Galaxy

600                         800                         1.33        Kindle 3

640                         960                         1.50        iPhone 4

768                         1024                       1.33        iPad 1 – 4, many desktops

768                         1366                       1.78        most new desktops

800                         1280                       1.60        older desktops

900                         1440                       1.60        desktops last 5 years

900                         1600                       1.78        most 20″ monitors

1080                       1920                       1.78        most 23″ monitors

Retina Devices

Retina displays are becoming more common and have their own special issue–to maintain the image clarity we hope for, the image needs to be 2x bigger. This holds true for background images as well as standard image elements.

Retina displays, like those on iPad 3rd generation and up, iPhone 4 and up, and many others, use more pixels per inch than a standard screen (here’s some good detail on that from Wikipedia). This makes standard-sized images look a little fuzzy when viewed on the high-density screens. Web developers overcome this by creating images that are twice as big as normal and then displaying them at half the size. The end result is an image that is the same size that you wanted it to be in the first place, but it looks great on both standard and high-density screens.

This can make for some really big images when you’re talking about full-screen backgrounds. If you’re not careful, this can increase your page’s download size and therefore, download speed. The good thing about backgrounds, though, is that they aren’t typically retrieved by your device unless they’re visible on the screen. So, if you put a background in a media query that is never called by the page, that image is never retrieved, saving the bandwidth.

I did a quick case study using apple.com/iphone and they handled it by simply doubling the size of their background images at three different screen resolutions. See this discussion in the comments below for the full detail and CSS code.

Apple went with these for non-Retina:

  • 1440px x 678px for screens 1024 and up
  • 1068px x 648px for less than 1024
  • 736px x 460px for less than 768

For Retina (using “-webkit-min-device-pixel-ratio: 1.5″ media queries), they went with:

  • 2880px x 1356px for screens 1024 and up
  • 2136px x 1296px for less than 1024
  • 1472px x 920px for less than 768

Each of the background images are doubled for Retina. So, if you trust Apple as a good standard, then I’d say go with double.

Hope we have answered all your quires in this white paper stay. Incase you have anyfruther question pls drop us a mail at info@oyeonline.com

 

 

No Comments

Post A Comment