Member Avatar for GordonUK

Hi there,

Can anyone tell me what is the best file format to use when you are uploading images on a website? I want the pages to load as quickly as possible but also want to have a few images on each page and just wanted to know the best type of file format to use for the images?

Many thanks.

  • 8 Contributors
  • 10 Replies
  • 298 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jbennet

Dani AI

Generated

Short, practical update for based on the thread: several replies here (for example , and ) correctly point out that the choice depends on the image. Today the best practice is a use-case approach plus serving “next‑gen” formats when possible: prefer AVIF/WebP for photographs to save bytes, SVG for scalable icons/illustrations, and keep JPEG/PNG as fallbacks for full compatibility. (web.dev)

A simple rule set to follow:

  • Photos: produce AVIF/WebP variants and fall back to JPEG for older clients.
  • Vectors/icons: use SVG (keeps file size tiny and scales cleanly).
  • Flat, small palette images: PNG‑8 (or optimized PNG) can be fine; avoid GIF for long animations — use video or animated WebP/APNG.
    These recommendations come from current web performance guidance and format testing. (web.dev)

Practical workflow you can apply now (fast wins):

  1. Resize images to the pixel dimensions they’ll render at (don’t rely on DPI). @jaminit was right to highlight resizing — be precise about pixels.
  2. Create one or two responsive sizes (thumb, medium, large).
  3. Encode with modern tools (libavif / cwebp / mozjpeg or Squoosh for quick visual tests).
  4. Serve formats with the <picture> pattern so browsers pick AVIF/WebP when supported and fall back to JPEG/PNG: 
<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="..." width="1200" height="800" loading="lazy">
</picture>

Use responsive srcset/sizes and include width/height to avoid layout shift; the <picture>/srcset pattern is the recommended method. (developer.mozilla.org)

Performance tips and cautions: lazy‑load non‑critical images (loading="lazy"), serve optimized images via a CDN or server-side Accept‑header negotiation (set Vary correctly), and measure with Lighthouse/PageSpeed to find the biggest wins. Don’t generate dozens of tiny variants (cache costs increase); generate a reasonable set and rely on CDNs for format negotiation where possible. (developer.mozilla.org)

If deeper help is needed: produce one representative image and compare bytes/visual quality across encoders (AVIF, WebP, JPEG) before rolling out changes site‑wide.

Recommended Answers

All 10 Replies

Member Avatar for samarudge

There is no official "Best" format but most people preffer .PNG (Allows transparency also small file size)
Its between PNG and JP(E)G but its more up to personal prefference

Member Avatar for GordonUK

Hi Samarudge,

Thanks for that. I have heard differing reports about which file format is smaller the PNG or the Jpeg. Some people say that the PNG file format is bigger in size to the comparable Jpeg format.

The website im working on im looking to improve the loading times on the web pages so need to reduce the size of the images whilst maintaining the quality of them and so this is why i need this help. And I just wanted to know if there is any other way of reducing the loading times of web pages whilst keeping the same amount of images on the page.

Many thanks.

Member Avatar for samarudge

Hi Samarudge,

Thanks for that. I have heard differing reports about which file format is smaller the PNG or the Jpeg. Some people say that the PNG file format is bigger in size to the comparable Jpeg format.

The website im working on im looking to improve the loading times on the web pages so need to reduce the size of the images whilst maintaining the quality of them and so this is why i need this help. And I just wanted to know if there is any other way of reducing the loading times of web pages whilst keeping the same amount of images on the page.

Many thanks.

There are many ways to increase page load time, most of them are described in the Yahoo developer docs at http://developer.yahoo.com/performance/rules.html

Member Avatar for jaminit

You could also look at how to optimise images for web, using Photoshop or some other image editor. The physical size (0x0) of an image and its byte size (dpi) can greatly affect loading time. The image should be reduced to the size it will appear on the web page. I found this link which goes into more detail

http://inobscuro.com/tutorials/read/35/

Member Avatar for fungurudel

I will go with gif for non photo images and jpg for images with are photographs or a lot of color gradients. You can always reduce the quality for both gif and jpg to optimize the page.

Member Avatar for DriftingSteps

Hey Gordon,
For pictures and background of things, scenery, portraits, etc. - .jpeg is the best.
For repeating background [gradient, patterns, etc] - .gif will do best [the image should have color values within 256 ]
For images with transparency, you should save the image in .png [PNG-24 for best results]
Hope this helps.

Let me know if you need more help.

~DriftingSteps

Member Avatar for officerange123

Hi...gif is the best file format for image png is the also good...

Member Avatar for Member #334542

Hey Guys,

Is this an servey going on?

http://www.image-formats.com/

Stop Guys! Get into Some Other Topics!!!!

Member Avatar for Member #334542

When and how to use internet image formats

Member Avatar for jbennet

Jpeg and Gif. Use jpegs for photos, and gifs for cliparty-type things.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.