How to Keep a Web Image Reference Visible While You Browse

Give the reference one specific job

Start with a decision, not an instruction to collect everything attractive on the page. Imagine that you are designing a landing page with a broad landscape photograph behind a short headline. Your question might be: Does this image leave enough calm space for the text? A single candidate can answer that question. You do not yet need a gallery, a mood board or a permanent image library.

Look at the photograph in its source context first. Note the subject, horizon and area where text could sit. If the image seems relevant, keep it visible while you examine other candidates. You can then judge whether a new result solves the same problem better instead of trusting a vague memory of the first. This is a small working comparison across time, even though only one image is on your board at once.

Record the source before leaving the page

Before opening another result, put two things in a scratch note: a link to the page and a short visual label. For example, “A — low ridge with empty sky; possible headline area.” When a page contains a gallery, note which image you mean. A link to a page with thirty thumbnails is much less useful if you cannot identify the candidate later.

Keep this note next to your design question. As you browse, compare each new result against A on that question alone: does it offer more uninterrupted sky, a cleaner horizon or a better subject position? If yes, replace the working reference and relabel the note. If no, move on. The link is a way back to the source, and you should still check the source's usage terms before putting any image in published work. For now, it mainly prevents your search from turning into an anonymous sequence of pictures.

Put a working copy beside your browser

With the source recorded, add the image to FloatBoard using the image workflow supported by your installed version. Place its window at the side of the browser and enable always-on-top if you want the picture to remain in view when another browser tab receives focus. The recorded demo above shows the broad idea on Linux: a web landscape is visible in the app while the browser continues through more results. The app's controls can change between versions, so use the controls in your current build rather than copying a video gesture exactly.

Keep the reference small enough that the search results remain usable. If the window covers the next candidate, move or resize it. On a narrow screen, alternate between the source page and your reference instead of squeezing both until neither is readable. FloatBoard is a working surface for a few live references, not the only place to store project assets.

Write down what the image actually contributes

Add one short note in your project document: source, useful detail, design implication. For the landscape example: “Source page X; open sky above the ridge; headline could sit in the sky if contrast holds at the target crop.” This records an observation rather than a promise that the image will work. It also helps you discard an image later without losing the reason you selected it.

Distinguish the photographer's caption from your own description. When you copy text from a source page, mark it as a quotation and keep the link beside it. If you cannot state what the picture helps you decide, it may be pleasant browsing rather than a useful reference. Return to the design question and either replace the image or stop collecting for a moment to make a draft.

Check the original at the size that matters

When one image seems promising, pause browsing and put it in the layout you are actually designing. A photograph with a generous sky in the browser can lose that space when a wide hero is cropped into a phone-sized panel. Try the real headline and button over the image; check whether they cover the subject or become hard to read. Make one note about the result, such as “desktop works, mobile crop loses the ridge.”

If the concern is fine detail, open the source at an appropriate size instead of zooming a tiny board preview. If the concern is composition, draw a rough crop boundary or test the layout directly. These are different checks. Do not reject a useful composition solely because the floating window is small, and do not approve a final crop solely because its thumbnail looks calm. The working reference keeps your thought in sight; the design canvas settles the decision.

Know when one reference should become a shortlist

One visible reference works while you search for a better answer to one question. It stops working when the task changes to comparing multiple dimensions simultaneously. If you need to decide among a few different visual directions, build a deliberate shortlist and name each candidate's role. The landscape hero-image shortlist explains how to move from browsing to a decision. For a broader design research library, see the reference image organizer guide.

Do not let the demo's later multi-image view define the free plan. The recorded session includes more images than the current free plan's five images per day. Check the current limits before starting a larger session, and keep originals in a separate folder regardless of the plan you use.

Finish the session with a decision and a retrievable file

End the search with a one-line decision rather than a board full of unexplained candidates. Write “keep A for desktop draft,” “replace A with B because the mobile crop is cleaner,” or “no candidate answers the brief; search for a lower horizon.” If A moves forward, place its page link beside that decision so you can retrieve the exact image. If it fails, record the failed criterion; that becomes the next search query.

Do a five-minute layout test before starting another round of browsing. Seeing the candidate behind real content often reveals that the problem is the headline placement, not the photograph. In that case, adjusting the layout may be more productive than collecting more pictures. If you do need several distinct candidates at once, switch to the hero-image shortlist workflow and give each a clear role. A one-image pin is best while you are testing one hypothesis.

Frequently asked questions

How can I keep a picture visible when I change browser tabs?

Use a small always-on-top image window next to the browser, or arrange two windows on the desktop. Leave enough room to inspect new results; the reference should support browsing, not cover it.

What if the floating window blocks the next result?

Move or resize it, or briefly hide it during a closer look. Returning to the same reference is more useful than keeping it permanently in the way.

When should one reference become a shortlist?

When you need to compare different solutions at the same time. Choose a few candidates with distinct roles rather than accumulating similar images as you scroll.