How to save images and screenshots with the Heart Photos extension

· He.art

A white castle with blue spires beside a rushing turquoise river in a green valley
A white castle with blue spires beside a rushing turquoise river in a green valley · Made by AI

You find an image you love on a web page, save it, and a week later you have a small, blurry copy in your Downloads folder with no idea where it came from. The Heart Photos extension for Chrome fixes all three: it finds the largest copy the site has, keeps where it came from and who made it, and puts it straight into your Heart Photos library. It also takes screenshots, and lets you draw on the page before you take them. Here is how to use it.

Install it and connect

The extension is free on the Chrome Web Store. Press Add to Chrome, then pin it to the toolbar so it is one press away. It needs Chrome 116 or newer.

Press its heart in the toolbar and it opens in Chrome's side panel, beside the page you are on, so you can scroll the page and use the panel at the same time. The first time, press Connect your He.art account and sign in. From then on the extension can add images to your library and your galleries, and it can never delete anything.

Save images

The Save images tab lists every image on the page you have open. For each one it looks for the largest copy the site keeps: it reads the sizes a page offers in its srcset, and it knows how common image services shrink an image in its address, so it can ask for the full-size one instead. The list says how big each one is.

A few things make a long list easy to work through:

  • Hide small images is on to begin with, so icons and buttons stay out of the way.
  • Search finds an image by its name, credit, license, address or size.
  • The order can be As found, Largest first or Smallest first.
  • The arrow at the start of the row looks at the page again, after you have scrolled and more images have loaded.

Tick the images you want, or tick the box at the top to select them all.

Their license, credit and source come too

When a page says what license an image is under, the extension keeps it: Creative Commons licenses linked from the page, and the photo sites' own licenses (Unsplash, Pexels and Pixabay), with the credit written the way each site asks, such as "Photo by ... on Unsplash". The page the image came from is saved as its source, so you can always find your way back to it.

On unsplash.com there is one more switch, Unsplash+. Off, as it starts, it hides Unsplash+ images, which come with a watermark unless you subscribe; on, it lists only those.

Choose where they go, and who sees them

Once something is ticked, a bar appears at the foot of the panel:

  1. Save to picks the gallery. Leave it on (Default gallery) to put the images in your library without a gallery, or type in its search to find one of yours. Type a new name and + Create new gallery makes it for you.
  2. Save as sets who can see them: Public, Unlisted (only people with the link) or Private.
  3. Press Save.

Take a screenshot

The Screenshots tab captures the page three ways:

  • Draw region (D): you drag a rectangle over the page, and that is what is saved.
  • Visible page (V): what the window shows right now, no scrolling.
  • Scrolling capture (S): the whole page, scrolled from top to bottom and joined into one tall image.

Each region you draw stays as a chip under Repeat, so one press captures the same rectangle again later, handy when you are watching something change. Every screenshot is listed ticked, and it saves through the same bar as images do: the gallery, who sees it, and Save.

Mark up the page first

Before you capture, you can draw right on the page with Annotations: Text (T), Arrow (A), Rectangle (R), Ellipse (E) and Freehand (F). They scroll with the page, so a scrolling capture shows them all, and Ctrl+Z takes back the last one. Clear annotations removes them when you are done.

Pick a color

The Color picker (C) shows a zoomed-in view under your pointer as you move it over the page. Click and the color is added to a list in the panel; press one to copy it, and hover over it to see where on the page it came from. It is a quick way to grab the exact red of a logo or the blue of a button.

Make the keys your own

All of those letters are listed under Hotkeys until your first screenshot. Press a key there and then the one you would rather use to change it, or turn them all off with the switch beside the heading. In the settings (the gear at the top), Individual hotkeys adds a switch to each line, so you can turn off just one. Restore hotkey defaults appears once anything differs and puts them back.

Try it

Add the Heart Photos extension, connect your account, and save the next image you love at its full size. Then open it in Heart Photos, or take it into He.art's Photo studio and make something new from it.

More from the blog