My quest for today is to figure out a way to save our finished websites as images with the intention of creating a mini archive.org of our websites after we take them live.
Why would I even want to do such a thing? Glad you asked.
Here’s the backstory: We build on WordPress, and with the improved page-building features of late, we’ve found we can fairly easily build simple static pages right within the WordPress interface. Previously, we mocked up each page using graphic design software and shared it with clients as an image, which was great for creativity but not as great for usability. It’s hard for someone who doesn’t build websites every day to imagine an image as an actual website. Hence the switch to building pages directly in WordPress and skipping the mock-ups step is a double win.
However, it also leaves us without a copy of what the page looked like initially. We’d like to have a copy of these files because as we update the web pages and software regularly. We need to make sure as new features are added or software is upgraded we don’t blow up the approved formatting.
The first possibility is a Chrome extension, Batch Link Downloader. Which I must say is quite streamlined. While it’s far more streamlined than any option offering conversion of web pages to images, it only saves the pages as HTML. All of the images and file links are sourced to the server, so if images or styles change online, the pages won’t render correctly, and I’m left with a less-than-adequate rendition of what we started with…and I really will be digging through Archive.org to find a better copy.
I think I’d much rather have a picture, something that I can easily call up on any device or email over to a client without having to worry about making sure all of the images and styles are still legit online.
My next dance partner is Web-Capture.net. It’s super easy to use. And while it took take a little while to process the capture, it was pretty great because it gave me file format options for saving my document. I can save it as a JPEG, HTML, PDF and even a couple other formats.
The other cool feature I found is it gave me the entire screen. Not just the part you see in your browser window, all the way from top of the page to the bottom. Only challenge with this system is it forces me to enter the URLs for each page of the website one at a time, which would take a lot more clicking, copying and pasting than I had hoped.
My next adventure is at Web2PDFConvert.com, which is a little misleading because you can actually convert to more than just a PDF — you can save as JPG and PNG, too. Once again, I do have to type in the URL of every single page I want to capture. It lets me choose the dimensions of the screen at which I’d like to take my screenshots, which could come in handy if I want to share mobile mockups as images.
I also really like that it allows me to save my screen capture to Dropbox or Google Drive. But here’s the deal (at least the deal-breaker for me ‘cause it only captures the screen within the specified dimensions). As page lengths change the screen capture heights would vary — that may mean I’ll have to go in and reset the height of each image, and that could take somewhere near forever. I could do some more testing but I think, I’ll move along to my next victim.
Snapito.com is another free service allowing users to save images of web pages. The site is pretty cool because you can embed the screenshot or copy the URL to view it later.
It does create an image of the entire page from top to bottom regardless of the page height. The page width and the height are adjustable as well.
The only way that I could figure out how to get the jpeg actually saved is by right-clicking and saving the image… not quite as convenient. Overall it’s pretty slick, really. But I do have to type in the URL of each page I would like to snap, which is a bummer. Thus, the search continues…
At this point I’m switching gears in my search. I’m not sure a web application is the right answer, so I’m going to go back to the beginning to see if I can’t find a Chrome extension that’ll do what I want.
This is a really cool extension. It’s easy to click on the extension icon and choose the type of screen shot I’d like to take. Once the extension is done scanning the page, the capture opens up in an simple Paint-like editor — way fancier than I expected out of an extension. Where do these smart people come up with these ideas?
I can actually markup pages or crop out parts of the image using the editor. Text can be added on top of the picture, I even change the text color! This could be ideal for documenting revisions on pages that have already been built. The only thing is I can’t figure out how to move the edits I make to the image. For example, if I put the arrow in the wrong place, I have to delete it and make another one in order to put it somewhere else.
Once the page doctoring is complete, I can click Save Local and it’ll save it to my desktop. It’s a nice extension, I just wish I could do this with multiple pages at once… oh well, onward!
qSnap works a lot like 1 Click Website Screenshot in that it allows me to choose between a full screen capture or just what’s showing on the screen. Then it scans the page and creates a very nice output. The image also opens up a simple editor in a new window, which is slightly more advanced than the previous extension I reviewed.
qSnap not only enables the addition of shapes, text, arrows — the whole kitten caboodle — it also allows me to move them around or delete them!
Another nice thing about this extension is I can take additional screenshots without ever losing the previous one(s). All of the screenshots are compiled along a scroll bar at the bottom of the screen to easily switch from one to another. Though, at first, I had no idea how to get the screen captures out of the nice viewer, but after a bit of clicking around, I realized it’s not too hard at all.
To export the screenshots from the system, click the Share button and then choose to save them, individually or all at once, to a machine or print.
PDFmyURL.com is an interesting option for capturing screenshots of a website. The home page gives you a field to plug in a URL and convert it to PDF on the spot. Be aware — the capture is a horizontal-landscape multi-page PDF with a black strip at the bottom showing where the PDF was downloaded. In other words, each page has PDFmyURL.com branding across the bottom. If you’re using PDFs for internal reasons, who cares, right? But if you’re sending them to clients, you may spring for a paid plan…
Speaking of paid plans – let’s talk about those. They’re great for capturing tons of content to check for compliance and all that jazz. We could totally use something like this to capture some of the Mizzou websites we’ve built, like The Grad School’s, and given the contracts are month-to-month, we would’ve only had to part with $19 to do that. Anyway, the paid options also let you add functionality to your website that gives visitors viewing/saving/downloading PDF options for accessing and storing informative pages on your site (also a cool feature for something like Grad Studies…).
You’ve got your typical lower-cost plan called the Starter plan, which gives you 500 PDFs per month (note: if you have a large, say, 500-page website and you download your entire site, you’ve used all 500 PDFs…just FYI). The next plan up is the Professional, which adds a few perks to what you can do in addition to creating high-quality PDFs (up to 2,000 per month), like priority email support and adding links to your site that allow visitors to save your web pages as PDFs with a single click. Oh, the things you didn’t know you didn’t know… The Advanced plan gives you everything Professional does, but you get 5,000 PDF conversions per month, and lastly, Enterprise allows you to create a custom plan to meet your specific PDF conversion requirements.
As a last ditch effort, I thought I’d try out an application I already have: Adobe Acrobat. I found this super helpful article telling me exactly how to do it. Although it was written in 2012, it’s still quite accurate.
I hit my first obstacle right away: I don’t have the paid version of Adobe Acrobat on my website. Fortunately, my coworker does, so we tested it on her machine. The website converted into a PDF pretty quickly, but it didn’t keep all of the formatting from the page. In other words, the output is simplified. Not so much what I was looking for. I want all the pretty things that you see out online to be in my screenshots, so I guess Adobe Acrobat isn’t exactly for me.
I know you’re just dying to learn the outcome of this search. Unless I’m not searching with the right words (and I searched for it quite a few different ways), I don’t know that there is actually a website or a Chrome extension to do precisely what I’m wanting to do. If you find one, though, give me a shout at firstname.lastname@example.org, and I’ll send you chocolate.
Having said that, I really enjoyed the user interface for qSnap and think it’s probably the most streamlined option for us. I imagine it would be less time-consuming to click Export using the Chrome extension than to have to go out and copy and paste every single URL into a website and ask it to process.
I haven’t explored to see if any paid services exist that do this type of thing — it’s possible there is one out there… For the time being, I think qSnap is going to be what we go with because, while it can help us at the end of our design process, we can also use it in the middle of the process to quickly communicate revisions to our designers.
Monica is the creative force and founder of MayeCreate. She has a Bachelor of Science in Agriculture with an emphasis in Economics, Education and Plant Science from the University of Missouri. Monica possesses a rare combination of design savvy and technological know-how. Her clients know this quite well. Her passion for making friends and helping businesses grow gives her the skills she needs to make sure that each client, or friend, gets the attention and service he or she deserves.
© MayeCreate Design 2019 | 573-447-1836 | email@example.com | 700 Cherry St. Suite C, Columbia, MO 65201