DEV Community

zepubo-code
zepubo-code

Posted on

JPEG vs JPG: What's the Difference? (And How to Convert Between Them)

Here's a question I get asked surprisingly often: "What's the difference between JPEG and JPG?"
The answer is going to feel anticlimactic: there is no difference. They are literally the same format.
But that raises an interesting follow-up: why do two identical formats have different names? And more practically: how do you convert between them when software requires one specific extension?
Let's dig in.
Why Do JPEG and JPG Both Exist?
It goes back to the early days of Windows.
When the JPEG format was standardized in 1992 by the Joint Photographic Experts Group (hence "JPEG"), file extensions were supposed to match. But MS-DOS and early Windows had a hard limit of 3 characters for file extensions — the infamous 8.3 filename format.
So Windows truncated .jpeg to .jpg.
Mac and Unix systems didn't have this restriction, so they kept .jpeg.
The result: the same format, two extensions, depending on what OS created the file. Modern Windows supports both, but the legacy lives on in software, scripts, and APIs that were written expecting one specific extension.
JPEGJPGFull nameJoint Photographic Experts GroupJoint Photographic Experts GroupImage qualityIdenticalIdenticalFile sizeIdenticalIdenticalCompressionLossyLossyTransparencyNoNoOriginMac/Unix/modernWindows legacy
Are They Really 100% Identical?
Yes. Open a .jpeg file in a hex editor and compare it to the same image saved as .jpg — the binary content is identical. The extension is purely a label.
You can verify this yourself:
bash# Rename a .jpeg to .jpg — no conversion needed
mv photo.jpeg photo.jpg

Or on Windows

ren photo.jpeg photo.jpg
That's it. No re-encoding, no quality loss, no file size change.
So Why Would You Need to "Convert" JPEG to JPG?
Good question. A few real-world scenarios:

  1. APIs and scripts that check extensions Some upload systems, form validators, or image processing scripts do a naive extension check: javascript// Bad validation — rejects .jpeg even though it's valid if (!file.name.endsWith('.jpg')) { throw new Error('Only JPG files are accepted'); } You'd encounter this in older codebases, some CMS platforms, and certain cloud storage APIs.
  2. Batch processing pipelines If you're feeding files into a pipeline that expects .jpg, having .jpeg files breaks the glob pattern: bash# This won't match .jpeg files for f in *.jpg; do process "$f"; done
  3. Some platforms and e-commerce systems Certain product image uploaders, real estate listing systems, and marketplace platforms still only accept .jpg explicitly.
  4. Personal organization
    Some people just prefer consistent naming across their library.
    How to Convert JPEG to JPG in JavaScript (Browser-Side)
    Since the files are identical, "conversion" is really just re-exporting with a different extension. Here's the most reliable browser-based approach:
    javascriptasync function convertJpegToJpg(file) {
    return new Promise((resolve) => {
    // Read the file
    const img = new Image();

    img.onload = () => {
    // Draw to canvas
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    const ctx = canvas.getContext('2d');

    // Fill white background (important for JPEG export)
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);

    // Export as JPEG with .jpg extension
    canvas.toBlob((blob) => {
    // Create a new File object with .jpg extension
    const jpgFile = new File(
    [blob],
    file.name.replace(/.jpe?g$/i, '.jpg'),
    { type: 'image/jpeg' }
    );
    resolve(jpgFile);
    }, 'image/jpeg', 0.95); // 0.95 quality preserves detail
    };

    img.src = URL.createObjectURL(file);
    });
    }

// Trigger download
function downloadFile(file) {
const url = URL.createObjectURL(file);
const link = document.createElement('a');
link.href = url;
link.download = file.name;
link.click();
URL.revokeObjectURL(url);
}

// Usage
document.getElementById('fileInput').addEventListener('change', async (e) => {
for (const file of e.target.files) {
const converted = await convertJpegToJpg(file);
downloadFile(converted);
}
});
Why use Canvas instead of just renaming?
For a simple rename, you don't need Canvas — just change the filename. But Canvas-based conversion is useful when you also want to:

Normalize image dimensions
Strip EXIF metadata (Canvas export removes it by default)
Apply quality settings
Ensure consistent output across different source formats

The Simple Version — Just Rename
If all you need is the extension change with zero quality loss:
javascriptfunction renameJpegToJpg(file) {
const newName = file.name.replace(/.jpe?g$/i, '.jpg');

// Create new File with same content, new name
return new File([file], newName, { type: 'image/jpeg' });
}
This creates a new File object with the .jpg extension but the exact same binary content. No re-encoding, zero quality loss.
Handling Both Extensions in Your Own Code
If you're writing code that accepts image uploads, here's how to handle both correctly:
javascript// ✅ Accept both .jpg and .jpeg
function isJpeg(file) {
return /.jpe?g$/i.test(file.name) || file.type === 'image/jpeg';
}

// ✅ Normalize to .jpg on upload
function normalizeJpgExtension(file) {
if (/.jpeg$/i.test(file.name)) {
return new File([file], file.name.replace(/.jpeg$/i, '.jpg'), {
type: file.type
});
}
return file;
}

// ✅ Validate by MIME type, not extension
function validateImage(file) {
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
throw new Error(Unsupported type: ${file.type});
}
}
Key principle: Always validate by file.type (MIME type), never by extension alone. Extensions can be renamed to anything — MIME type is determined by the actual file content.
JPEG vs PNG vs WebP — When to Use Which
While we're on the topic of image formats:
FormatBest ForTransparencyFile SizeJPEG/JPGPhotos, complex images❌ NoSmallPNGScreenshots, logos, UI✅ YesMedium-LargeWebPEverything (modern browsers)✅ YesSmallestSVGLogos, icons, illustrations✅ YesTiny (for vectors)
Rule of thumb:

Photo? → JPEG
Need transparency? → PNG
Want best compression? → WebP
Logo/icon that needs to scale? → SVG

Batch Conversion — JPEG to JPG for Multiple Files
javascriptasync function batchConvertToJpg(files) {
const results = [];

for (const file of files) {
if (/.jpe?g$/i.test(file.name)) {
const converted = renameJpegToJpg(file);
results.push(converted);
}
}

return results;
}

// With JSZip — download all as a ZIP
async function downloadAsZip(files) {
const JSZip = window.JSZip;
const zip = new JSZip();

for (const file of files) {
const buffer = await file.arrayBuffer();
zip.file(file.name, buffer);
}

const blob = await zip.generateAsync({ type: 'blob' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'converted-images.zip';
link.click();
}
Real-World Tool
If you want to do this without writing code, I built a free browser-based JPEG to JPG converter at OneWeeb — handles batch conversion, ZIP download, and your files never leave your device.

TL;DR

JPEG and JPG are identical formats — different extensions, same file
The split happened because Windows limited extensions to 3 characters in the DOS era
"Converting" is really just renaming or re-exporting
Always validate images by MIME type, not extension
If writing upload handlers, accept both .jpg and .jpeg

Got a question about image formats or browser-based file processing? Drop it in the comments.

Top comments (0)