1

I'm working on a script and have an issue with Chrome.

Here's what I'm doing: 1. Loading large images into a DIV. 2. Scaling the images to fit the size of the DIV. 3. When the browser is resized, the image is scaled up and down with the browser.

Everything is working 100% in all browsers except Chrome.

I've checked the profiler in Chrome and don't see anything unusual. These are large images, however are working just fine (even live) in all other browsers.

I've read a ton of places that have noted this issue when using down-sized images in Chrome...but not solution.

Nothing special going on, just using a 

var img=new Image();
$(img).load(function(){ .... {);

Does anyone know of a workaround or solution that will work in Chrome? Thanks!

Aaron
  • 2,482
  • 1
  • 26
  • 56

4 Answers4

3

So it appears that Chrome just sucks when it comes to handling large images and even images that aren't large, but just scaled down. I've searched around endlessly only to find similar questions without resolutions.

Still not sure why all other browsers (even IE 7 and 8) can handle large images (tested with 7mb scaled-down PNGs), but Chrome can't even manage to do a 700kb scaled-down JPG without lagging.

So, I'm answering this question with: in this instance, Chrome sucks.

Aaron
  • 2,482
  • 1
  • 26
  • 56
  • unhappy to report that this issue STILL persists. Loading directly a tinypng'ed image 6k by 22k resolution (700kb) creates horrors in chrome, but works butter smooth on other browsers. – user3526 Dec 18 '15 at 10:01
3

I had exactly the same problem, but recently solved it. Huge amounth of performance takes up chrome's anti-aliasing, because it recalculates the entire image whenever you resize it.

So to solve it you just add this line to the css if your image:

#myImage
{
     image-rendering: -webkit-optimize-contrast;
}

You can turn it off by javascript when the image is still.

More about anti-aliasing: Disable antialising when scaling images

Community
  • 1
  • 1
Jirka Mayer
  • 231
  • 2
  • 8
0

How are you resizing the images? Using height/width or CSS transforms? The latter might result in better performance.

Some info: Improving the Performance of your HTML5 App

  • I'm pulling the height/width from the image, then calculating the closest size to the container to keep the ratio the same. Must support all browsers and since it's working great in everything else I wouldn't think I have to jump into transforms just for Chrome? – Aaron Apr 18 '13 at 00:15
0

When you're profiling issues with image resizes and decodes in Chrome, it's best to use the Developer Tools Timeline for this as it can give you relatively accurate stats on exactly what took a long time to be decoded.

Downsizing (or re-sizing) involves Chrome having to both decode the image (JPEG/PNG/GIF) you're sending down the line and then do extra work to resize that image into the container (div) that you would like to display it in. Where possible, the advice from the Chrome team is to prescale your images to the correct width/height needed.

Now you might be wondering: well, surely this issue is just down to desktop Chrome sucking, right? It's not as clear-cut as that. Particularly on mobile devices where browsers have less access to a powerful GPU/CPU, it's going to be costly to perform those resize operations there as well. So in short: yes, rescaling large images can be slow in Chrome sometimes. Try to prescale where possible and these performance bottlenecks should disappear.

addyo
  • 2,798
  • 1
  • 14
  • 21