Skip to main content

Images on the website

Overview​

The data on the website usually has 2 main types: text and images. The text has a message and contains a lot of information and knowledge. But to make an impression on the website must be the image.

The image plays an important and indispensable role for the website. Using a reasonable image on the website will make the website more beautiful, more impressive, more attractive to customers.

Types of image formats​

GIF​

  • GIF stands for Graphics Interchange Format
  • Limited to an 8-bit color palette, with a maximum of 256 colors
  • Uses lossless compression, does not reduce image quality
  • Supports animations, images with transparent backgrounds
  • Suitable for: icons, animations, monochrome images

JPG and JPEG​

  • JPEG, also known as JPG, stands for Joint Photographic Experts Group
  • Multi-color images (16 million colors)
  • Apply lossy compression, which can significantly reduce file size
  • Suitable for images with vivid colors and large sizes

PNG​

  • PNG stands for Portable Network Graphics
  • Supports transparent background better than GIF
  • Compressed according to lossless standards, images after compression still retain quality
  • Usually best used for logo images, images with transparent or semi-transparent backgrounds, images that need to be edited many times

SVG​

  • SVG stands for Scalable Vector Graphics
  • Vector image, can be scaled without affecting image quality
  • Suitable for: icons, logos, images that need to be displayed on many different devices (Smartphone, Rentina)

Webp​

  • File format created by Google in 2010, intended to reduce image size without reducing its quality
  • Reduce image file size (about 20-50%) compared to other file types
  • Summary of strengths of other types of images:
    • GIF animations
    • Transparent images of PNG, GIF
    • JPG compression feature
  • Not yet widely supported, only suitable for use in the web environment
  • Create and edit webp files in photoshop using the plugin WebPShop

How to exports images from design file​

Photoshop​

Illustrator​

XD​

Figma​

note

If you have difficulty extracting images from design files, ask your Mentor for help.

HTML tags contain images​

Img​

  • The img tag is used to embed an image in an HTML page.

  • The img tag has two required attributes:

    • src: specifies the path to the image
    • alt: specifies an alternate text for the image, if the image for some reason cannot be displayed
    <img src="url-img.jpg" alt="Content of the Image">

Figure​

  • The figure tag specifies self-contained content, like photos, diagrams, photos, etc.

  • The figcaption element is used to add a caption for the figure element.

    <figure>
      <img src="url-img.jpg" alt="Content of the Image">
      <figcaption>This is caption of the image</figcaption>
    </figure>

Picture​

  • The picture tag gives web developers more flexibility in specifying image resources.
  • The picture element contains 2 tags:
    • One or more source tags
    • One img tag.

    <picture>
        <source media="(max-width: 1024px)" srcset="url-img-tbl.img">
        <source media="(max-width: 767px)" srcset="url-img-sp.img">  
        <img src="url-img.jpg" alt="#">
    </picture>

Supports Retina, 2K screens​

The Rentina screen is actually still the [IPS LCD] screen (https://newhavendisplay.com/blog/What-is-an-ips-display/), with a high pixel density compared to other screen types, registered exclusively by Apple and only appear on Apple's products such as iPad, iPhone, Macbook ...

Here are some methods for images to support Rentina, 2K screens:

Use SVG files​

SVG is a vector image so it still retains image quality on Rentina, 2K...

note

If the original image is in base64 format, you should not export the file as SVG

Use Icon Fonts​

Icon Fonts are fonts specifically designed to replace images used in website development, such as FontAwesome, Ionicons...

Advantages of Icon Fonts​

  • Change color and size easily
  • Compact file size
  • Support on many browsers and devices

Use 2x image​

A 2x image is an image that is 2 times the size of the image that will be displayed.
For example, if your image is 800px wide and 300px tall, a 2x image will be 1600px wide and 600px tall.

The rule is always use 2x images for website development for SP (Smartphone, Tablet), on PC (Desktop) environment there are often the following common uses:

Use x2 images for all screens​

This method is quite convenient and simple but is not optimized for page loading speed.

<img src="image_2x.jpg" alt="Image description">

Only use x2 images for Rentina, 2K screens​

This method is optimal for page loading speed but requires more time to crop images and knowledge of coding.
Both HTML and CSS have support for handling this problem:

  • Use the srcset attribute of the img tag in HTML

    <img srcset="image@2x.jpg 2x" src="image@1x.jpg" alt="Image description">
     <!-- Lưu ý: IE và Opera Mini không hỗ trợ srcset -->

  • Use image-set attribute in CSS

    background-image: image-set(    
      url(/images/image-lg@1x.jpg) 1x, url(/images/image-lg@2x.jpg) 2x);

    👉 See more about srcset attributes

  • Use picture tag

    <picture>
      <source media="(min-width: 1025px)" srcset="large-image@1x.jpg 1x, large-image@2x.jpg 2x">
      <source media="(min-width: 768px)" srcset="medium-image@1x.webp 1x, medium-image@2x.jpg 2x">
      <img src="small-image@1x.jpg" srcset="small-image@2x.jpg 2x" alt="Image description">
    </picture>

Optimize images for the website​

Compress images​

  • Online compression tools like tinypng, img2go...
  • Gulp or image compression software like Caesium, RIOT...
  • Abobe Apps like Photoshop...

Use the correct format​

  • Photos for articles/products use JPG
  • Logos and icons should use SVG. If SVG cannot be exported, use PNG
  • Images that need a transparent background use PNG

Preload images​

<link rel="preload" as="image" href="url_to_image.png">

You should only preload the largest image that is on the first screen on the site, do not preload multiple images

Only load images that are absolutely necessary​

There is a rather outdated way of coding, which is to load all the images and then use CSS to hide/show those images, like the example below:

HTML
<img class="u-pc" src="large-image.jpg" alt="">
<img class="u-sp" src="small-image.jpg" alt="">
CSS
.u-sp {
  display: none;
}
@media (max-width: 1024px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: inline-block;
  }
}

You should use the picture tag to optimize for this case:

<picture>
  <source media="(max-width: 1024px)" srcset="small-image.jpg">
  <img src="large-image.jpg" alt="">
</picture>

Lazy Loading technique​

Lazy Loading is a technique of only loading data when it is needed.
For example, when a user enters a website, wherever the user scrolls, the website will load data there, without needing to load the page once when loading the page. Currently, there are mainly two ways to apply lazyload to websites:

Use lazyload js library​

Use the html loading="lazy" attribute​

HTML5 has provided the loading="lazy" attribute so we can apply lazyload techniques to websites without the need for javascript libraries.

<img src="url-image.jpg" loading="lazy" alt="">

Tham khảo​