With the rise of HTML5 web technologies, we got a bunch of new features: Flexbox, JQuery, Bootstrap, SVG images, Responsive layouts, interactions, CSS Grids, just to name a few. Every feature adds a new layer of complexity to the final website.
But when it comes to screenshots, we ditch all of the complexity and create a flat pixel-based .png or .jpg image.
Websites are not pixel based.
All this happens in milliseconds, and is therefore mostly invisible to the human eye. Zoom into a webpage (Ctrl+Scroll wheel) and — poof! — all elements will be rendered again. Pixel-perfect and sharp.
Let’s try the following:
- Take a screenshot with the tool of your choice (e.g. Awesome Screenshot for Chrome, FireShot, Snipping Tool, Jing, InVision LiveCapture…)
- Open the screenshot file and simply zoom in.
- Watch sadly as the pixels grow and the image blurs. :(
All these tools only save the content of your screen, pixel by pixel. There’s no chance to change the resolution or viewport dimensions afterwards.
The screenshot world is flat.
Just like our planet — or so we thought, for most of human history.
Don’t worry. Screenshots are still useful. They keep things simple. If we don’t want to look beyond the firmament (speaking of the Flammarion engraving above) they’re perfect.
But we believe that most creative teams need a smarter screenshot. What if we could change a website without masking and retouching a flat image in Photoshop?
It’s time to inflate our screenshots and add a little layer of complexity:
Let’s call it a snapshot!
Think of it as a layer-based screenshot where you can still select and inspect one or more elements. – just as you do in Photoshop or Sketch.
- Components & Elements
- HTML + CSS
- Responsive & interactive
- Resolution independent
- Inspect — Improve — Share
This is perfect for front-end designers and creative teams. Instead of sending your current website through a hydraulic press everytime you take a screenshot (flattening all elements to one layer) take an interactive and responsive snapshot with snapx.io.
We’re more than happy to share a little preview of what we built over the past few months and it would be nice to hear from you (feedback, ideas or just discuss front-end stuff).