Reference
File formats reference
JPG, PNG, WebP, SVG, PDF, MP4 — when to use which file format on your website and why it matters.
referencebeginnerglossarycontent
The file format you choose affects how your website looks, loads, and performs. This reference page explains every common format — and tells you exactly when to use each one.
Quick summary
Use WebP or JPG for photos, PNG for images needing transparency, SVG for logos and icons, and PDF for documents. Avoid uploading huge uncompressed files — always compress images before uploading. See How to compress images.
Image formats
| Format | Full name | Best for | Notes |
|---|---|---|---|
| JPG / JPEG | Joint Photographic Experts Group | Photographs and images with many colors | Good compression. Not great for images with text or sharp edges. Does not support transparency. |
| PNG | Portable Network Graphics | Logos, icons, screenshots, images needing transparent backgrounds | Larger file size than JPG. Supports transparency. Best when you need crisp edges or a transparent background. |
| WebP | Web Picture format | Replacing JPG and PNG on modern websites | Created by Google. Smaller file sizes than JPG and PNG at similar quality. Supported by all modern browsers. The preferred format for web images. |
| AVIF | AV1 Image File Format | Next-generation image compression | Even smaller than WebP. Excellent quality. Browser support is good but not universal yet. |
| SVG | Scalable Vector Graphics | Logos, icons, illustrations | Vector format — scales to any size with no quality loss. No pixelation. Can be styled with CSS. Not suitable for photographs. |
| GIF | Graphics Interchange Format | Simple animations | Limited to 256 colors. Low quality. Use CSS animations or video instead for most purposes. |
| TIFF | Tagged Image File Format | Print and professional photography | Very large files. Not used on websites. Keep for print work only. |
| HEIC / HEIF | High Efficiency Image Format | iPhone/iPad photos | The default format for iPhone photos. Not well-supported on the web — convert to JPG or WebP before uploading. |
Document formats
| Format | Full name | Best for | Notes |
|---|---|---|---|
| Portable Document Format | Downloadable brochures, menus, forms, reports | Preserves formatting exactly. Opens in browsers and PDF apps. Accessible PDFs need proper tagging — ask us if this matters for compliance. | |
| DOCX | Word Document | Editable documents | Microsoft Word format. Not suitable for web display — convert to PDF for sharing or download. |
| XLSX | Excel Spreadsheet | Data and tables | Microsoft Excel format. Embed or link as a download. |
| CSV | Comma-Separated Values | Data tables, product imports | Plain text format for tabular data. Used for WooCommerce product imports and analytics exports. |
Video formats
| Format | Full name | Best for | Notes |
|---|---|---|---|
| MP4 (H.264) | MPEG-4 with H.264 encoding | Website videos, background videos | The most widely supported video format on the web. Good quality and file size balance. |
| WebM | Web Media format | Modern browser video | Google's format. Smaller files than MP4, great browser support. Sometimes used alongside MP4 for compatibility. |
| MOV | QuickTime Movie | Apple recordings | Common on Mac and iPhone. Convert to MP4 for web use. |
| AVI | Audio Video Interleave | Older format | Large file sizes. Not suitable for web — convert to MP4. |
Don't upload videos directly to WordPress
Video files are very large. Uploading them directly to WordPress slows your site and fills storage quickly. Use YouTube, Vimeo, or Wistia instead, then embed the video on your page. See How to embed a video.
Audio formats
| Format | Full name | Best for | Notes |
|---|---|---|---|
| MP3 | MPEG Audio Layer 3 | Podcasts, audio players | The universal audio format. Well-compressed and widely supported. |
| WAV | Waveform Audio | Uncompressed audio | Very high quality but huge files. For audio production, not web delivery. |
| OGG | Ogg Vorbis | Web audio | Open-source format. Good compression. Less universal than MP3. |
Font formats
| Format | Full name | Best for | Notes |
|---|---|---|---|
| WOFF2 | Web Open Font Format 2 | Web fonts | The preferred font format for websites. Excellent compression, wide browser support. |
| WOFF | Web Open Font Format | Web fonts (older fallback) | The predecessor to WOFF2. Still used as a fallback for older browsers. |
| TTF | TrueType Font | Desktop use, sometimes web | Larger than WOFF2. Common for desktop applications. |
| OTF | OpenType Font | Desktop use | Advanced typography features. Large files — not ideal for web. |
Which format should I use?
For uploading to your website:
- Photos: WebP (first choice) or JPG
- Logo on a background: SVG or PNG
- Transparent logo: SVG or PNG
- Icon: SVG
- Screenshots: PNG or WebP
For documents & files:
- Downloadable file: PDF
- Product data import: CSV
- Video: upload to YouTube/Vimeo, embed it
- Audio: MP3
Common questions
Related guides
- Image basics for your website
- Image formats explained (JPG, PNG, WebP, SVG)
- How to compress images
- Image sizes for the web
- PDFs & documents on your site
Need a hand?
If you're stuck, email support@chykalophia.com and we'll help. Include your website address and a screenshot if you can.