29 Mar 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.
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)
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 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 firstname.lastname@example.org