Serving HEIC iPhone photos on the web

If your photos come from an iPhone, they are probably HEIC. Apple made HEIC, stored in the HEIF container, the default camera format on iPhones since iOS 11, because it stores roughly half the data of JPEG at equal quality while keeping 10-bit colour and Live Photo metadata. That efficiency is a storage win on the phone and a problem on the web: except for Safari, which renders HEIC natively on macOS and iOS, no mainstream browser decodes HEIC, so an HEIC file served to Chrome, Firefox or Edge shows as a broken image. The driving rule is that you must convert HEIC to a browser-supported format before it reaches the CMS or the page.

Why HEIC breaks the page

Most websites never see the HEIC file because their upload forms or CMS convert it. The failure appears when one slips through: an HTML img pointing at a .heic file, or a CMS media library storing HEIC directly, shows the browser's broken image icon because the browser has no HEIC decoder. Some platforms reject HEIC at upload, which is why a photo that works on the phone can fail to upload to a website. The fix is always a conversion step upstream, before the file is treated as a web asset.

Pick an output format

The target format depends on how much compatibility you need and whether you control the serving markup:

• JPEG for maximum compatibility everywhere, including email and old tools. It is the drop-in default and the best choice when the receiving site will not process format negotiation.
• WebP for a modern web target: smaller than JPEG at equal quality and supported by every current browser. Choose this when you control the HTML and want one efficient format.
• AVIF for the smallest files on photographic content, served with a WebP or JPEG fallback via <picture>, because AVIF support, while broad in modern browsers, still needs a fallback for older ones. The next-gen formats article compares the trade-offs and the format reference details sizes and support.

The practical pattern for a website is the picture ladder: AVIF first, WebP second, JPEG last, which the conversion guide in the AVIF pipeline article shows in markup.

Build it into a pipeline

Convert once at the source so the web never sees HEIC. Options from simplest to most repeatable:

1. Adjust the phone so it stops producing HEIC for the use case: set Settings, Camera, Formats, Most Compatible to capture JPEG, which removes the conversion question for direct photos.
2. Convert manually with a file tool that decodes HEIC, such as a drag-and-drop converter or an image editor that imports HEIF.
3. Convert in a script for a batch, which is the right route for a photo library. Command line tools that handle HEIC decoding, from the command line image tools, read HEIF and can emit WebP or AVIF, and the CI conversion article shows how to make it a checked build step so a raw HEIC can never ship.

Whichever route you pick, verify the output has a browser-supported extension and MIME type and renders before it goes live. A servable WebP or AVIF that decodes correctly is the whole job; the remaining optimisation (sizing, quality, metadata) follows the same rules as any other image, covered by the image compression guide and the CLI tools guide that this workflow extends.