We use cookies to enhance your experience on the site
Privacy Policy
OK
CodeWorlds

Image Optimization

From the very beginning, it's good to take care of elements that can be huge and won't fit on mobile devices.

We can prevent images from displaying wider than the screen width:

1img {
2  max-width: 100%;
3}

When an image is 500px wide and the tablet size is 767px, the image will be displayed at its original size. When an image is 500px wide and the phone size is 320px - the image will be displayed with a width of 320px.

An alternative to 

max-width
is 
max-height
. There are also counterparts: 
min-width
and 
min-height
.

It's best not to set section and div heights using height, but rather 

min-height
. When we have three columns in a section, we'll aim for one to display below the other. Try not to set a fixed height for the parent.

The srcset attribute in HTML5 allows you to specify different versions of an image for different screen resolutions. The browser will automatically choose the appropriate image depending on the screen size and pixel density.

1<img  srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Sample image">

The <picture> Tag

Using the <picture> tag, we can decide from the HTML level which image to load at a given width:

1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="image">
5</picture>

Our picture element has source elements with the media attribute and a media queries rule (more on this in a moment).

For the range above 960px, we'll display image-large.jpg. For the range above 575px, we'll display image-medium.jpg. The range that doesn't meet the above conditions is below 575px - in that case, we'll display image-small.jpg.

3. Compression and Format Optimization

Before uploading images to the page, it's recommended to compress them. There are tools and online services that can help with this task. Choosing the right image format, such as JPEG, PNG, or newer formats like WebP, can also affect file size.

It's worth knowing that vector elements don't lose quality when scaling. A small icon on a page can be scaled up as a skyscraper advertisement. When scaling jpg, png (bitmap) images to huge sizes, you'll see visible pixels: img

Task: Image Optimization on a Website

In this task, you'll learn how to effectively manage images on a website to improve its performance and responsiveness. We'll apply various techniques, such as using CSS properties, HTML attributes, and the 

<picture>
tag, to adapt images to different devices and screen resolutions.

Step 1: Create a basic HTML document structure

Create a new HTML file and add the basic HTML document structure. Add several images in different sections of the page.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Image Optimization</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Image Gallery</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Images with srcset attribute</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Sample image">
18    </section>
19    <section class="gallery">
20      <h2>Images using the <picture> tag</h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Sample image">
25      </picture>
26    </section>
27  </main>
28  <footer class="footer">
29    <p>&copy; 2023 Image Gallery. All rights reserved.</p>
30  </footer>
31</body>
32</html>

Step 2: Create a CSS file

Open or create a new CSS file and save it as 

styles.css
.

Step 3: Basic styling

Add basic styles for 

.header
, 
.main
, 
.gallery
, and 
.footer
elements.

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Step 4: Add Image Compression and Format Optimization

Before placing images on the page, compress them and save them in appropriate formats, such as JPEG, PNG, or WebP. You can use online tools, such as TinyPNG, ImageOptim, or Squoosh, to optimize image file sizes without significant quality loss.

Usage examples:

  1. srcset attribute:
1<img srcset="image-small.jpg 500w,
2             image-medium.jpg 1000w,
3             image-large.jpg 1500w"
4      src="image-medium.jpg" alt="Sample image">
  1. <picture> tag:
1<picture>
2  <source media="(min-width: 960px)" srcset="image-large.jpg">
3  <source media="(min-width: 575px)" srcset="image-medium.jpg">
4  <img src="image-small.jpg" alt="Sample image">
5</picture>

Step 5: Add Vector Elements

Use vector elements, such as SVG, whenever possible, so that images are scalable without quality loss. Add a sample SVG file to the section.

1<section class="gallery">
2  <h2>SVG Vector Image</h2>
3  <img src="example.svg" alt="Sample vector image">
4</section>

HTML File (index.html) - Final version:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Image Optimization</title>
8</head>
9<body>
10  <header class="header">
11    <h1>Image Gallery</h1>
12  </header>
13  <main class="main">
14    <section class="gallery">
15      <h2>Images with srcset attribute</h2>
16      <img srcset="image-small.jpg 500w, image-medium.jpg 1000w, image-large.jpg 1500w"
17           src="image-medium.jpg" alt="Sample image">
18    </section>
19    <section class="gallery">
20      <h2>Images using the <picture> tag</h2>
21      <picture>
22        <source media="(min-width: 960px)" srcset="image-large.jpg">
23        <source media="(min-width: 575px)" srcset="image-medium.jpg">
24        <img src="image-small.jpg" alt="Sample image">
25      </picture>
26    </section>
27    <section class="gallery">
28      <h2>SVG Vector Image</h2>
29      <img src="example.svg" alt="Sample vector image">
30    </section>
31  </main>
32  <footer class="footer">
33    <p>&copy; 2023 Image Gallery. All rights reserved.</p>
34  </footer>
35</body>
36</html>

CSS File (styles.css) - Final version:

1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4  padding: 0;
5  background-color: #f0f0f0;
6}
7
8.header {
9  background-color: #333;
10  color: #fff;
11  padding: 20px;
12  text-align: center;
13}
14
15.main {
16  padding: 20px;
17}
18
19.gallery {
20  margin-bottom: 40px;
21}
22
23img {
24  max-width: 100%;
25  height: auto;
26}
27
28.footer {
29  background-color: #333;
30  color: #fff;
31  text-align: center;
32  padding: 10px;
33}

Additional task

  1. Add more images to the gallery and experiment with different 
    srcset
    and 
    <picture>
    values to see how the image layout changes.
  2. Test your skills by adding images in different formats (JPEG, PNG, WebP) and check how it affects the page's performance.
  3. Add different styles to images, e.g., changing colors, font sizes, and other element properties, to better understand how different CSS options work.
  4. Add animations to images to add interactivity and a better user experience.
Go to CodeWorlds→