JPEG/JPG (.jpg, .jpeg)
0
Upvotes
3
Views
0
Downloads
1,162
Words
Description
JPEG/JPG is a guide to the JPEG lossy image format, its compression, color spaces, quality settings, and when to use it.
When to Use
explain how JPEG compression works | tell me about JPEG extensions and mime type | how to choose JPEG quality for photos | compare JPEG with PNG for web images | explain JPEG metadata support (EXIF, XMP)
Use Cases
Explain JPEG compression basics for tech docs. | Assess when to use JPEG for web photos. | Explain JPEG metadata usage (EXIF/IPTC/XMP). | Compare JPEG with PNG/WebP for imaging workflows.
SKILL.md Content
---
name: jpg-jpeg
description: "JPEG/JPG is a guide to the JPEG lossy image format, its compression, color spaces, quality settings, and when to use it."
metadata:
tags: "image-format, jpeg, lossy-compression, dct, huffman, web-graphics, metadata-exif"
source: "https://skilldb.dev/skills/file-formats-skills/jpg-jpeg"
pack: "file-formats-skills"
category: "Technology & Engineering"
---
# JPEG/JPG (.jpg, .jpeg)
## When to use this skill
Use when the user says things like:
- "explain how JPEG compression works"
- "tell me about JPEG extensions and mime type"
- "how to choose JPEG quality for photos"
- "compare JPEG with PNG for web images"
- "explain JPEG metadata support (EXIF, XMP)"
You are a file format specialist with deep knowledge of the JPEG image format, its compression algorithms, quality settings, and optimal use cases.
## Overview
JPEG (Joint Photographic Experts Group) was developed by the committee of the same name and published as ISO 10918-1 in 1992. It was created to establish a standard for continuous-tone image compression, primarily targeting photographic content. The format revolutionized digital imaging by enabling high-quality photos at drastically reduced file sizes. JPEG rapidly became the dominant format for digital cameras, web photography, and image sharing. The .jpg extension originated from early Windows systems that required three-character file extensions; .jpg and .jpeg are functionally identical.
## Technical Specifications
- **File extension(s):** `.jpg`, `.jpeg`, `.jpe`, `.jfif`
- **MIME type:** `image/jpeg`
- **Compression type:** Lossy, based on Discrete Cosine Transform (DCT). The image is divided into 8x8 pixel blocks, transformed into frequency domain, quantized (where data loss occurs), and entropy coded (Huffman or arithmetic).
- **Color depth:** Typically 24-bit (8 bits per channel, RGB). Supports 8-bit grayscale. No alpha channel (no transparency).
- **Max dimensions:** 65,535 x 65,535 pixels
- **Max file size:** No formal limit (practical limit depends on dimensions and quality)
- **Metadata support:** EXIF (camera data, GPS, orientation), IPTC (captions, keywords), XMP (extensible metadata), ICC color profiles
- **Color spaces:** sRGB (most common), Adobe RGB, CMYK (rarely used)
- **Progressive mode:** Supports progressive encoding where the image loads in successive refinement passes rather than top-to-bottom
## How to Work With It
### Opening & Viewing
JPEG is universally supported. Every operating system, web browser, image viewer, and photo application can open JPEG files natively. No special software is required.
### Creating & Editing
- **Quality setting:** Ranges from 1-100 (or 1-12 in Photoshop). Quality 75-85 provides the best balance of file size and visual quality for most uses. Quality below 50 introduces visible artifacts (blockiness, color banding, mosquito noise around edges).
- **Re-saving warning:** Each save re-applies lossy compression, causing generational quality loss. Edit from originals when possible, or use a lossless format for intermediate edits.
- **Tools:** Any image editor (Photoshop, GIMP, Paint.NET, ImageMagick, Pillow/PIL in Python, Sharp in Node.js)
- **Command line:** `magick input.png -quality 82 output.jpg` (ImageMagick)
- **Chroma subsampling:** 4:4:4 preserves color detail, 4:2:0 reduces file size ~33% with minimal visible impact on photos (but can affect sharp color edges like red text on white)
### Converting To/From
- **To JPEG:** `magick input.png output.jpg` or `ffmpeg -i input.png output.jpg`
- **From JPEG:** `magick input.jpg output.png` (note: converting lossy to lossless does not recover lost data)
- **Batch convert:** `magick mogrify -format jpg -quality 85 *.png`
- **Python:** `from PIL import Image; Image.open("in.png").convert("RGB").save("out.jpg", quality=85)`
- **Lossless operations:** `jpegtran` can rotate, crop, and optimize JPEG files without re-compressing
## Common Use Cases
- Digital photography (cameras default to JPEG)
- Web images and photo galleries
- Email attachments and social media uploads
- Print-ready images (at high quality settings, 300 DPI)
- Thumbnails and image previews
- Any scenario where small file size matters more than pixel-perfect quality
## Pros & Cons
**Pros:**
- Universal compatibility across all platforms and software
- Excellent compression ratio for photographic content (10:1 to 20:1 with good quality)
- Adjustable quality/size tradeoff
- EXIF metadata preserves camera and location data
- Progressive loading for web delivery
- Extremely mature ecosystem with decades of optimized encoders (mozjpeg, libjpeg-turbo)
**Cons:**
- No transparency support (no alpha channel)
- Lossy compression causes artifacts, especially at low quality or on sharp edges/text
- Generational loss on re-saving
- Poor for text, line art, screenshots, or images with sharp color boundaries
- No animation support
- 8-bit per channel limit (no HDR)
- Block artifacts visible at high compression (8x8 pixel grid pattern)
## Compatibility
| Platform | Support |
|----------|---------|
| Web browsers | All (universal since the 1990s) |
| Windows | Native |
| macOS | Native |
| Linux | Native |
| iOS/Android | Native |
| Adobe suite | Full |
| Office apps | Full |
## Practical Usage
### Web Optimization Pipeline
The standard workflow for serving JPEG on the web:
1. Export from your source (Photoshop, Lightroom) at quality 95+ or lossless
2. Optimize with `mozjpeg` for production delivery: `cjpeg -quality 82 -progressive input.ppm > output.jpg`
3. Serve with `<picture>` element offering WebP/AVIF with JPEG fallback
```bash
# Batch optimize with mozjpeg (via ImageMagick delegate or standalone)
for f in *.jpg; do
cjpeg -quality 82 -progressive "$f" > "optimized/$f"
done
```
### Lossless Operations with jpegtran
`jpegtran` performs operations without recompressing, avoiding generational loss:
```bash
# Lossless rotation (corrects EXIF orientation physically)
jpegtran -rotate 90 -perfect input.jpg > rotated.jpg
# Optimize Huffman tables without quality loss
jpegtran -optimize -progressive input.jpg > optimized.jpg
# Lossless crop (must align to 8/16-pixel MCU boundaries)
jpegtran -crop 640x480+0+0 input.jpg > cropped.jpg
```
### Metadata Management
EXIF data can contain GPS coordinates, camera serial numbers, and thumbnails. Strip before publishing if privacy matters:
```bash
exiftool -all= photo.jpg # remove all metadata
exiftool -gps:all= photo.jpg # remove GPS only, keep other EXIF
exiftool -overwrite_original -all= -TagsFromFile @ -ColorSpaceTags photo.jpg # strip metadata but keep ICC profile
```
### Quality Selection Guidelines
- **Quality 92-95:** Visually lossless for most content. Use for archival or print-source files.
- **Quality 80-85:** Excellent web quality. The sweet spot for most delivery.
- **Quality 60-75:** Acceptable for thumbnails, previews, and bandwidth-constrained delivery.
- **Below 50:** Visible blocking artifacts. Only use when file size is severely constrained.
## Anti-Patterns
**Re-saving JPEG files repeatedly.** Each save cycle recompresses and degrades the image. Edit from the original source (RAW, PSD, TIFF) and export to JPEG only as the final delivery step.
**Using JPEG for screenshots, text, or line art.** JPEG's DCT compression produces visible ringing artifacts around sharp edges. Screenshots and text-heavy images should use PNG or WebP lossless.
**Setting quality to 100 and assuming no loss.** JPEG at quality 100 is still lossy — the quantization tables are just less aggressive. If you need truly lossless, use PNG or TIFF. Quality 100 JPEG is 2-3x larger than quality 90 with negligible visual difference.
**Stripping ICC profiles during optimization.** Removing the ICC color profile can cause colors to shift, especially for images in Adobe RGB or Display P3. Always preserve the color profile or convert to sRGB before stripping.
**Ignoring EXIF orientation.** Many phones store photos in landscape orientation with an EXIF tag indicating rotation. Tools that ignore this tag display images sideways. Apply orientation with `jpegtran -rotate` or `exiftool -Orientation=1 -n` before processing.
## Related Formats
- **JPEG 2000 (.jp2):** Wavelet-based successor with better compression and lossless mode, but limited adoption
- **JPEG XL (.jxl):** Modern successor with lossless JPEG recompression, progressive decode, and HDR support
- **WebP:** Google's alternative offering better compression at equivalent quality
- **AVIF:** AV1-based format with superior compression efficiency
- **HEIC:** Apple's preferred photo format using HEVC compression
- **PNG:** Lossless alternative when transparency or exact pixel preservation is needed