Align images on the web correctly, manipulate them with CSS and optimize them for search engines like Google

Images on the web have a certain behavior that differs from text containers. Whether you need a background image responsive, so the text on it never goes beyond the picture, or you just want to optimize performance and SEO, we'll show you how to define img tags and background images in CSS3 and HTML5.

We show you what you can do with pictures, what things are impossible and what tricks are in HTML and CSS

// navigation

Blog


// content

Apr, 9. 2018

The source image - format, resolution, compression and filename

The output image is a photo of boats on the sea. It has a resolution of 1620x1080 pixels. This means that it consists of 1620 individual pixels in width and 1080 pixels in height. You can now scale this down to save disk space and bandwidth - an upscaled image does not make any sense, since the quality does not improve! This is because additional information can not be added to the image, but it can be removed. For example, if you want to optimize your page for mobile devices and use the bootstrap standard breakpoint (767px width is the maximum resolution for mobile devices), you could crop the image and get a new width of 767px with the same height of 1080px, for example. However, you lose part of the image because you cut it out. When resizing scaled, however, the entire image is reduced in view of the dimension (for example, 16: 9 in Bluray movies).

You should weigh these two different image reduction methods as appropriate and choose the correct method. For example, if you have chosen the 767x1080px option, your image will not be fully visible in landscape mode (if you tilt your phone to the side), as most mobile devices use about 300 - 500px at the shorter & nbsp; Own page. Even in portrait mode, your picture would only be completely visible if the user scrolls extra, as the longer side of most mobile devices is 800 px long. Here, you can ignore the distinction between dual-resolution retina displays, as this only adds to the quality of each pixel, but it does not detract from the above. Calculation changes.

The file name is boats-at-the-sea.jpg and it is usefully stored in JPG format. You choose this for photos or if there are many different colors in the picture. For large monochrome areas with some text or a small icon on them, choose PNG instead. If you want to present your images state-of-the-art, you can also opt for the brand new WEBP format, which provides better compression while preserving image quality and has been specially designed for the Web (hence the nam

The results of the pictures in the original and limited to 767px width (iPhone 7, portrait and landscape)

As you can see, you get completely different views of the pictures. If the original works well in landscape, it is very small in portrait mode. The newly cropped image with a width of 767px works well on portrait, but only part of the image is visible here at Landscape. These two options can now be combined with media queries or with srcset so that your image is always displayed optimally, but more on that later.

Calculate image dimension correctly

An important indicator for optimal images and their representation is the image dimension. If you go to the movies, for example, the individual pictures are there in the format 21: 9, that is, the width of the image is about 2.33 times longer than the height. For most televisions the format is 16: 9, for some computer monitors 16:10. TV and monitor used to be almost square and had a format of 5: 4 or even 4: 3.

Let's take our example photo with 1620x1080px and we get a dimension of 3: 2 for this image. The broad side is 1.5 times as long as the shorter one. So you should find the right image size, dimension and compression for your particular application, but how does it work?

Choose the right resolution of images on your webpage

Here we come to the most important part of this guide: Determining the right size of your pictures. There are numerous factors, such as whether you want to display the pictures in a lightbox and then zoom in on the original image on the website. In this case, it is definitely advisable to save this enlarged image individually and not just display the fully resolved version when loading the page for the first time.

Choosing the right image size depends heavily on your website and your front-end framework. For example, if you use bootstrap, you have containers that use classes ranging from 1/12 to 100% of the page or of the outer container in width. Here is a relatively simple example: You have a container that fills half the screen to desktop (col-lg-6). Today, despite the first 4k monitors, it is still possible to optimize images for Full HD screens, as they are still the most widely used. Full HD means 1920px in width, of which you use half of it with your framework: 1920/2 = 960. Consequently, your image should have exactly 960px in width to look perfect on desktop and waste no resources (load time, traffic, input Lag, etc.). For mobile devices, however, use the full width (col-xs-12). In this case, it is enough to limit the image to 767px width. Whether you do this as described above and cropping the image or scaling it down (the dimension remains exactly the same) is up to your particular application.

In principle, you then go through your breakpoints per image and container and look at how big the container is at the maximum. This should definitely be enough for your maximum resolution. If you want to enlarge the image by clicking it, you can specify the original source. Pictures should be offered only in exceptional cases (photo studio, printing, wallpaper for 4k monitors) in a larger resolution than 1920x1080px!

Compress images

Of course, you can resize images by the size as described above. Each pixel needs some space and the resolution is multiplied (math: area calculation). A picture with 100x100 pixels has a total of 10,000 pixels. Hence the designation 5M, 8M, 12M for digital cameras - this stands for millions of pixels.

It's better to use tools like kraken.io or Google Pagespeed Insights. So, when you first publish new images, you should check that Google chooses them based on their size. Just go to Google Pagespeed Insights and enter your website URL above. If there is no possibility of optimization in pictures, you have done everything right. If a message appears, you can download the appropriate resources (including JS and CSS) at the bottom of the page for both mobile and desktop devices and share those assets accordingly. Make sure, however, that Google partially synonymous your resolution dynamically adjust and it may come to soggy images on other devices. Better you use kraken.io and set yourself how to optimize your pictures.

Search engine optimization (SEO) for images

Image names should always be created in a meaningful way. Be sure to avoid labels such as DSC902339894.jpg or similar! Avoid underscores and use normal hyphens instead. Stop changing images once you've staggered to Google. Even changing the file size will lead to the immediate ejection of your image. So do not change the entire image path and avoid redirects!

Give each picture an old talking tag that describes the picture for screen readers and search engines like Google or Bing. The old day to our picture is for example "boats by the sea". You can also become more explicit and write "wooden boats on the Atlantic Ocean". Similarly, you can optimize the old tags for your keywords, as long as the picture matches these keywords as well.

Swap images with srcset attributes responsively

Here we show the example bootstrap_package for Typo3 how to exchange several image paths depending on the resolution of the user device. The original source is specified in the data-src for Google to index this path. The other data-large, data-medium and data-small attributes specify the respective dynamically created variant for different devices or resolutions. Almost all modern browsers already support this and if not, the variant in the src attribute is played as a fallback:

html

<img src="/fileadmin/_processed_/a/e/csm_haustuer-alu_1bd483258f.jpg"
data-src="/fileadmin/user_upload/eingangsbereich-alu-haustueren-gelb.jpg"
data-large="/fileadmin/user_upload/eingangsbereich-alu-haustueren-gelb.jpg"
data-medium="/fileadmin/_processed_/a/e/csm_haustuer-alu_f10906ab51.jpg"
data-small="/fileadmin/_processed_/a/e/csm_haustuer-alu_75e6584fc1.jpg"
data-extrasmall="/fileadmin/_processed_/a/e/csm_haustuer-alu_1bd483258f.jpg"
title="Door made of aluminum now buy cheap"
alt="Door made of aluminum"
class="lazyload" data-preload="false" style="opacity: 1;">

Of course you can and should play a dynamic version of your pictures here. This means that you just do not customize each image individually and then upload and embed, but for example cut out or reduce variants using the Fluid Image Viewhelper. This works perfectly with Image Magick, the PHP library that enables image editing on the fly.

The right CSS for optimally functioning images on the Web

Now we become technical and define the standards for the presentation of our images. In principle there are two possibilities:

  • Always show pictures as wide as the container is and in individual cases adjust this width
  • Make pictures as wide as the container pretends

css

/* 1. always 100% width */
img {
width: 100%;
height: auto;
}

/* 2. a maximum of 100% width */
img {
max-width: 100%;
height: auto;
}

Of course, in 99% of cases, we do not want our images to overshoot containers if their resolution is greater than the device or outer wrapper. The differences between the two variants are obvious: If you have many small images (for example, icons, company logos, etc.), you should choose variant two, otherwise all these images are drawn in width to the size of the outer element and You would then have to make overwrites in many places with another class.

In all other cases we recommend the first variant.

With "height: auto" you then specify that the height results dynamically from the respective dimension. Again a short example: Your picture has the resolution 1500x1000px and is now displayed on a mobile device with 400x700px. Since you have not tweaked it, so the original image is still displayed, but you have at least implemented our CSS instructions, this image will now (at col-xs-12 or outside of all bootstrap classes, since it is then based on the device width ) in 400px width. It is thus shown almost four times smaller than egtl. is in width. It is now scaled down in height (height: auto) and is thus about 250px high.

If you do not define height: auto or replace it with fixed values, it may happen that your images are stretched or distorted. You should avoid this in any case, because this type of presentation is already extinct in the 1990s!

Our example picture with fixed height of 150px but 100% width

Boats at the sea

Insert or crop background images via CSS

Many of the above Points do not apply to wallpapers. For example, these are ignored by search engines, so they do not need an old tag. There are also no block elements, but they need a container that determines their height and width. You can also use the text length and then fill in the background image via cover or container the entire container or display the image completely in the container.

What many do not know is that you can also insert background images via CSS. For example, if you look at our banner at the top of the navigation, you'll notice that at lower resolutions, it's not the center of the image that's centered, but the right part of the boat.

This can be achieved via the following statement:

css

element.style {
background-image: url(/fileadmin/user_upload/renoi/article/img/boats-at-the-sea.jpg);
background-position: 80% 50%; /* horizontally set the image to 80% and center vertically */
height: 700px; /* a background image needs a height */
background-size: cover; /* the picture should fill the container completely, it can be cut off something from the picture */
margin-bottom: 80px;
padding: 5%;
margin: 0px auto;
font-size: 200%;
text-align: center;
color: white!important;
}

/* More examples for background-position */
.left {
background-position: 0% 50%
}
.right {
background-position: 100% 50%
}
.bottom-left {
background-position: 0% 0%
}
.top-right {
background-position: 100% 100%
}

Image editing via CSS filter property

If you would like to make further adjustments to your pictures, you can of course do this via Photoshop. It is recommended to use CSS for two reasons. On the one hand, this saves storage space and bandwidth because you do not have to provide the same file several times. Secondly, CSS filters offer the advantage of being able to use animations.

In our example we rotate the color value by 90 degrees in the hover. This makes it possible, for example, for a shop page to select the product color, although you have the image only in a single color. You should deposit all products, for example, in the same shade of gray, in order to be able to choose the colors equally over the same color selection.

Boats at the sea

hmtl

<style>
.filterImg {
transition: 1.5s;
}
.filterImg:hover {
filter: hue-rotate(90deg);
}
</style>

<img src="/fileadmin/user_upload/renoi/article/img/boats-at-the-sea.jpg" class="filterImg" alt="Boats at the sea">
Rating: 4.0. 1 vote(s).
1 anonymous votes
No rating done at all.
Your vote was '' (0 of 5) You are an anonymous user.
You may log on to do personalized votings
Click the rating bar to rate this item Please log on to do ratings

Comments

comments powered by Disqus