Check render cost of image-rendering style with Google dev tools

Question

I want to see the performance cost of setting the style image-rendering: -webkit-optimize-contrast for an image in a complex web page.

I know Google Developer Tools' Performance tab is powerful... but the documentation is very general, and it's difficult to distill a method to answer this specific question.

While this is primarily a question about Dev. Tools, I'll accept any answer that explains how to see the performance impact of setting this style in the context of a complex page. It would be simple enough to compare load times of two pages containing only the image and different styles, but that may not accurately answer the question of how the style impacts a production web page.

Update:

Following jburtondev's advice to load the image alone in a simple page and profile it, I found that the style costs ~200% the time in image rendering.

Using dev tools' "6x slowdown" CPU throtling, I loaded a page with just the image five times with the style and five times without. I found the "rendering" time was ~10ms with the style and ~5ms without. I'll consider that negligible, even on mobile, and assume the cost would be similar in a production page.

Answer 1

Great question. This is quite an edge case which I don't believe is yet available in Chrome Developer Tools. I would approach this by using image-rendering: -webkit-optimize-contrastand analysing the rendering section of a simple page with no assets and one image. Then analysing the same image without image-rendering: -webkit-optimize-contrast. Not the most scientific way, but i'm sure it will yield somewhat helpful results.

Just in case you're not familiar with performance profiling, I have attached a screenshot to show the rendering section, so you know which property to analyse upon completion of the audit.

Let me know how it goes! Interested to know.