Have you ever tried to capture a long landing page by scrolling dozens of times, taking partial screenshots, and stitching them together in an image editing tool? Or do you remember the tedious process of right-clicking and saving images one by one to benchmark a competitor's webpage?
If you are a web planner, marketer, designer, or blogger, this kind of work repeats more often than you'd think. However, with the right tools, this entire process can be resolved simply by entering a single URL.
In this article, focusing on Vivoldi's full website screen capture feature, we will guide you step-by-step through practical methods you can immediately use in your work—from utilizing advanced settings to capturing mobile screens and extracting images in bulk.
By reading this article to the end, you will take away the following:
- How to capture an entire webpage at once without scrolling
- How to set browser height to completely resolve screen cropping issues
- How to capture PC and mobile screens simultaneously
- How to batch download all images within a webpage at once
- Practical tips for advanced settings (Rendering Mode, Retina, Delayed Capture, etc.)
Why Standard Capture Tools Fall Short
The default capture function of a browser or the screen capture hotkeys of an operating system only save the area currently visible on the screen. To fully capture a vertically long landing page, news article, or shopping mall detail page, you inevitably have to scroll down, take multiple shots, and stitch them together.
There is also the method of using browser extensions. However, extensions quite often stop capturing midway on certain sites or fail to properly grab dynamically loaded content. Especially on pages with infinite scrolling or lazy loading, the issue of blank areas being captured frequently occurs.
Mobile screen capture is even more cumbersome. If you are working on a PC and want to check how a mobile responsive layout looks, you have to directly access it from your smartphone or open developer tools to emulate it. Saving it separately during this process is not easy either.
Vivoldi's web capture tool solves these inconveniences with a server-side rendering approach. Instead of opening a browser and scrolling yourself, the server renders the entire page via the Chromium or Firefox engine and then converts it into an image. Therefore, from the user's perspective, the task is completed just by entering a URL and pressing a single button.
Basic Usage: Full Screen Capture Just by Entering a URL
The basic usage of the Vivoldi web capture tool is extremely simple. When you access the site, a wide URL input box is the first thing that catches your eye; just paste the address of the webpage you want to capture here and press the OK button. That's it.
Within a few seconds to tens of seconds (depending on the page complexity), the capture result will be displayed on the preview screen. The preview image may look small and low-quality, but this is merely scaled down for display purposes.
When you proceed with the actual Download, a high-quality image is saved in the exact original resolution of the page. Be careful not to be disappointed by just looking at the preview quality.
On the free plan, you can process 1 URL at a time, and upon upgrading your plan, you can batch capture up to 10 URLs simultaneously. The 1 / 10 URLs indicator at the bottom of the input box represents exactly this. If you need to repeatedly capture multiple pages, this is a feature worth considering for an upgrade.
Mastering Advanced Settings: 6 Core Options
Basic captures alone resolve most situations. However, on some sites, the capture might be incomplete or not saved in the desired way. In these cases, expanding the Advanced Settings to adjust detailed options can address almost all scenarios. There are a total of 6 core items in the advanced settings.
1. Screen Rendering Mode (Chromium / Firefox)
The default is Chromium. As a Chrome-based engine, it normally renders most modern websites. However, occasionally, due to security policies or access right issues, a specific site might not open in a Chromium environment, or the layout might look broken. In this case, changing the rendering mode to Firefox allows you to bypass and access it with a different engine.
In practice, it is efficient to try with Chromium first, and if an error or incomplete result occurs, switch to Firefox and try again. The fact that it supports both engines is one of the structural advantages Vivoldi has compared to browser extension methods.
2. Browser Height (Auto / Manual Setting)
This setting is the core option for resolving screen cropping issues. The default is Auto, which automatically detects the actual height of the page. However, for sites that load dynamic content with JavaScript or pages that respond to scroll events, the Auto mode sometimes fails to accurately recognize the page's actual total height. In such cases, the bottom of the captured image is cropped, or parts of the page are missing.
The solution is simple. You just need to manually enter the browser height. If the page is very long, set a sufficiently large value like 10,000px or 20,000px. Even if the set height is longer than the actual page, it will only create blank space and the content won't be cropped, so it's better to set it generously. The tip text at the bottom of the input box (💡 If you cannot see the background image, manually adjust the browser height) is in the same context.
3. Image Quality (Auto / Manual)
The default is Auto, which automatically balances the file size and the image quality of the capture result. If you want to reduce the file size, lower the quality; if you need the highest quality for printing or a portfolio, you can manually set it to maximum quality.
4. Website Connection Mode (Desktop PC / Mobile)
This feature is particularly useful for designers and planners. The default is Desktop PC (FHD), which renders the page in a desktop layout based on Full HD (1920×1080) resolution. If you switch to Mobile (Phone) mode here, the page is rendered in the exact same responsive layout as if accessed from an actual mobile device.
For example, when analyzing the mobile version design of a competitor's website or checking the mobile layout of your own webpage, you can capture and save the mobile screen directly from your PC without needing to take out your smartphone. Capturing the same URL in both desktop mode and mobile mode is also great for use as responsive design inspection data.
5. Save Format (JPG, etc.)
The default is JPG. For general web reference collection or sharing purposes, JPG is efficient in terms of image quality versus file size. If you need a capture result that includes a transparent background or require crisper text captures, you can select other supported formats.
6. Delayed Capture (Use when page loading errors occur)
The default is a 1-second delayed capture after load. If a page is captured immediately as soon as it loads in the browser, images, fonts, or dynamic elements that have not yet finished rendering might be captured in an empty state. Setting a delayed capture time makes it wait for a certain period after loading is complete before capturing.
If the page has many elements loaded asynchronously, such as ad banners, video thumbnails, or sliders, try increasing the delay time to 2~3 seconds. Conversely, for light and fast static pages, you can reduce the delay time to speed up the capture.
Bonus Options: Retina Mode and Specific Area Capture
At the bottom of the advanced settings, there are two additional checkbox-style options. Knowing these along with the basic 6 settings allows for even more precise captures.
Retina Mode (Saves as a high-resolution image by doubling the pixels)
Activating Retina mode doubles the pixel density of the captured image. You can obtain an image twice as sharp compared to capturing at a standard monitor resolution, making it suitable for print production, high-quality portfolio collection, and detailed UI inspection work. However, since the image file size increases proportionally, it is more efficient to keep the default value if it is for simple reference purposes.
Specific Area Capture (Query Selector)
If you want to capture only a specific desired element—such as a header banner, a specific section, or a product card area—rather than the entire page, use this option. You can specify the capture target element using CSS Query Selector syntax, which is an especially useful feature for developers or those familiar with HTML/CSS. For instance, if you specify a class or ID like .product-detail or #main-banner, only that element will be neatly captured.
Practical Use Scenarios: Try it in these situations
Now that we've looked at the features one by one, let's explore specific scenarios of how you can actually utilize them in practice.
Scenario 1: Benchmarking Competitor Landing Pages (Marketers)
A competitor's new promotional page has opened. You need to analyze the structure, copy, and image placement and share it with your team. By pasting the URL into Vivoldi and pressing the OK button, the entire vertically long landing page is saved as a single image. Saving it in both desktop mode and mobile mode respectively provides useful data for responsive strategy analysis.
If the capture gets cut off midway, generously set the browser height manually in the advanced settings. If a rendering error occurs, switching to Firefox mode is also a solution.
Scenario 2: Responsive Web Design Inspection (Web Designers)
A new service page has been deployed. You need to check if the layout breaks on mobile screens. If you set the website connection mode to 'Mobile (Phone)' in Vivoldi and capture it, you can obtain a full-screen image of the responsive layout exactly as it would appear when accessed with an actual smartphone.
You can check quickly without needing a smartphone or opening developer tools.
Scenario 3: Batch Collection of Reference Images (Planners / Bloggers)
You need to collect multiple images from a design reference site or a shopping mall detail page. At this time, if you utilize Vivoldi's Image Extractor feature, you can batch download all the images included on that page with a single click.
Compared to repeating the right-click and save process dozens of times, the time is drastically reduced.
Scenario 4: Full Archiving of News Articles
You need to keep a record of an important news article or announcement. If you only save the link, the original text might be modified or deleted later. By capturing the URL with Vivoldi, you can permanently preserve the entire screen of the page at that time as an image file.
Activating Retina mode will save the text much more clearly.
Image Extractor: Batch Download Webpage Images
Besides web capture, another useful tool provided by Vivoldi is the Image Extractor. If web capture saves the entire page as a single image, the Image Extractor is a feature that retrieves the individual images embedded in that page in their original file format.
It is especially effective when collecting images from pages where multiple product images are listed, such as shopping mall detail pages, portfolio galleries, or image-centric blog posts. With the traditional method, you have to repeat right-click → 'Save as...' on each image dozens of times. Using the Image Extractor compresses this process into a single click.
[Image of automated web scraping process]
From a work efficiency perspective, you can reduce the time spent on web scraping and image saving tasks by over 90%.
Of course, in the case of copyrighted images, they should be used strictly for personal study or internal reference purposes, and commercial use requires the original author's permission.
Vivoldi Web Capture, Things to Keep in Mind
While Vivoldi's web capture feature is certainly convenient, there are limitations and precautions good to know before using it.
- Pages requiring login: Member-exclusive content or pages only accessible after logging in cannot be captured. This is because the server accesses them in a non-logged-in state.
- Dynamic interaction pages: Content that appears only through mouse-over or click events (dropdown menus, pop-ups, etc.) is not included in the capture results.
- Batch capture: The free plan can only process 1 URL at a time. To process multiple URLs simultaneously, a plan upgrade is required.
- Preview quality: The preview displayed immediately after capture is a scaled-down image for display purposes. Since it saves at the original resolution when downloaded, do not judge by the preview quality.
- Missing background images: If background images inserted with CSS background-image are invisible, it is often resolved by manually setting the browser height.
Compared to browser extension methods, Vivoldi's strength is that it can be used online immediately without installation and offers advanced features like rendering engine switching and mobile mode emulation. However, in environments requiring fully automated repetitive tasks or bulk processing, API integration or utilizing a paid plan might be more suitable.
Step-by-Step Summary: Quick Guide for First-Time Users
For those using it for the first time, here is a step-by-step summary of the fastest way to get started.
- Step 1: Access the Vivoldi web capture tool page.
- Step 2: Paste the address of the webpage you want to capture into the URL input box.
- Step 3: Click the OK button first with the default settings.
- Step 4: When the capture result appears, check the preview and click Download.
- Step 5: If the screen is cropped or the background is invisible, expand the Advanced Settings, manually set the browser height, and try again.
- Step 6: If you need a mobile layout, change the website connection mode to Mobile (Phone) and capture again.
- Step 7: Activate Retina Mode if a high-resolution capture is needed.
Conclusion: Free Yourself from Repetitive Tasks and Focus on the Essence
Web reference collection, competitor analysis, responsive design inspection, content archiving. The commonality of all these tasks is that they are preparatory work, not the core business. To dedicate more time to valuable analysis and creative work, it is reasonable to leave repetitive and mechanical capture tasks to a tool.
Vivoldi's web capture tool is an online-based tool that can be used directly in a browser without needing to install separate programs. The basic usage is simple enough with just a URL input, and through advanced settings, you can get the desired results even in tricky situations.
If you haven't used it yet, give it a try right now. Just picking a frequently visited webpage and pasting the URL will allow you to immediately experience the value of this tool.
If you found this article helpful, share it with colleagues or team members who are experiencing the same inconveniences.
How do you currently handle web capture tasks? Let us know in the comments, and we can communicate with even better tips.
Full Web Page Capture, Start Right Now!
No installation, just enter a URL and you're done. Try the Vivoldi web capture tool for free.
