Rule of Thirds

A customisable overlay for visualising image composition techniques (primarily the Rule of Thirds).

Pick a composition guide and see straight away how an image lines up against it, all one click away from the toolbar icon. Rule of Thirds draws a configurable overlay over the images on any page, to help you judge composition. AT A GLANCE * The toolbar icon shows whether the overlay is on for the current tab, with a warning badge if it can't be applied * Click the icon again to remove the overlay * Works with local image files as well as websites CHOOSE YOUR OVERLAY * Grid - the classic rule-of-thirds arrangement, or anything up to nine rows and columns * Phi Grid - a 3x3 grid spaced by the golden ratio (1 : 0.618 : 1), or a ratio of your own * Fibonacci Spiral - in any of 8 different orientations (starting point / direction) MAKE IT YOURS * Colour, opacity and width (1-9 pixels) for the lines * Circles on the intersections, outlined or filled, with their own colour, opacity and radius * Show or hide any individual line or circle from a click-to-toggle map, with a live preview of exactly what you'll get * Quick-pick swatches for common colours, plus a full colour spectrum * Set a minimum image size, so tiny icons and spacers stay out of the way CROP TO PART OF THE IMAGE Overlays can be resized within the boundaries of the image so you can play around with tighter compositions. SUPPORT * A Site Compatibility page lists the sites the extension is confirmed to work on - if it doesn't work somewhere, raise it on GitHub and I'll try to fix it History ------------------------------------------------------------------------------------------------------------------------ v1.9.1 - 18 October 2026 * Fixed right-click menu options not reliably being enabled when they should be v1.9 - 14 October 2026 * New Phi Grid overlay style, spaced by the golden ratio (or a ratio of your own) * New Fibonacci Spiral overlay style, with a choice of direction and starting corner * Switch between Grid, Phi Grid and Fibonacci Spiral from a tabbed strip on the Options page - each keeps its own settings * Line width is now configurable (1-9 pixels) * New right-click "Rule of Thirds" menu on the overlay * Resize the overlay to crop it to part of the image, optionally locked to a standard photo aspect ratio * New Site Compatibility page listing sites the extension is confirmed to work on * Supporting pages (Guide, Options, History) now form a mini-site with navigation * Overlay stays aligned with its image after a window resize, when the page swaps the image (e.g. zooming in on Flickr), and on images with a CSS margin * Overlay now positions correctly on pages that lay images out in plain tables (e.g. Wikimedia Commons) * Fixed errors in open tabs after the extension reloads or auto-updates v1.8 - 20 September 2026 * Toolbar icon now shows at a glance whether the grid is on, plus a warning badge if it can't be applied * Customise grid: show/hide individual grid lines and circles * Circles can now be drawn filled, not just outlined * Colour picker: full colour spectrum, opacity sliders, and quick-pick swatches for the original 8 colours * Grid rows/columns restricted to 1-9 to avoid performance issues * Minimum image size the grid applies to is now configurable * New "Embedded Frames" option applies the grid inside iframes too * Grid now works correctly on fixed-position images * Default line colour is now white * Restore Defaults is instant with Undo, instead of a confirmation prompt v1.7 - 2 June 2024 * Switch from host_permissions to activeTab (extension does nothing until clicked) * Position grid correctly for local images (ie file:// protocol) * Add Options page to control grid size, colours & whether lines and/or circles are rendered * Support arbitrary sized grid v1.6 - 21 May 2024 * Migrate to Manifest v3 * Replace JQuery dependency with native functions v1.5 - 29 August 2014 * Ignore images with "display: none" styles * Fix circles on intersection points so they are drawn fully