Large images don't render in Chrome?

Question

Very large images will not render in Google Chrome (although the scrollbars will still behave as if the image is present). The same images will often render just fine in other browsers.

Here are two sample images. If you're using Google Chrome, you won't see the long red bar:

Short Blue
https://i.sstatic.net/ApGfg.png

Long Red
https://i.sstatic.net/J2eRf.png

As you can see, the browser thinks the longer image is there, but it simply doesn't render. The image format doesn't seem to matter either: I've tried both PNGs and JPEGs. I've also tested this on two different machines running different operating systems (Windows and OSX). This is obviously a bug, but can anyone think of a workaround that would force Chrome to render large images?

Parnassus

Answer 1

Not that anyone cares or is even looking at this post, but I did find an odd workaround. The problem seems to be with the way Chrome handles zooming. If you set the zoom property to 98.6% and lower or 102.6% and higher, the image will render (setting the zoom property to any value between 98.6% and 102.6% will cause the rendering to fail). Note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is a good thing in this case since this is a browser-specific hack). As long as you don't mind the image being resized slightly, I suppose this may be the best fix.

In short, the following code produces the desired result, as shown here:

<img style="zoom:98.6%" src="https://i.sstatic.net/J2eRf.png">

---

Update:

Actually, this is a good opportunity to kill two birds with one stone. As screens move to higher resolutions (e.g. the Apple Retina display), web developers will want to start serving up images that are twice as large and then scaling them down by 50%, as suggested here. So, instead of using the zoom property as suggested above, you could simply double the size of the image and render it at half the size:

<img style="width:50%;height:50%;" src="https://i.sstatic.net/J2eRf.png">

Not only will this solve your rendering problem in Chrome, but it will make the image look nice and crisp on the next generation of high-resolution displays.

Parnassus

...at the cost of up to 4x the bandwidth for @2x images, and 9x for @3x images. – Berns

@MikeCauser this question and answer is 5 years old. This bug has been fixed and Chrome now renders these long images properly, and of course nowadays srcset is well supported, so you could serve multiple versions of the image for different pixel densities. I believe the reason I had this issue 5 years ago was because I was creating a one-dimensional icon sprite. Since the height of the sprite was very small, doubling the width wasn't really a huge deal in terms of file size. – Parnassus

Sorry, I didn't mean to dig up a 5yo answer. Yesterday I came across a bug in the latest Chrome 57 on an old Android 4.1.2 phone, where a 5000px wide sprite in a background-image just wouldn't show. Tried almost everything to get it working then I stumbled across your answer. Then managed to fix it by adding a zoom: 99.9997%. – Berns

No worries—I actually assumed this was completely resolved but apparently this is still an issue on some devices. Good to know! – Parnassus

This is not solved yet. Chrome/Chromium/Edge browsers still have issues with rendering large resolution images (eg. 32768x32768). If you allow users to upload images, the workaround is to also check the resolution besides the file size. – Caravette