Table of contentsClick link to navigate to the desired location
This content has been automatically translated from Ukrainian.
Modern iPhones and some Android devices take photos in the format HEIC (High Efficiency Image Coding) <TAG1> is a new image standard that allows you to store quality photos in a smaller size than the usual JPEG. Effective, right? But several important nuances are associated with this format.
Support in browsers
HEIC is not supported by all browsers. For example:
- ✅ Safari (on macOS and iOS) supports HEIC.
- ❌ Chrome, Firefox, Edge — do not support HEIC directly.
That is, if you download a HEIC file to the site and try to show it —, users in most browsers simply will not see images.
Frequent problem: users simply change .heic → .jpg
To pass HTML validation when loading an image (for example, through <input type="file" accept="image/jpeg">), some users just rename the file from photo.heic to photo.jpg.
And unfortunately, the browser can't always detect it right away.
What happens next?
- The server or frontend thinks it's .jpg, but cannot process it.
- Errors may occur when processing an image, generating thumbnails, or when viewing in a browser.
- And worst of all, — such files can "hack" the image pipeline on the site.
What to do (developers)
- On the frontend check not only the file extension, but also MIME-type (file.type).
- Validating on the backend, analyze the contents of the file or use libraries that define the format precisely.
- Warn users about supported formats.
- When jpg download is not working - check mime-type during debugging. This Trojan horse can take time, so it's better to see what's inside right away.
HEIC — is a modern and efficient format, but not yet supported everywhere. Changing the file extension — no format conversion, and it creates more problems than it solves. If you are a — developer, check the format at the content level. If you are a — user, it is better to use a converter than changing the name.
This post doesn't have any additions from the author yet.