Sending a friend a photo link and displaying the image inside a webpage are different jobs. The first can benefit from context and download options. In the second, the browser needs an image file it can load. Checking what an address returns helps you paste the right one.

Use the page link for a visit

A photo page can include a title, description, album navigation, and a download action. Share that address when you want readers to see the picture in context. If an address opens with an interface surrounding the photo, you are probably on a page.

Test that the direct link opens the file

A direct URL returns image content to the browser. A file extension can be a clue, but it is not definitive. Use the direct image address supplied by the service and try it from a separate session. If the address leads to sign-in, expiry, or an access error, the image may fail on another site too.

Try the embed in its destination

On an HTML page, an img element loads the file from its src attribute. Alternative text can explain the information or function the image provides. If your editor does not accept raw HTML, use its own image control. Preview the result on desktop and phone before publishing.

Consider the life of the link

An embed depends on the remote file. Removing it, changing its address, or restricting access can affect the page that uses it. Note where the address appears. As a final check, follow the page link, try the file URL, and verify the correct photo appears in the embed.

Recognise three different ways to reach the same picture

Suppose you want to reuse a photograph from a recipe. The album page may display a title and the picture. A direct file address may open just the image in a browser. An embed uses that address inside HTML and tells another page where the image belongs. To distinguish them, paste the address into a blank browser tab and see what it opens. A page with headings, buttons and comments is usually different from the file itself. Put that page address inside an image element and the browser may receive a page where it expects an image. A download button can also use its own address, so test whether that address works for embedding. If the source requires permission, seeing it while signed in does not establish that other visitors can view it. Try a session that has never signed in. Record which kind of address worked before you add it to multiple pages.

Check both places after adding an embed

Inspect the embedded photo in the editor's preview and again in the page a visitor will open. An editor may handle remote images differently for security reasons. At phone width, check that the image fits and that the relevant text is still easy to find. If the picture is important to understanding the article, give it appropriate alternative text. Take expiry into account before putting a temporary link into a page meant to last. Moving the source or changing its permissions can affect the embed. A list of pages and the image addresses they use makes later repairs easier. If an image disappears, test the file address on its own and then see which address the embed calls. When the file opens separately but fails on the page, check the layout and the page's rules for external resources. When it fails in both places, start with access, expiry or the source address. Retest from a signed-out browser after any repair.