keysight-eggplant / image-checker

Provides image optimisation information within the browser

NCC Image Checker - Chrome Extension

Provides image optimisation information within the browser. The quality of layout for the information presented is strongly linked to markdown building techniques used.

Install

Download from the Chrome Extension Store or

1. Clone the repo
2. Open Chrome Extensions
3. On the top right, check the checkbox for 'Developer mode'
4. Click 'Load unpacked extension...'
5. Select the directory where you have cloned this repo

Current limitations

1. overlay of background images where the element is positioned with negative values or via tranform will display as if the values were positive; why? the javascript api returns absolute values
2. overlay of carousel images will display for covered images as well
3. overlapping overlays hide each other
4. file size for some cross origin images is not available (depends of support of performanceEntry)
5. sprites are not bad practice ... yet this tool flags them red, we don't handle them at all

image-checker's Issues

Publish as Firefox addon

Seems to work as a Firefox extension - verify , and publish in as Firefox addon?
https://twitter.com/simevidas/status/862466949137215490

Add linting rules

@tabanliviu Can you setup a linting so we can avoid some of the nits like this #17 (comment)

#17 (comment)

Tooltip text takes too long to appear

For the average user, the tooltips on small images take so long to display that they will have moved their cursor off the image. Can we override the default behaviour to display the tooltip quicker?

Image size reported as too small, but it's not

I don't know if it is the same issue as #29, but here's an example where the overlay tells me the image is too small, while it's not.

Here: https://nicolas-hoizey.com/2017/01/how-much-data-should-my-service-worker-put-upfront-in-the-offline-cache.html#webmention-419040

$('#webmention-419040 > article > div.webmention__source > a.u-url > img').currentSrc tells me the image is https://res.cloudinary.com/nho/image/fetch/c_fill,f_auto,q_auto,w_600,h_400/http://image.thum.io/get/width/1200/crop/800/noanimate/http://www.webhostingreviewsbynerds.com/web-development-reading-list-168-preload-with-webpack-a-guide-to-security-headers-and-service-worker-fallacies/

It is 600 pixels wide, and the CSS size in the page is 298 pixels, so on my 2x screen (MacBook Retina), it should be almost perfect.

SVG file shown as too small/too large

SVG images should be ignored since they're losslessly scaled anyway.

Vertical image alignment is out on msn.com when resized

Given I am on the page http://www.msn.com/en-gb/sport/football/manchester-city-sign-benjamin-mendy-for-world-record-fee-as-summer-spending-soars-past-%C2%A3200million/ar-AAoKaN6?li=BBoPWjP
And I turn on the image checker
Then I expect the image overlays to map correctly to the underlying images
When I resize to smaller widths
Then I expect the overlays to still map correctly to the underlying images

For widths smaller than 1268, image overlays no longer align with the page images

Image size reported as good, but it's not

For example on this page: https://nicolas-hoizey.com/2017/01/how-much-data-should-my-service-worker-put-upfront-in-the-offline-cache.html

When using a viewport width of 614px, it says the screenshot from WebPagetest is at the right dimensions (natural 551x394), but when I use the console to get the currentSrc, it shows that the image is 980 pixels wide:

When the route is changed by javascript, the image-checker is not re-triggered.

For instance on this site: (http://www.vebleno.com/) if I activate the image-efficiency-checker and I go on any other route by clicking on the gray bars, the plugin doesn't re-check the currently displayed images.

Screenshot:

Doesn't account for device DPR?

<picture> images incorrectly identified as low resolution

Load this on a high dpi / retina computer, Chrome 63:

https://sparkleapp.com/fun/ncc/

the plugin identifies the image as 200x150 instead of 400x300, though it does recognize that the higher resolution image is in use.

(testcase above attached here)
ncc.zip

Colour scale for overlays

It would great to have a colour scale to refer to (perhaps within the flyout?). Red and green are pretty obvious but blue is less so.

Add copyright statements to source code

Issue with responsive images and DPR on mobile

When responsive images are used with srcset, it looks as though images that are the right size are highlighted in blue (too small) and images that are too big are highlighted in green (OK) when emulating a mobile device with a high DPR in Devtools. I think this might be to do with using naturalWidth for the image element, rather than looking to naturalWidth of currentSrc - demo page here: https://www.alexrp.co.uk/nl/testresponse.html

Extension is unusable until the page loads

On slower pages such as http://www.dailymail.co.uk/home/index.html it is quite likely that a user will click on the extension before the page completes loading. In this case there is no Start button and no indication why. The start button does not appear when the page does load, giving the impression that the extension is broken.

Add support for HTML5 video poster images

HTML5

Treatment of SVGs

SVGs are being higlighted in red when they should perhaps be excluded?

Add link to the GH repo to extension, and Chrome store description

There's no easy way for people using the extension to report issues, or find out how to contribute to the project

We should fix that

Allow scrolling in the overlays

We currently hide text on overlays which don't meet minimum width & height values. This won't always work as text size can change by browser / site / accessibility settings, leading to overflow:

Instead of a minimum height, we should enable scrolling within the overlay.

Overlays are sometimes not positioned correctly

see http://www.boots.com/

similar problem with body position: relative and margins

Add analytics opt-out?

Not all users of the extension will be happy to share their data with NCC Group via Google Analytics. Should we provide an opt-out of analytics collection within popup.html?
https://twitter.com/soulislove/status/862348312330076160