Direct link to a hosted image in email signatures

How to get a direct link to a hosted image

This quick guide shows how to use popular image hosting services to store your graphics so you can use them in email signatures. It works for more than email signatures, but well – it’s an email-signature-focused blog.

Technically speaking, when using image hosting services like Dropbox, Flickr, or Imgur as source, you need to make sure the images are publicly available and that you’re using their direct URL. So, if you want to learn how to get a direct image URL from those services and how to use such image in signatures, read on.

Why direct image URLs matter in email signatures

You might wonder how direct image links or direct URLs are related to email signatures. To understand that, it helps to look at the two types of images that can be used in emails:

  • Hosted images (aka linked images) – stored online and displayed in an email signature via – yup, you guessed it – a direct URL.
  • Embedded images – added directly to the email body.

That’s the absolute basics. If you want to learn more, here’s a great article that offers a deeper perspective: What’s the difference between hosted and embedded images.

Now, this article is all about using hosted images. Keep in mind that in most cases, it is better to host images for email signatures on your own servers, because then you have full control over them. If you do not own a server, or even a WordPress-based website, your best bet is to use an image hosting service.

This article shows how to get a direct link in some popular image and file hosting services. As you will see, it requires more than just right-clicking the image and choosing copy image address. Select one of the links below to quickly learn how to get a direct image URL in your hosting service:

How to get a direct image URL in OneDrive

Note: Getting the direct link from OneDrive doesn’t work in OneDrive for Business. In other words, you won’t be able to use images from your company’s SharePoint or OneDrive.

  1. First, use any method to upload the image to OneDrive:
    Direct image link in OneDrive 01
  2. Once the image is uploaded to your OneDrive, right-click it and choose Embed from the menu. In the menu which appears on the right side, click Generate.Direct image link in OneDrive 02
  3. This generates a direct link.
    Direct image link in OneDrive 03
  4. Before you use this link, delete its attributes (the question mark and the part to the right), as some email clients are picky about displaying images with those attributes included.

How to get a direct image link in Dropbox

  1. First, upload your image to Dropbox. To do it, simply drag & drop your image or click Upload > Files and choose the image from your local drive.
Direct image link in Dropbox
  1. Once you upload the image, hover the mouse over it and click the Share button appearing next to the picture.
Direct image link in Dropbox 2
  1. In the newly opened window, access the settings by clicking the gear icon.
Direct image link in Dropbox 3
  1. On the Link for viewing tab, make sure that the file is generally available, that is:
    • Anyone with link can view the image,
    • expiration is off,
    • no password is needed to view the image, and
    • downloads on dropbox.com are allowed.
Direct image link in Dropbox 4
  1. Next, click Create and copy link or Copy link. The link gets copied to your clipboard. Paste it into any text editor (or into the address bar).
Direct image link in Dropbox 5
  1. The last thing you need to do is to find the dl=0 parameter at the end of the address and change it to raw=1. For example, if your original URL is:
    https://www.dropbox.com/<SomeRandomCharacters>/avatar.png?dl=0
    then you need to change it to:
    https://www.dropbox.com/<SomeRandomCharacters>/avatar.png?raw=1
    And that’s it!

How to get a direct picture URL in Imgur

  1. Start with uploading the image you want to be hosted. On Imgur’s main page, click New post and either drag & drop or use the Choose Photo/Video button to upload your image.
Direct image link in Imgur
  1. Next, hover over the uploaded image, select the ellipsis (three-dot) button and choose Get share links.
    Direct image link in Imgur 2
  2. Copy the link from the BBCode (Forums) field.
    Direct image link in Imgur 3
  3. As you’ll notice, the link will be surrounded by the [img] and [/img] tags. Just paste the link into any text editor (or wherever you want to use it) and remove both the tags to get the direct URL. No tricks or other steps are required.

How to get a direct URL to an image in Flickr

  1. After you upload or find the picture you want to use, click Share Photo.
    How to get a direct URL in Flickr
  2. In the sharing window, go to Embed and copy the code from the box below. The direct link is the part between quotation marks, right after src=.
    How to get a direct URL in Flickr

How to get a direct image link in Google Drive

Personally, I use and like Google Drive, but it’s not usable for hosting your email signature images at this moment, because Google has prevented hotlinking such files in any external domain.

The instructions below show how to get a direct image URL from Google Drive if you need it for anything other than email signatures.

  1. First, let’s add an image. Either drag & drop your image (and skip to Step 3) or click New > File upload.
Google Drive - upload a new image
  1. Now, choose the image you want to host in Google Drive.
  1. Now, you can access your photo. Select it, click the three dots and go to Share > Share to display file sharing options.
Google Drive - access image sharing options
  1. If you want your online image to work right (display for everyone, that is), you need to ensure the Viewer role and the Anyone on the Internet with the link can view access option are selected. Before you copy the link, go to the advanced settings by clicking the cogwheel:
Google Drive the right image sharing settings
  1. In the advanced sharing options, make sure both settings are checked.
Viewers ad commenters can see the option to download, print and copy
  1. Back in the Share image window or in Google Drive folder view, click Copy link.
Google Drive - copy link

Note: Mind that in this step you are not getting a direct link yet – it is a shareable link. A shareable link cannot be used as a source in email signatures. As a reminder, at the moment of writing, no Google Drive link seems to be valid for this purpose.

  1. Now, copy the shareable link by selecting Copy link and paste it into any text editor. You will see a link similar to this one:
    https://drive.google.com/open?id=1evNxiyU9A5yB8LYnUVsOq3--Y6hc4JJq
    or
    https://drive.google.com/file/d/1evNxiyU9A5yB8LYnUVsOq3--Y6hc4JJq/view?usp=share_link

    The series of letters and numbers in bold is the image id (*img_id*) of this particular graphic file. You need to copy and paste it into the following URL format
    https://drive.google.com/uc?export=view&id=*img_id*
    Simply replace the whole *img_id* part with your id (in this example, it is 1evNxiyU9A5yB8LYnUVsOq3--Y6hc4JJq). This way, you get the proper direct URL ready to use in your signature. For example:
    https://drive.google.com/uc?export=view&id=1evNxiyU9A5yB8LYnUVsOq3--Y6hc4JJq

How to use the direct image link in an email signature

Getting your graphics online is the first step. The next one is to use those files in practice. Below, you can see how to use them to create your own, professional email signature using direct image links.

  1. Once you upload your image and get the direct URL, go to our free email signature generator and choose the signature template that suits your needs. You can use the & > buttons to see more templates or you can also scroll through all the available signatures in our signature template gallery.
    Free email signature generator - choose template
  2. Next, fill in your data and go to the Graphics section. Replace Logo URL and Banner URL fields with the right direct links you have acquired before. The Logo/Banner linking to fields specify which website will open when the logo or banner is clicked in the email signature. Leaving those fields empty will not add any hyperlinks.Free email signature generator - insert graphics
  3. On the right side, you can see the signature preview. When you finish making changes and the signature looks well, click apply your signature and follow the instructions specified for your email client.
    Free email signature generator - preview

A few good tips

Finally, here are some tips for using images in email signatures

  • For best results, use images of the same shape as the sample logo or banner. Using a rectangular logo when the sample logo is square will usually result in deformed graphics.
  • Mind the recommended width and height values. It is best to use exactly the same dimensions, or their multiplied values. This way, when a picture is resized, it shouldn’t become blurry.
  • After you apply the signature, send a test email to yourself. If you are using image hosting services, links might break or change. It is possible for a picture to show up in the signature preview and disappear after applying the signature.

Useful links: