How can I find unused images and CSS styles in a website?


Html Problem Overview

Is there a method (other than trial and error) I can use to find unused image files? How about CSS declarations for ID's and Classes that don't even exist in the site?

It seems like there might be a way to write a script that scans the site, profile it, and see which images and styles are never loaded.

Html Solutions

Solution 1 - Html

You don't have to pay any web service or search for an addon, you already have this in Google Chrome under F12 (Inspector)->Audits->Remove unused CSS rules


Update: 30 Jun, 2017

Now Chrome 59 provides CSS and JS code coverage. See

enter image description here

Solution 2 - Html

At a file level:

use wget to aggressively spider the site and then process the http server logs to get the list of files accessed, diff this with the files in the site

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

Solution 3 - Html

I seem to recall either Adobe Dreamweaver or Adobe Golive having a feature to find both orphaned styles and images; can't remember which now. Possibly both, but the features were well-hidden.

Solution 4 - Html

Chrome canary build has an option in the developer toolbar for "CSS Coverage" as one of the experimental developer features. This options comes up in the timeline tab and can be used for getting a list of the unused CSS.

enter image description here

Please note that you would need to enable this feature in the settings in the developer toolbar too. This feature should probably make it to official chrome release.

enter image description here

Solution 5 - Html

This little tool gives you a list of the css rules in use by some html.

Here it is on Code Pen

Click on Run code snippet, then click on Full page to get in to it. Then follow the instructions in the snippet. You can run it full page to see it work with your html / css.

But it's easier just to bookmark my code pen as a tool.

   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  return cssList;

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
  return o;

function union(x, y) {
  return unique(x.concat(y));

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJon GallowayView Question on Stackoverflow
Solution 1 - HtmlȘerban GhițăView Answer on Stackoverflow
Solution 2 - HtmlBCSView Answer on Stackoverflow
Solution 3 - HtmlPolsonbyView Answer on Stackoverflow
Solution 4 - HtmlAbhinav GalodhaView Answer on Stackoverflow
Solution 5 - HtmltoddmoView Answer on Stackoverflow