Get best of the week

[bookmark] Working with images on the web

One of the decisions that a front-end developer has to make when creating a website concerns the choice of how to include images in web pages. This method may be to use an HTML tag <img>. This can be a CSS property backgroundor <image>element tag <svg>. Choosing the right approach to working with images is very important, as this can greatly affect the performance and availability of the project. The material, the translation of which we publish today, is devoted to the study of various ways of including images in web pages. Here, the advantages and disadvantages of these methods will be discussed. In addition, we will talk about when and why they are usually used.





HTML <img> element


An element <img>in the simplest versions of its use contains only the attribute necessary for its proper operation src:

<img src="cool.jpg" alt="">

▍Setting width and height attributes


If the width and height of the image are not adjusted, then when loading the page and then loading the image, the page layout may need to be rebuilt. In order to avoid this, you can set the attributes widthand heighttag <img>:

<img src="cool.jpg" width="200" height="100" alt="">

Although this approach may slightly remind someone of the “old school”, so to speak, it is actually quite useful. Let’s to better understand this, we will demonstrate the above with an example. Namely, I suggest you watch this short video .


Frame from the video. The image on the left has no width and height. The images on the right are defined.

Here theNetworkbrowser developer toolbar is shown and the process of loading a pair of images is demonstrated. One of them is located on the left, represented by the tag<img>, which attributeswidthandheightare not set. At another values ​​of these attributes are set.

Have you noticed that on the page the space for the right image is reserved even before this image is loaded? It's all about the given attributeswidthandheight. Pay attention to what happens with image captions during the upload process. This is a clear demonstration of the strength of attributeswidthandheight.

→ Here is a working example

▍Hiding the image using CSS


The image can be hidden using CSS. True, such an image is still loaded when the page loads. Therefore, in doing so, caution should be exercised. If a certain image needs to be hidden, then it may be used only for decorative purposes.

Here is the CSS code hiding the image:

img {
    display: none;
}

I repeat: with this approach, the browser will download the image, doing this even if it turns out to be invisible. The point here is that an element <img>is considered a replaceable element , so our ability to manage such an element from CSS is limited.

▍About content availability


The availability of images displayed on pages using an HTML element <img>is ensured by their attributes alt. Such an attribute should contain a clear description of the image. This can be very useful for users using screen readers.

However, if the altimage does not need to be described, this attribute is still not recommended to be deleted. The fact is that if this is done, then the contents of the attribute will be “voiced” src. This is very bad for content accessibility.

But the attribute altis useful not only in the above case. If for some reason the image will not be uploaded and it has an attributealt, then the text from this attribute will be displayed instead of the image. I want to illustrate the above with the following example.

We have a couple of images:

<img class="food-thumb" width="300" height="200" src="cheescake.jpg">
<img class="food-thumb" width="300" height="200" src="cheescake.jpg" alt="">

The attribute srccontains an incorrect address for the image file; this file cannot be loaded by the browser. The first one <img>does not have an attribute alt, and the second one has an attribute in which an empty string is written. How do you think these elements will be displayed on the page?


On the left is an image without the alt attribute. On the right - with the empty alt attribute.

Under the image without the attributealt, page space is reserved, which can confuse the user and impair the availability of content. And another image takes up very little space that is needed to display the "contents" of an empty attributealt. As a result, it looks more like a dot rather than an image. This happens because of theborderimageproperty settings.

However, whenaltsomething is writtenin the attribute, the image will look different.


On the right is the image in the alt attribute of which the text

is written. This is much better than nothing. In addition, if you cannot load the file displayed in<img>, you can add a pseudo-element to it.

▍ Responsive Images



Images of different sizes

The element<img>is good in that it can be configured so that it displays different versions of the image in the viewing areas of the page of different sizes. This, for example, can be used for images used in articles.

A responsive set of images can be customized in two ways.

1. srcset attribute


Here is the image code that uses the attribute srcset:

<img src="small.jpg" srcset="medium.jpg 500w, large.jpg 800w" alt="">

This is a simple example. I do not consider it an ideal solution to use srcsetfor describing images of different sizes displayed on screens with different characteristics. The fact is that in such a situation, the last word remains with the browser, and the developer cannot influence the choice of the browser.

2. HTML picture element


Here is the code that uses the element <picture>:

<picture>
  <source srcset="large.jpg" media="(min-width: 800px)" />
  <source srcset="medium.jpg" media="(min-width: 500px)" />
  <img src="small.jpg" />
</picture>

Another option for creating responsive images is to use an element <picture>. I like this approach more because it is simpler and because it gives more predictable results.

Here is a demo project for this section.

▍ Resizing images



On the left is an image that does not have a CSS object-fit property set. On the right is an image that has this property set with

CSS propertiesobject-fitandobject-positionare great tools that you can use with an element<img>. They give us control over how the content of an element changes and is positioned<img>. This is similar to working with a CSS propertybackground.

The propertyobject-fitcan have the following values:fill,contain,cover,none,scale-down.

Here's how to use it:

img {
    object-fit: cover;
    object-position: 50% 50%;
}

Now that we’ve figured out the element a bit <img>, it's time to move on and master the next image manipulation technique.

CSS property images


When using the CSS property to display images background, you need this property to be applied to an element with some content, or to an element that has dimensions. Usually, the main area of ​​use of this property is decorative elements.

▍How to use the CSS background property


In order to use the CSS property background, we first need an element:

<div class="element">Some content</div>

Then you need a style:

.element {
    background: url('cool.jpg');
}

▍Set multiple images in the background property


A nice feature of images displayed using CSS properties backgroundis that there can be several such images. These images can be manipulated using CSS:

.element {
    background: url('cool-1.jpg'), url('cool-2.jpg');
}

▍Hiding the image


Using CSS, you can hide and show images in a specific viewing area. At the same time, images that will not be displayed will not be uploaded. If the image in CSS is not configured as visible, then it will not load. This is an added advantage of the CSS property backgroundover the element <img>.

@media (min-width: 700px) {
    .element {
        background: url('cool-1.jpg');
    }
}

This example describes a background image that is displayed only when the width of the viewport is larger 700px.

▍About content availability


If images displayed using the CSS property backgroundare not used correctly, this can damage the accessibility of the content. For example, accessibility can be affected by using such an image to bookmark an article, which is vital when working with an article.

▍ Difficulties loading background images by regular users


Ordinary users know that if you need to save a certain image, just right-click on it and select the appropriate context menu command. It may seem funny to you, but with images set using the CSS property background, this technique does not work. Such an image cannot be loaded in the usual way. To download it, you will need to examine the element code in the developer tools and use the link from url.

▍ Pseudo Elements


Pseudo elements can also be used with images defined by the CSS property background. For example, to display one image on top of another. In the case of an element, <img>this can only be achieved using an additional element superimposed on another element.

Now let's talk about using SVG images

SVG images


The main strength of SVG images is the ability to scale them without losing quality. Moreover <svg>, in addition to SVG images , an element can also display JPG and PNG files. Here is the HTML code for the SVG image:

<svg width="200" height="200">
  <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>


JPG image displayed by means of the SVG element

Pay attention to the attributepreserveAspectRatio? Thanks to him, the image occupies the full width and height of the element<svg>, without stretching and not contracting.

If the width of the element is<image>greater, it will fill the parent element (<svg>) in width, but it will not stretch.


Image does not stretch.

This is very similar to how CSS properties workobject-fit: coverorbackground-size: cover.

▍About content availability


If we talk about the availability of content when using SVG images, I can say that such a conversation immediately reminds me of an element <title>. Below is an example of a code in which the <svg>following element is added to the image output by means :

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

Here, moreover, you can use the element <desc>:

<svg width="200" height="200">
   <title>A photo of blueberry Cheescake</title>
   <desc>A meaningful description about the image</desc>
   <image href="cheesecake.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" />
</svg>

▍Difficulties with loading <svg> images by regular users


The image displayed with the help <svg>, you can download only by analyzing its code and getting to the link to the image. This is a minus, but if someone wants to limit the ability of ordinary users to download images, this feature may come in handy. At the very least, this will reduce the chances of downloading such an image.

→ Here is an example for this section

Scenarios for using different image output methods


▍Page section displayed at the top


When designing the page section located in its upper part (such a section is called the “Hero Section”), sometimes it is necessary to make it display an image, on top of which a heading and some other data about the page are displayed. It may look something like the following.


The upper part of the page with the image and the inscriptions

Pay attention to the fact that there is a background image. How would you go about developing such a section of the page? But, before you answer this question, let me formulate some requirements:

  • The image should support easy dynamic change when integrating the page with the backend CMS.
  • An element should be placed over the image to simplify reading the text.
  • It is necessary to support image output in three sizes: small, medium and large. Each of them is intended for its own viewing area.

Before proceeding to the solution of this problem, we ask ourselves about the nature of the background image that will be used here. Here are some supporting questions to help us get to the bottom of this:

  1. Is it important the image from the point of view of the user, or he will not lose anything if it is not visible?
  2. Does this image need to be displayed in viewing areas of all sizes?
  3. Is this image static, or is it dynamically changing (from CMS, for example)?

Consider a couple of options for solving this problem.

The first solution to the problem


Using a CSS property backgroundwith several images defined in it, one of them can be used for an element superimposed on the main image, and the other for representing the image itself. Take a look at this CSS:

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var('landscape.jpg');
    background-repeat: no-repeat;
    background-size: 100%, cover;
}

This approach allows you to achieve what background-imageyou want, you can change it using JavaScript:

<section class="hero" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('landscape.jpg');">
  <!-- Hero content -->
</section>

backgroundI defined the property in an embeddable style. Although this is working code, it looks bad and is impractical.

Maybe you can use CSS variables here?

<section class="hero" style="--bg-url: url('landscape.jpg')">
  <!-- Hero content -->
</section>

Here is the result of a style study.


Study the style of the element

Now, to change the background image, we just need to change the variable--bg-url. This is a million times better than inline styles.

Analysis


  1. The proposed solution to the problem here is only good if the image is not particularly important.
  2. It may be suitable if the image is not planned to be changed dynamically, using the CMS used on the project backend.

→ Here is a working example

The second solution to the problem


Here we will use HTML image output tools:

<section class="hero">
  <h2 class="hero__title">Using Images in CSS</h2>
  <p class="hero__desc">An article about which and when to use</p>
  <img src="landscape.jpg" alt="">
</section>

In CSS, you need to adjust the absolute positioning of the image by placing it below the text. In addition, here we need a pseudo-element that will play the role of the element superimposed on the image:

.hero {
    position: relative;
}

.hero img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

This solution is good because when using it it is very easy to change the image attribute src. In addition, it is better for the case when the output image is important.

In addition, I note that I like about <img>β-images that when using them, you can use backup mechanisms that work if the image file fails to load. Such an auxiliary mechanism, say, output instead of an image of a simple colored background, will at least allow users to read the text:

.hero img {
    /*   */
    background: #2962ff;
  }


The background color displayed if the image fails to load.

The good thing is that the background color is displayed only if the image fails to load. It will suit us.

→ Here is a working example

▍ Website logo


The logo is very important. Logos add uniqueness to sites. In order to display a logo on a page, we can resort to several possibilities:

  • An element <img>that displays a PNG, JPG or SVG image.
  • Built-in SVG image.
  • Background image.

Let's talk about which way to display images should be used for logos, and how to choose exactly what you need.

Logo with many details.


If the logo has many details or contains many shapes, displaying it using the built-in SVG image may not be such a good idea. In such a situation, I recommend using a tag <img>by means of which a PNG, JPG or SVG image is displayed.


Miscellaneous logos

Here is the code to display a similar logo stored in SVG format:

<a href="#"><img src="logo.svg" alt="Nature Food"></a>

Simple logo to animate



Simple animated logo

Consider a situation where there is a simple logo containing a certain figure or text. When you hover over it, you need to change the color of the shape and text. How to do it? It seems to me that in this situation it is best to use the built-in SVG image:

<a href="#">
    <svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#D8D8D8" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="25" font-weight="400" fill="#6F6F6F">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
    </svg>
</a>

Here are the styles:

.logo rect,
.logo text {
  transition: 0.3s ease-out;
}

.logo:hover rect,
.logo:hover text {
  fill: #4a7def;
}

Here is a demo project for this section:

Responsive logo


When I thought of responsive logos, I remembered the Smashing Magazine logo. I like the way its size changes. Here is a layout illustrating the basic logo and the logo displayed in large viewing areas.


Responsive logo

To implement this logo behavior, an element<picture>that allows you to describe two versions of the logo isideal:

<a class="logo" href="/">
    <picture>
      <source media="(min-width: 1350px)" srcset="sm-logo--full.svg"><img src="sm-logo.svg" alt="Smashing Magazine"></picture>
  </a>

In CSS, you need to change the width of the logo in the event that the width of the viewport is equal to or greater 1350px:

.logo {
  display: inline-block;
  width: 45px;
}

@media (min-width: 1350px) {
  .logo {
    width: 180px;
  }
}

Before us is a simple and understandable solution to the problem of responsive logos.

→ Here is a working example for this section

Logo with gradient



An example of a logo with a gradient

When working with logos that have a gradient, you need to be aware that exporting such a logo from a design application, such as Adobe Illustrator or Sketch, can be far from perfect. During this process, something in the logo may break.

When using the SVG format, you can easily apply a gradient color to the logo. In the following example, I used<linearGradient>, setting with it the text attributefill:

<svg class="logo" width="115" height="47" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="100%" x2="0%" y2="0%">
        <stop offset="0%" stop-color="#4a7def"></stop>
        <stop offset="50%" stop-color="#ab4787"></stop>
      </linearGradient>
    </defs>
      <g transform="translate(-5 -5)" fill="none" fill-rule="evenodd">
        <rect fill="#AB4787" transform="rotate(45 28.5 28.5)" x="9" y="9" width="39" height="39" rx="11" />
        <text font-family="Rubik-Medium, Rubik" font-size="30" font-weight="400" fill="url(#gradient)">
          <tspan x="63.923" y="36.923">Rect</tspan>
        </text>
      </g>
</svg>

→ Here is an example

▍Avatar user


Avatars come in many shapes, but usually square or round avatars. In this example, I want to share one important piece of advice that you might find useful.

To get started, take a look at the following layout. Please note that there are two neat avatars with clear edges.


A pair of successful avatars

And what if the user, as an avatar, decides to use a picture with an almost white background? If so, then the avatar will look far from so good.


Unsuccessful avatar

Note that the previous image shows an avatar with a very bright background. As a result, in order to understand that it has a round shape, one has to look closely at it. This is bad. In order to fix this problem, you need to add an inner border to the avatar. This border will be used as an auxiliary solution, applied when the image is too bright.


On the left is an avatar with too light a background. On the right is the result of solving this problem. There

are several ways to solve this problem:

  • Using <img>.
  • Using <img>and auxiliary element <div>.
  • Using <div>and CSS properties background.
  • Using <image>c <svg>.

What fits best here? Let's find out.

Using <img>


How to solve this problem? Maybe - just adjust the border of the element? We are exploring this possibility (I immediately apologize for the fact that below you will often see my photo).

Here is the CSS:

.avatar {
    border: 2px solid #f2f2f2;
}

Here is how it looks.


The result was not as expected: the dark border is located outside the borders of the image.

What happened does not suit us. We need the image to have an inner border that merges with the dark image. As a result, it turns out that setting the border of the element will not help us here.

Using <img> and the helper <div>


Let me remind you that we are faced with the task of adding an inner shadow to the image. We cannot solve this problem using the inner shadow ( box-shadow) and the keyword inset, since HTML elements <img>do not support the inner shadow. To solve this problem, you need to put an avatar in an element <div>and use another element, the sole purpose of which is to draw an internal border.

Here is the HTML code:

<div class="avatar-wrapper">
     <img class="avatar" src="shadeed2.jpg" alt="A photo of Ahmad Shadeed">
     <div class="avatar-border"></div>
</div>

Here are the styles:

.avatar-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
}

.avatar-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

If the element <div>has a border painted in 10% black, this will ensure that such a border will not be visible in the dark image, and will be noticeable in the light, highlighting its border. Here is how it looks.


The inner border, visible only in bright images

→ Here is an example for this section

Using <div> and the CSS background property


If I used an element to display the avatar <div>, it would probably mean that the image plays a decorative role. One example comes to my mind, shown below. Here, various avatars are simply scattered across the page.


Avatars scattered around the page. The

HTML here will be:

<div class="avatar" style="--img-url: url(shadeed2.jpg)"></div>

Here is the style:

.avatar {
  background: var(--img-url) center/cover;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(#000, 0.1);
}

Here you can find a working example.

Using <image> in <svg>


I believe that this is the most interesting solution to our problem. I discovered this trick while studying the new Facebook design .

Here is the markup:

<svg role="none" style="height: 36px; width: 36px;">
  <mask id="avatar">
    <circle cx="18" cy="18" fill="white" r="18"></circle>
  </mask>
  <g mask="url(#avatar)">
    <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image>
    <circle cx="18" cy="18" r="18"></circle>
  </g>
</svg>

First, let's parse this code. Here is what it is:

  1. A mask cropping a circle image.
  2. The group to which the mask applies.
  3. The image itself with the attribute preserveAspectRatio=«xMidYMid».
  4. A circle that is used as an internal border.

Here's how it is styled:

circle {
  stroke-width: 2;
  stroke: rgba(0, 0, 0, 0.1);
  fill: none;
}

→ Here you can find an example

With the avatars, we figured it out. Therefore, we move on.

▍ Input field with icon


Here is an example of an input field with an icon.


Input field with an icon

Such fields are quite common. How to equip a field with an icon? What happens when such a field receives focus? Explore these issues.

Here is the HTML code:

<p>
    <label for="name">Full name</label>
    <input type="text" id="name">
</p>

I believe the best solution to this problem is to use background images defined by CSS. It is simple, fast and does not require additional HTML elements:

input {
    background-color: #fff;
    background-image: url('user.svg');
    background-size: 20px 20px;
    background-position: left 10px center;
    background-repeat: no-repeat;
}

You can use a URL-encoded SVG image to change the color of the icon when the field receives focus. It is very easy to do. For example, this tool is designed for this purpose , developed by Yoksel.

Here is an example.

▍CSS styles for printing


A page visitor may need to print it on a printer. Suppose there is a culinary recipe on the page, and you need to print it out so that you do not have to constantly look into the phone or computer in the kitchen.

If there are steps in the recipe illustrated with pictures, it is important that they fall into its printed version, otherwise the one who prints the page will not be able to use the recipe.

Try not to include in pages intended for printing images displayed using the CSS property background


If the image is included in the page using the CSS property background, then it will not be printed. The place where it was displayed will be empty when printing. This is what I am talking about.


Empty spaces instead of images included in the page using the CSS background property

There will be little use for such a printed version of the recipe. This can be fixed by forcing the browser to display similar images in the print version of the page. But this approach does not work in Firefox and in IE. Here's what it looks like in CSS:

.element {
    background: url('cheesecake.png') center/cover no-repeat;
    -webkit-print-color-adjust: exact; /*        */
}

In such situations, it is best to use an HTML element <img>. Images included in the page using this element are printed without problems.

→ Here is an example

Summary


Today we talked about different ways to include images in web pages, discussed their pros and cons, and examined scenarios for their use. We hope you find it useful what you learned today.

Dear readers! Have you encountered problems displaying images on web pages?

More articles:


All Articles