Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →You can use any image format that the visitor’s browser can decode; HTML does not define one mandatory list. For ordinary web pages, the main formats to consider are JPEG, PNG, GIF, SVG, WebP, AVIF, and APNG. Choose among them based on image content, transparency, animation, browser support, and file size. If you serve a format that may not work in every target browser, use a <picture> element with a conventional <img> fallback.
What image formats work in HTML?
The <img> element can display an image when the browser understands the file format and can retrieve and decode the resource. The HTML standard does not prescribe a universal set of supported image formats, so browser support can differ. MDN summarizes the practical consequence in its documentation for the <img> element.
For web development, the common formats to evaluate are JPEG, PNG, GIF, SVG, WebP, AVIF, and APNG. The corresponding MIME types are image/jpeg, image/png, image/gif, image/svg+xml, image/webp, image/avif, and image/apng. A MIME type identifies the media format; it does not itself guarantee that a particular browser can display it.
Common formats at a glance
| Format | Typical strengths | Consider it for |
|---|---|---|
JPEG (.jpg, .jpeg and related extensions) |
Lossy compression; commonly used for photographic images. | Photos where transparency is not needed. |
PNG (.png) |
Lossless compression and transparency. | Screenshots, diagrams, line art, or images that need transparency. |
GIF (.gif) |
Broadly compatible and can be animated; generally less efficient than modern animated formats. | Existing or simple animated images where compatibility matters. |
SVG (.svg) |
Vector artwork can remain sharp at different display sizes. | Logos, icons, diagrams, and other vector illustrations. |
WebP (.webp) |
Supports lossy and lossless compression, transparency, and animation; MDN describes its current-browser support as broad. | Modern web images when its compression and feature set suit the asset. |
AVIF (.avif) |
High-performance, royalty-free format with transparency, animation, and high color depth. | Modern image delivery when the intended browsers support it; offer a fallback if coverage is uncertain. |
APNG (.apng or .png) |
Lossless animation. | Animated images when animation quality matters and browser coverage is acceptable. |
These are not interchangeable wrappers around the same image. Their compression, transparency, animation, and scaling characteristics differ. MDN’s image format guide provides further format and browser-support guidance.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →#1 Best Overall
- Easily store and access 2TB to content on the go with the Seagate Portable Drive, a USB external hard drive
- Designed to work with Windows or Mac computers, this external hard drive makes backup a snap just drag and drop
- To get set up, connect the portable hard drive to a computer for automatic recognition no software required
- This USB drive provides plug and play simplicity with the included 18 inch USB 3.0 cable
- The available storage capacity may vary.
How to choose a format for an image
Start with what the image needs to do, rather than choosing a format because it is familiar or has a newer name. A format that saves bytes but fails to display in a visitor’s browser is not a useful optimization.
For photographs
JPEG remains a sensible choice for photographs when you do not need transparency. WebP or AVIF may be a better delivery option when their compression fits your quality requirements and the browsers you need to support can display them. Compare the output at the size visitors will see it: compression settings can trade file size against visible detail, so format alone does not determine the result.
For screenshots, diagrams, and transparent artwork
PNG is a practical option for screenshots, diagrams, line art, and images that need transparency. WebP can also support transparency, so it may be appropriate when you want a modern alternative and have accounted for browser support. Choose based on the visual result and the delivery constraints, not on a blanket rule that one format is always smaller.
Rank #2
- 【Plug-and-Play Expandability】 With no software to install, just plug it in and the drive is ready to use in Windows（For Mac，first format the drive and select the ExFat format.
- 【Fast Data Transfers 】The external hard drives with the USB 3.0 cable to provide super fast transfer speed. The theoretical read speed is as high as 110MB/s-133MB/s, and the write speed is as high as 103MB/s.
- 【High capacity in a small enclosure 】The small, lightweight design offers up to 500GB capacity, offering ample space for storing large files, multimedia content, and backups with ease. Weighing only 0.35 Lbs, it's easy to carry "
- 【Wide Compatibility】Supports PS4 5/xbox one/Windows/Linux/Mac and other operating systems, ensuring seamless integration with game consoles,various laptops and desktops .
- Important Notes for PS/Xbox Gaming Devices: You can play last-gen games (PS4 / Xbox One) directly from an external hard drive. However, to play current-gen games (PS5 / Xbox Series X|S), you must copy them to the console's internal SSD first. The external drive is great for keeping your library on hand, but it can't run the new games.
For logos, icons, and scalable artwork
Use SVG for vector artwork that should remain sharp across different display sizes, such as logos, icons, and diagrams. SVG is not a general-purpose replacement for photographs: choose a format intended for raster images when the source is photographic.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchFor animation
GIF is widely compatible and can still serve simple animations, but it is generally less efficient than modern animated formats. WebP supports animation, and APNG is useful when lossless animation quality matters and the target browser coverage is acceptable. Select based on both the animation’s appearance and the browsers your site must reach.
How to provide image-format fallbacks
A plain <img> element does not list alternative formats for a browser to try. Use <picture> when you want to offer preferred formats in order and retain a fallback image in the nested <img>. The browser selects the first supported source; if it cannot use the offered sources, the nested image is the fallback.
Rank #3
- 【Versatile Storage Expansion – For Gaming, Work & Everyday Use】 Running out of space on your PS5 or Xbox Series X/S? This external hard drive lets you store and play PS4 / Xbox One games directly, instantly freeing up your console’s internal storage for next‑gen titles. At the same time, it handles work file backups, media libraries, and cross‑device data transfers with ease. One drive, all your needs. *（Note: PS5 / Xbox Series X|S games cannot be run or stored directly from the external hard drive. However, by offloading your PS4 / Xbox One games, you can free up valuable space for newer titles.）*
- 【Patented Silicone Sleeve – Data Protection You Can Count On】 Worried about drops? We’ve got you covered. The patented built‑in silicone sleeve acts like a shock‑absorbing armor, cushioning your drive against bumps and falls. Whether it’s important work documents, precious family photos, or hard‑earned game saves, your data deserves this level of protection.
- 【Plug & Play, Compatible with Computers & Consoles】 No complicated setup—just plug in and go. Works seamlessly with Windows, Mac, and Linux computers, as well as PS4, PS5, Xbox One, and Xbox Series X/S. Process files at the office, back up data at home, or enjoy gaming in your downtime—one drive handles all your devices, simply and hassle‑free.
- 【USB 3.0 Ultra‑Fast Transfer – No More Waiting】 Tired of watching progress bars crawl? With USB 3.0 speeds up to 5Gbps, large files transfer in seconds. Whether you’re moving work documents, transferring hundreds of gigs of games, or backing up a year’s worth of photos, you get more done in less time.
- 【Sleek, Lightweight, and Ready to Go】 Weighing just 0.16 kg—lighter than a can of soda—this compact drive features a stylish mirror‑and‑frosted finish. Toss it in your bag and go, whether you’re heading to the office, visiting a friend for a gaming session, or giving a presentation on the road.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description of the image">
</picture>Put the preferred sources before the fallback image. Keep a useful alt value on the <img>; it is the image element that supplies the fallback and text alternative. Replace the example filenames and description with the files and meaningful alternative text for your page.
The optional type on a <source> tells the browser which format that source uses, allowing it to skip a format it does not support. The fallback only helps if the fallback file itself is reachable and decodable. If every candidate is missing or unsupported, there is no working image to display.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsFormats that need a compatibility check
BMP and ICO are recognized by major browsers, but MDN generally regards them as less suitable for ordinary web content. TIFF has limited browser support. JPEG XL support is not universal, so do not rely on it alone when the page must work across a varied browser audience. For these formats, confirm support for the browsers you target and supply a fallback where needed.
Rank #4
- High capacity in a small enclosure – The small, lightweight design offers up to 6TB* capacity, making WD Elements portable hard drives the ideal companion for consumers on the go.
- Plug-and-play expandability
- Vast capacities up to 6TB[1] to store your photos, videos, music, important documents and more
- SuperSpeed USB 3.2 Gen 1 (5Gbps)
Support changes over time, and the formats a browser can display depend on its implementation. When compatibility matters, consult current browser documentation for your audience rather than treating any list as a permanent HTML guarantee. MDN’s image format guide covers these conditional formats alongside the common options.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to verify an image on your page
Check the page in the browsers and viewport sizes that matter to your visitors. Confirm that the image loads, that the intended <picture> candidate is available, and that the fallback file works when a preferred format is unavailable. Also review the image at its rendered size: an image can technically load and still look blurry, cropped, or unexpectedly large.
If you need a saved view of the rendered page for review, ScreenshotNeo is a website screenshot API and MCP server. It can capture a page, but it does not replace testing the image in the browsers you support. For example, this cURL request saves a screenshot of the test page; replace the URL and provide your API key. See the ScreenshotNeo documentation for request options.
Best Value
- [Upgraded Version] - This external hard drive features a mirrored logo stripe combined with a striped anti-slip design, and the rounded corners of the casing make it easier to grip. The stripes also have a heat dissipation function, ensuring stable and fast data transfer.
- 【Ultra-thin and quiet】 - The motherboard adopts JMicron 578 noise-free solution, giving you a quiet working environment. Lightweight and portable size designed to fit in your pocket for easy portability.
- 【Ultra-Fast Data Transfers】 - Pairing this external hard drive with JMicron 578 solution USB 3.0 and USB 2.0 interfaces enables blazing-fast data transfer. It boasts theoretical read speeds of up to 125MB/s and write speeds of up to 103MB/s.
- 【Plug and Play】 - With no software to install, just plug it in and the drive is ready to use.The hard disk chip is wrapped with an aluminum anti-interference layer to increase heat dissipation and protect data.
- 【What You Get】 - 1 x Portable Hard Drive, 1 x USB 3.0 Cable, 1 x User Manual, Gift-type shell packaging ,Three-year manufacturer's warranty and free technical support services.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before a capture; those cleanup steps can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000 screenshots. Sign up for ScreenshotNeo’s free plan.
Common image-format problems and fixes
- The image is broken in some browsers. Check whether those browsers support the selected format. Add a more widely compatible file in a
<picture>fallback rather than assuming HTML will convert the image. - The fallback does not appear. Make sure the fallback is the nested
<img>, itssrcpoints to a real file, and that file can be decoded by the browser. A broken fallback cannot rescue an unsupported preferred source. - The browser selects an unexpected candidate. Check the order of the
<source>elements and theirtypevalues. A browser uses the first source it supports, so placing an alternative first can change which file is chosen. - A file URL loads but the image does not display. Verify that the URL returns the intended image rather than an error page, and that the response and actual file format agree. A filename extension or MIME type is not a substitute for a decodable image.
- The image looks soft or has unwanted artifacts. Inspect the source and output at the displayed dimensions. Lossy compression can affect visual quality; use a lossless or vector format where the image content and requirements call for it.
Practical decision checklist
- Identify the content: photograph, screenshot, diagram, logo, or animation.
- Decide whether you need transparency, lossless detail, animation, or sharp scaling at different sizes.
- Choose a suitable format, then compare the rendered result and file size for your actual asset.
- Check browser coverage for the formats you plan to serve, especially AVIF, APNG, or other less universally supported choices.
- Use
<picture>with an<img>fallback when visitors may not support a preferred format. - Test the page in the browsers and viewports relevant to your audience.
Frequently Asked Questions
Does an image file extension determine whether it will display?
No. The extension labels the file, but the browser still needs to retrieve and decode the image data. A misleading extension or an incorrect server response can cause display problems.
Can the same image use different formats on different screens?
Yes. The <picture> element can offer multiple sources, including candidates for different conditions. The browser chooses among the sources it can use.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
