Web Images: Practical Optimization Guide by LUMINETH

In this tutorial, we'll take a step-by-step look at how to convert your images so that they're optimised for the web, how to generate different sizes to ensure compatibility with screens of all types, and how to integrate them effectively into a website. Whether you're a beginner or already have some basic knowledge of web development, this guide will explain in a simple and accessible way all the essential techniques for working with images on the web.

Introduction

Images play a vital role in modern web design. They enhance the user experience, tell a visual story and contribute to a brand's visual identity. However, if poorly optimised, they can considerably slow down the loading of a site and harm its SEO. That's why it's crucial to know how to convert, resize and integrate images effectively.

In this article, we'll cover the following points:

• Choosing the appropriate image format (JPEG, PNG, SVG, WebP).
• Use tools to convert and resize your images.
• Integrate your images into your website as a <img> element or as a CSS background.
• Apply optimised loading techniques (lazy loading, responsive images, etc.).
• Use workflows and automation tools to improve your productivity.

1. Choosing the right image format

Choosing the image format is the first step in ensuring that your images display correctly and load quickly. Here are the most commonly used formats:

1.1 JPEG

JPEG (Joint Photographic Experts Group) is ideal for photographs and images with lots of gradients. It provides efficient compression while maintaining acceptable image quality. However, compression is destructive, meaning that too high a quality can result in a loss of detail.

1.2 PNG

PNG (Portable Network Graphics) is perfect for images that require transparency or for simple graphics such as logos and icons. Although PNG files are often larger than JPEGs, they offer superior image quality for images with few colours.

1.3 SVG

SVG (Scalable Vector Graphics) is a vector format that adapts to any resolution without loss of quality. It is ideal for logos, icons and other simple graphics. SVGs can be manipulated using CSS and JavaScript, making them extremely flexible.

1.4 WebP

WebP is a relatively new format that combines the advantages of JPEG and PNG. It offers superior compression for photographic images while allowing transparency. Many modern browsers support WebP, making it an excellent choice for improving performance.

2. Convert and resize your images

Once the format has been chosen, the next step is to convert your images to the optimum format and create several sizes to ensure responsiveness on all devices. Here are some methods and tools for doing this.

2.1 Using online tools

There are many free online tools that allow you to easily convert and resize your images. Here are some popular options:

• Convertio - A versatile online conversion tool that supports many formats.
• TinyPNG - Ideal for compressing PNG and JPEG images with no visible loss of quality.
• ImageOptim - An online tool for optimising your images before you post them online.

To use these tools, all you usually have to do is upload your image, choose the format or size you want, then download the result.

2.2 Using desktop software

If you prefer to work offline, software such as Adobe Photoshop, GIMP or Affinity Photo offer powerful features for converting and resizing your images.

Example with GIMP:

1. Open your image in GIMP.
2. Go to File > Export as....
3. Choose the desired format (for example, .jpg, .png, or .webp) in the File type field.
4. Click Export and adjust the quality settings as required.

2.3 Converting to the command line with ImageMagick

For developers or those who want to automate the process, ImageMagick is an extremely powerful command-line tool.

For example, to convert an image to WebP with 80-quality compression, you can use the following command:

  Copy code
  
  convert input.jpg -quality 80 output.webp
  
    

To resize the image to 800px wide, you can add the option -resize 800x :

  Copy code
  
  convert input.jpg -resize 800x -quality 80 output.webp
  
    

You can also create multiple sizes for a responsive site by combining these commands in a script.

3. Creating image sizes for responsive design

A modern website needs to adapt to all devices, from mobile phones to large computer screens. To do this, it's essential to serve images of different sizes depending on the screen resolution. This saves bandwidth and improves loading speed.

3.1 The srcset and sizes

The HTML element <img> offers two important attributes: srcset and sizes. These attributes allow the browser to choose the best version of the image depending on the screen size.

Here's a simple example:

  Copy code
  
<img
  src="small.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
  alt="Image description">
  
    

In this example, the browser will select the appropriate image based on the width of the screen.

3.2 The <picture>

For even finer control, you can use the <picture> element, which allows you to specify different formats for different media.

Usage example:

  Copy code
  
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Image description">
</picture>
  
    

The browser will use the WebP image if the format is supported, otherwise it will use JPEG.

4. Integrating your images into your website

Once your images have been converted and resized, it's time to integrate them into your website. There are two main techniques available to you: embedding as a <img> element and using images as a background via CSS.

4.1 Using the <img>

This is the most common method of inserting images into a web page. Here are a few tips:

• Always use the alt attribute to provide a text description of the image for accessibility and SEO.
• Serve different versions via srcset to improve performance on mobile.
• Make sure images are sized correctly to avoid unnecessary resizing in the browser.

4.2 Using images in the background via CSS

Sometimes you'll want to use an image as the background of an element to create design effects. Here's a simple example:

  Copy code
  
.my-section {
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
  
    

You can also use advanced techniques such as adding a gradient to improve the legibility of the text over the image.

  Copy code
  
.my-section {
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('background.jpg') no-repeat center center;
  background-size: cover;
}
  
    

5. Techniques for optimised image loading

Even with well-converted and resized images, loading them can impact your site's performance. Here are some techniques for optimising their loading:

5.1 Lazy loading

Lazy loading allows images to be loaded only when they enter the user's field of vision. This reduces the initial page load time and saves bandwidth.

Since HTML5, the loading="lazy" attribute has been supported by many browsers:

  Copy code
  
<img src="image.jpg" alt="Description" loading="lazy">
  
    

For more advanced solutions, you can use JavaScript libraries like LazyLoad.

5.2 Using WebP format and progressive images

Images in WebP format and progressive JPEG images often load faster. WebP format, as explained above, offers good quality with a small file size. Progressive JPEG images display a low-resolution version of the image while fully loaded.

5.3 Pre-loading and pre-connection

You can also use HTML tags to preload important resources. For example, to preload a critical image, use :

  Copy code
  
<link rel="preload" href="image-critical.jpg" as="image">
  
    

5.4 Optimising via CSS for backgrounds

For images used as backgrounds, it may make sense to use a small replacement image as a placeholder, then load the full image as a background via JavaScript or using CSS transition effects.

  Copy code
  
.placeholder {
  background: url('placeholder.jpg') no-repeat center center;
  background-size: cover;
}
.loaded {
  transition: background 0.5s ease-in-out;
  background: url('large-image.jpg') no-repeat center center;
  background-size: cover;
}
  
    

6. Workflows and automation tools

To avoid manually repeating conversions and resizing of your images, it is advisable to automate the process using tools and scripts.

6.1 Using Gulp to automate image processing

Gulp is a JavaScript task runner that automates repetitive tasks. You can use plugins like gulp-imagemin to compress your images and gulp-responsive to generate multiple sizes.

Example Gulp task:

  Copy code
  
// gulpfile.js
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const responsive = require('gulp-responsive');
gulp.task('images', function () {
  return gulp.src('src/images_lumineth_lumineth_lumineth_lumineth_lumineth/*.{jpg,png}')
    .pipe(responsive({
      '*': [
        { width: 480, rename: { suffix: '-480w' } },
        { width: 800, rename: { suffix: '-800w' } },
        { width: 1200, rename: { suffix: '-1200w' } }
      ]
    }, {
      // Global configuration for all images
      quality: 80,
      progressive: true,
      withMetadata: false,
      errorOnEnlargement: false
    }))
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images_lumineth_lumineth_lumineth_lumineth_lumineth_lumineth'));
});
  
    

This script generates three sizes for each image, compresses them and saves them in the dist/images_lumineth_lumineth_lumineth_lumineth_lumineth folder.

6.2 Integration with Webpack

For more modern projects, Webpack can be configured to process images automatically using loaders such as image-webpack-loader and responsive-loader.

  Copy code
  
// webpack.config.js (extract)
module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        use: [
          {
            loader: 'responsive-loader',
            options: {
              adapter: require('responsive-loader/sharp'),
              sizes: [480, 800, 1200],
              placeholder: true,
              quality: 80
            }
          },
          image-webpack-loader
        ]
      }
    ]
  }
};
  
    

7. Best practice for web images

Here are some general recommendations for optimising your images for the web:

• Optimising size: Always compress your images to reduce loading time. Use compression tools without sacrificing too much quality.
• Use modern formats: If possible, opt for WebP, which combines good quality with a small file size.
• Responsive design: Serve images adapted to the screen size using srcset and <picture>.
• Lazy loading: Use the loading="lazy" attribute or JavaScript solutions to defer the loading of non-critical images.
• Use of vector images: For simple graphics, favour SVG so that they remain sharp at all resolutions.
• Automation: Use tools such as Gulp or Webpack to automate the conversion and optimisation process.

8. Tips for integrating images as backgrounds

Background images offer some interesting design possibilities. Here are a few techniques:

8.1 Background with CSS

To set an image as a background, use the CSS property background-image. You can also add gradients to improve contrast with the text.

  Copy code
  
.background-section {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('background-large.jpg') no-repeat center center;
  background-size: cover;
  padding: 50px 20px;
  color: #fff;
}
  
    

This technique is ideal for banners and page sections where the text needs to be legible over an image.

8.2 Using SVG images as a background

SVG vector images can also be used as backgrounds. They are perfect for patterns or illustrations that need to remain sharp at all sizes.

  Copy code
  
.svg-background {
  background-image: url('pattern.svg');
  background-repeat: repeat;
  background-size: 50px 50px;
}
  
    

You can easily customise the size and repetition of your SVGs to get the effect you want.

9. Advanced techniques and tips

In addition to the basics, here are some advanced techniques that can help you get the most out of your web images:

9.1 Using placeholders and progressive loading

To improve the user experience, especially on slow connections, you can display a placeholder (a very light or blurred version of the image) before the full image loads.

  Copy code
  
img.lazyload {
  filter: blur(10px);
  transition: filter 0.5s;
}
img.lazyloaded {
  filter: blur(0);
}
  
    

JavaScript libraries such as Vanilla LazyLoad make it easy to implement this technique.

9.2 Server-side optimisation

Another trick is to configure your server to automatically compress images or to use CDNs (Content Delivery Networks) that offer optimised versions of images based on the user's device.

For example, services such as Cloudinary allow images to be dynamically managed, resized and compressed without manual intervention.

9.3 Testing and monitoring performance

Finally, it's essential to test the performance of your pages to ensure that images don't slow down loading. Use tools such as Google PageSpeed Insights, Lighthouse or GTmetrix to analyse and improve your site's loading speed.

Points to remember

10. Conclusion

In summary, converting and optimising images for the web are essential steps in improving the performance, accessibility and user experience of your site. By choosing the right format, creating resized versions and using optimised loading techniques, you can significantly reduce loading times and ensure that your content displays correctly on all devices.

Whether you use online tools, desktop software or command-line solutions such as ImageMagick, the methods presented here are designed to be accessible even to those with only basic knowledge. With a little practice, these techniques will become second nature and allow you to create faster, better websites.

Don't forget to test your images and adjust your tools according to the specific needs of your project. Automation with tools like Gulp or Webpack can save you precious time and ensure that each image is optimised for the best possible rendering.

Appendix: Code examples and additional tips

Here are some additional examples and tips to help you get started quickly.

Example of embedding a responsive image

  Copy code
  
<picture>
  <source srcset="image-800w.webp" type="image/webp">
  <source srcset="image-800w.jpg" type="image/jpeg">
  <img src="image-800w.jpg" alt="Example of responsive image" loading="lazy">
</picture>
  
    

Resizing example with ImageMagick

  Copy code
  
# Convert a JPEG image to WebP at 80% quality
convert input.jpg -quality 80 output.webp
# Resize the image to 800px wide before conversion
convert input.jpg -resize 800x -quality 80 output.webp
  
    

Use lazy loading in HTML

  Copy code
  
<img src="example.jpg" alt="Optimised image" loading="lazy">
  
    

Optimisation via CSS for a background with gradient

  Copy code
  
.background-section {
  background: linear-gradient(45deg, rgba(29,33,69,0.7), rgba(214,46,73,0.7)),
              url('background-large.jpg') no-repeat center center;
  background-size: cover;
}
  
    

These code snippets illustrate the key points of the tutorial. Feel free to adapt them to your project.

Additional resources

To expand your knowledge and discover other tips, check out the following resources:

• Google PageSpeed Insights - To analyse the performance of your pages.
• ImageOptim - A tool to compress your images.
• Responsive Images in Practice - A detailed article on responsive images.
• Lazy Loading Guide - A comprehensive guide to lazy loading.
• Cloudinary - An online image management service to automate optimisation.

Final conclusion

Managing images effectively for the web is a major asset for any web developer or designer. By following this tutorial, you have learned how to convert your images to the correct format, create multiple sizes for a responsive design, integrate these images into your website, and finally, apply advanced techniques to optimise their loading.

With this knowledge, you'll be able to significantly improve the performance and aesthetics of your site. Adopt these best practices today to offer your visitors a fast and pleasant user experience.

Thank you for reading this comprehensive tutorial. Feel free to share your own tips and experiment with different tools to find the solution that best suits your needs.