Cover images are images that automatically size and crop themselves to display over the whole area an element. In the design phase, these images are cropped to the breakpoints as designed, but then problems arise in responsive layouts due to multiple variables. This creates what 6d has deemed Weird Eye Syndrome.
Explanation of the problem
This 1260px width and 750px height (1.68 ratio) image will be used in some code examples below.
This HTML example creates a 750px min-height cover image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weird Eye Syndrome</title>
<style>
* {
box-sizing: border-box;
}
body, html {
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
background: url(https://images.pexels.com/photos/283196/pexels-photo-283196.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) center center no-repeat;
background-size: cover;
min-height: 750px;
width: 100%;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>At 1260 width, the image is in its correct ratio container (1.68), the image is displayed fully.
At 1646 width, the image is no longer at it natural ratio and the bottom is cropped on the top and bottom to “cover” the container without distorting the image. Since the height of the image is taller than the height of the container, the image is cropped vertically. The green box below shows the approximate size of the image without cropping. This effect exaggerates the larger the horizontal viewport size becomes with current settings.
On an iPhone 6, the image is cropped horizontally instead of vertically because the width of the image is wider than the width of the container.
Here is a live example of the cropping from small to large viewport:
Ok, now to break it bad enough for someone to complain
The above example probably would not draw ire; the image is mostly weighted, subject stays in frame, and the ratio stays close. Now to really break it.
Taking the previous example and adding text, this will cause the container to grower over the set min-height of 750px on thinner viewports.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weird Eye Syndrome</title>
<style>
* {
box-sizing: border-box;
}
body, html {
font-size: 16px;
margin: 0;
padding: 0;
}
.container {
background: url(https://images.pexels.com/photos/283196/pexels-photo-283196.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) center center no-repeat;
background-size: cover;
color: #000;
font: normal 50px/60px Arial;
min-height: 750px;
padding: 100px 50px 100px 50%;
width: 100%;
}
.container span {
display: inline-block;
background: rgba(255,255,255,0.6);
}
</style>
</head>
<body>
<div class="container">
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem, eos expedita ipsum iure laboriosam magni nulla quae, quam, quasi quisquam tempora unde vero! Asperiores eaque nostrum omnis quo reiciendis.</span>
</div>
</body>
</html>At 1250, the image is still looking good.
At 600px we get a solid Weird Eye Syndrome. This is because the aspect ratio has changed significantly.
Here the image is cropped to be a closer aspect ratio (note the white space because a larger source file was not available, see design section below):
Then insert the new image with media queries:
.container {
background: url(phone-crop.png) center center no-repeat;
background-size: cover;
color: #000;
font: normal 50px/60px Arial;
min-height: 750px;
padding: 100px 50px 100px 50%;
width: 100%;
}
…
@media screen and (min-width: 700px){
.container {
background-image: url(https://images.pexels.com/photos/283196/pexels-photo-283196.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
}
}And the results are more what a designer might expect.
Full viewport images
It is growing increasingly popular to have a full screen images or videos, like on pepsi.com:
These typically use 100vh x 100vw and some sort of media cropping. The same Weird Eye Syndrome issue exists here but the additional requirement of being formatted for the user’s screen ratio exists, not so much for the element’s ratio. Pepsi uses techniques 1 and 3 in the design section below to help their design stay away from the problem, but new problems may arise. For these situations min-aspect-ratio media query can be used.
CSS:
.visible-only-16-9 {
display: none;
}
@media screen and (min-aspect-ratio: 16/9) {
.visible-only-16-9 {
display: block;
}
}HTML:
<div class="visible-only-16-9">Exposed content</div>This one can be a little tricky, but essentially once the viewport hits a certain ratio, in this case 16/9, the condition is met. 16 is the width, 9 is the height, so the ratio target is 1.777. So 520w by 293h (1.774 ratio) will not expose the content but 521w by 293h (1.778) will expose the content.
This can be used to size or reposition content if it is not working for a certain viewport ratio. An example of where this would be required is if your content was being translated off-screen with top: 50%; transform: translateY(-50%);
A note about not cropping images (cover alternative)
http://6dglobal.com uses a technique is somewhat like the cover technique, but uses the newer <picture> and <source> elements (Mozilla Dev - Picture).
Using this technique, 6D can use full-width images, that stay in proportion to their initial ratio, but still size nicely through the viewports.
6DGlobal.com desktop:
6DGlobal.com mobile:
<picture>
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/1200/1-leash.jpg" media="(min-width: 1200px)">
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/992/1-leash.jpg" media="(min-width: 992px)">
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/768/1-leash.jpg" media="(min-width: 768px)">
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/480/1-leash.jpg" media="(min-width: 480px) and (orientation: landscape)">
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/320/1-leash.jpg" media="(min-width: 320px) and (orientation: portrait)">
<source srcset="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/600/1-leash.jpg" media="(min-width: 600px) and (orientation: portrait)">
<img src="http://6dglobal.com/images/blog-media/2017-11-15-the-curious-case-of-cover-images/homepage-heroes/color-heroes/600/1-leash.jpg" >
</picture>Using this technique, overflow of overlaid text needs to be considered carefully.
Designing for cover images
There are a couple easy suggestions for designing for cover style images.
-
Use image that do not require a good deal of space to understand the visual
Bad:
Bad:
Better:
Best:
-
Use large source files that can be manually cropped in both directions (for use with media queries):
Example:
-
Use pattern backgrounds if images must be flexible and reused.
- Alternatively if reusing a non-patterned cover image on multiple breakpoints, when designing try to keep the image at the same ratio (or as close as possible to) the image through all breakpoints.
-
Keep in mind the rule of 3rds and positioning of image. Developers have the option to top, center, or bottom align vertically and left, right, or center align horizontally. The closer and smaller the subject is to that location, the best chance it has to be seen.
Center Center Weighted:
Left Center Weighted:
Center Bottom Weighted:
Right Center (or Right Bottom) Weighted:
So, what are the lessons to be learned here?
There are many variables involving background cover images: image and container ratios, content and container growth, content position and readability, supported devices/viewports, full width and height, responsive elements, and image reuse. Due to these variables using cover images can be tricky at times. With collaboration between designer and developer (or design mind and developer mind), the team can be responsible for ensuring that the website is portraying the message intended especially regarding automatically cropped images. Designers should work closely with developers when designing these visual styles and ask questions when applicable. Developers should be available to designers to create betas or previews for designers as needed.
