Putting iPhone Photos on a Website: Format, Size and Speed

Never put raw HEIC files in an HTML image tag. Chrome, Firefox, and Edge on Windows and Android do not decode HEVC-encoded images natively. Your visitors will see a broken image icon unless they are using Safari on an Apple device.

Convert to JPG at quality 80, not 100. Exporting a 12-megapixel or 48-megapixel iPhone photo at maximum JPEG quality produces a massive file that ruins your Largest Contentful Paint (LCP) score. Quality 80 drops the byte count dramatically with no visible loss on a web page.

Resize to the exact CSS display dimensions and add dimensions to your HTML. Serving a 4032-pixel-wide photo inside a 600-pixel blog column wastes bandwidth and slows down decoding on mobile CPUs.

Why raw HEIC fails on the web (and why naive JPGs are too slow)

When you take a photo on an iPhone, iOS saves it as a HEIC container holding an HEVC (H.265) video keyframe. Because HEVC carries patent licensing fees, browser vendors outside of Apple refuse to build software decoders for it. If you upload photo.heic to your server and point an <img> tag at it, only Safari users will see it.

Converting that file to a baseline 8-bit JPG fixes compatibility instantly, because every browser since 1995 renders JPEG. However, a straight conversion creates a new problem: file weight. Because HEIC uses more advanced compression than JPEG, a direct conversion often balloons in byte size, as we detail in our guide on how HEIC to JPG file sizes compare. Dropping a multi-megabyte JPG onto a landing page will tank your Google Core Web Vitals.

Step 1: Convert at JPEG quality 80 and mind the colour profile

JPEG compression works on a scale from 1 to 100. At quality 100, the encoder barely quantises the high-frequency detail, resulting in huge files full of invisible sensor noise from the iPhone camera. Dropping the encoder to quality 80 activates 4:2:0 chroma subsampling (halving the colour resolution while keeping full brightness resolution) and strips out imperceptible grain.

You also need to watch your colours. Modern iPhones shoot in the Display P3 colour space and embed a gain map for HDR brightness. When preparing images for a standard website, converting to standard sRGB ensures the photo does not look washed out on older office monitors. You can read more about how converters handle bright highlights in our guide to HDR and tone mapping.

Step 2: Resize pixel dimensions to match your CSS layout

A standard iPhone 12-megapixel photo measures 4032 by 3024 pixels. Newer Pro models shooting in 24MP or 48MP default modes produce 5712 by 4284 or 8064 by 6048 pixels. Even at JPEG quality 80, an 8064-pixel-wide image has no business being in a blog post.

Check the maximum width of your website's content column in CSS (for example, 720 pixels).
Double that number to account for high-density Retina and mobile screens (720 x 2 = 1440 pixels).
Resize your converted JPG so its longest edge is 1440 pixels before uploading it to your CMS.
On a Mac, you can do this in Preview under Tools > Adjust Size. On Windows, use Paint or Image Resizer.

Never rely on CSS or HTML width attributes alone to shrink a massive image; the browser still has to download and decode every single pixel in memory.

Step 3: Write HTML that protects Core Web Vitals

Once you have a properly sized JPG, how you write the <img> tag determines how Google scores your page speed. You need to prevent Cumulative Layout Shift (CLS) and avoid blocking the main thread.

Always include width and height attributes: Write width="1440" height="1080" directly in the tag. Modern browsers use the ratio of these two numbers to reserve the exact box space before the JPG even starts downloading, preventing the text below from jumping around.
Lazy load below the fold: Add loading="lazy" and decoding="async" to any image that is not immediately visible when the page opens. This stops the browser from fetching photos at the bottom of the article until the reader scrolls down.
Prioritise the hero image: Never put loading="lazy" on your main top banner or first visible photo. Instead, add fetchpriority="high" so the browser grabs it immediately, improving your Largest Contentful Paint (LCP) time.
Watch for EXIF orientation bugs: iPhones often save portrait photos sideways inside the pixel grid and rely on an EXIF orientation tag (value 6 for 90 degrees clockwise) to tell the viewer to rotate it. If your server strips EXIF data to save bytes without physically rotating the pixels during conversion, your portrait photo will appear sideways on your site.

Convert your iPhone photos for the web right now

You can turn your raw iPhone shots into web-ready files using our free HEIC to JPG converter. It runs entirely inside your browser with no file uploads, bakes the correct EXIF rotation directly into the pixel grid so portraits never turn sideways, and outputs clean, standard JPGs ready for resizing and publishing.

Your photos are decoded in your own browser — open the converter and see.

Related guides

First published: 5 November 2026