When adding images to your website, choosing the right format and optimizing them are key to making your site fast and visually appealing. Here’s a simple guide.

Common Image Formats

JPEG (.jpg or .jpeg)

• Best for: Photos and images with lots of colors.
• Pros: Good quality, smaller file size.
• Cons: Loses quality with each edit.

Example:

<img src="https://codersmile.com/images/photo.jpg" alt="A beautiful landscape">

PNG (.png)

• Best for: Graphics, logos, and images with transparency.
• Pros: High quality, supports transparency.
• Cons: Larger file size.

Example:

<img src="https://codersmile.com/images/logo.png" alt="CoderSmile logo">

GIF (.gif)

• Best for: Simple animations and images with few colors.
• Pros: Supports animation, small file size.
• Cons: Limited color palette.

Example:

<img src="https://codersmile.com/images/animation.gif" alt="Simple animation">

SVG (.svg)

• Best for: Icons and logos.
• Pros: Scalable without losing quality, small file size.
• Cons: Not for complex images.

Example:

<img src="https://codersmile.com/images/icon.svg" alt="CoderSmile icon">

WEBP (.webp)

• Best for: All types of images.
• Pros: Small file size, good quality, supports transparency and animation.
• Cons: Not supported by all browsers.

Example:

<img src="https://codersmile.com/images/photo.webp" alt="A beautiful landscape"> 

Image Optimization

Optimizing images helps your website load faster and improves user experience. Here are some tips:

Compress Images

• Use tools like TinyPNG or JPEGmini to reduce file size without losing quality.

Resize Images

• Upload images at the size you need. Use HTML width and height attributes or CSS to control display size.

Example:

<img src="https://codersmile.com/images/photo.jpg" alt="A beautiful landscape" width="800" height="600">

Use Responsive Images

• Ensure images look good on all devices using srcset and sizes.

Example:

<img src="https://codersmile.com/images/photo.jpg" alt="A beautiful landscape"
     srcset="https://codersmile.com/images/photo-small.jpg 500w,
             https://codersmile.com/images/photo-medium.jpg 1000w,
             https://codersmile.com/images/photo-large.jpg 1500w"
     sizes="(max-width: 600px) 500px,
            (max-width: 1200px) 1000px,
            1500px">

Use Lazy Loading

• Load images only when they are about to enter the viewport to save bandwidth and speed up the initial page load.

Example:

<img src="https://codersmile.com/images/photo.jpg" alt="A beautiful landscape" loading="lazy">