Choosing the Right HTML Image Format
Discover when to use JPG, PNG, GIF, and SVG to make your websites faster, sharper, and more efficient.
/* JPG, PNG, GIF, SVG... */JPEG (.jpg/.jpeg): For Photographs
Best for photographs and complex images with millions of colors. JPEG uses lossy compression, which reduces file size by discarding some image data. This is great for fast page loads but can result in a slight quality loss.
PNG (.png): For Transparency
Perfect for images that require a transparent background, like logos or icons. It uses lossless compression, preserving all image data for higher quality but resulting in larger file sizes compared to JPEG.
GIF (.gif): For Simple Animations
Ideal for simple animations and images with a limited color palette (up to 256 colors). Not suitable for high-quality photos due to its color limitations, but excellent for small, looping animations.
SVG (.svg): For Scalable Vectors
Used for vector graphics like logos, icons, and illustrations. SVGs are XML-based, meaning they are just code! This allows them to be scaled to any size without losing quality and they are typically very lightweight.
Practice Zone
Interactive Test 1: Match the Format
Match each use case to its ideal image format.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Complete the Code
Complete the code to use the correct format for a photo and a logo.
Rellena los huecos en cada casilla.
<img src="landscape."> <img src="logo.">
Practice Example: Code an SVG
Display an image named `icon.svg` with a width of 50 pixels and appropriate alternative text.
Pro-Tip: Optimizing Images for the Web
Choosing the right format is the first step. The next is optimization, which ensures your images load quickly without sacrificing quality.
1. Compression is Key
Before uploading, use a tool like TinyPNG or Squoosh to compress your images. This can reduce file size by over 70% with little visible difference, dramatically speeding up your site.
2. Responsive Images with srcset
Don't serve a giant desktop image to a mobile phone. The srcset attribute lets you provide multiple image sizes, and the browser will automatically pick the most efficient one for the user's screen.
<img src="photo-small.jpg"
srcset="photo-small.jpg 500w,
photo-medium.jpg 1000w,
photo-large.jpg 1500w"
alt="A responsive photo.">3. Lazy Loading
Why load images at the bottom of the page if the user never scrolls down? Add loading="lazy" to your <img> tags. The browser will wait to load the image until it's about to enter the viewport, saving initial load time.
<img src="image.jpg" alt="..." loading="lazy">Practical Takeaway: A fast website is a successful website. Always compress images, use `srcset` for different screen sizes, and implement lazy loading to create the best user experience.
The <img> Tag Glossary
- src
- The **source** attribute. This is mandatory and specifies the path or URL to the image file.
- alt
- The **alternative text**. Crucial for accessibility (for screen readers) and SEO. It describes the image if it fails to load.
- width / height
- Specifies the dimensions of the image in pixels. Setting these helps the browser reserve space for the image, preventing content from shifting as it loads.
- loading
- Controls when the browser loads the image. Set to `"lazy"` to defer loading of off-screen images until the user scrolls near them.
- srcset
- A list of different image sources for the browser to choose from, based on screen size or resolution. Essential for creating responsive websites.