The best format depends on the image content, required quality, delivery requirements and supported browsers.
JPEG
JPEG is commonly used for photographs because lossy compression can substantially reduce file size.
<img src="images/team-photo.jpg"
alt="Team members collaborating at a table"
width="800"
height="533">PNG
PNG is useful for images requiring lossless compression or transparency, such as interface screenshots and some logos.
<img src="images/logo.png"
alt="Codementrix logo"
width="240"
height="80">GIF
GIF supports simple animation but has a limited color palette. For many modern web animations, video or other formats may offer better compression or visual quality.
<img src="images/loading-animation.gif"
alt="Loading animation"
width="100"
height="100">Ensure that an animation conveys useful information or is appropriate as a decorative asset. Avoid distracting or excessively flashing animations.
WebP
WebP supports lossy and lossless compression, transparency and animation. It can be an effective format for modern web image delivery.
<img src="images/product.webp"
alt="Blue product package"
width="600"
height="600">AVIF
AVIF can provide high compression efficiency, especially for photographic content. Always test the quality and performance of the resulting file for your particular use case.
<img src="images/landscape.avif"
alt="Green valley surrounded by mountains"
width="1200"
height="800">SVG
SVG is a vector image format. It is useful for logos, icons and illustrations that must remain sharp at different sizes.
<img src="images/brand-mark.svg"
alt="Codementrix brand mark"
width="160"
height="160">When using SVG files from untrusted sources, treat them as active web content rather than assuming that every SVG is harmless. Prefer trusted assets and avoid embedding untrusted SVG markup directly.
11. Using the Picture Element
The picture element allows the browser to choose among alternative image sources. It can be used to provide different formats or art-directed versions of an image.
This section introduces the concept; advanced responsive image selection using srcset and sizes is covered in the dedicated responsive images lesson.