How to store images for email signatures
When adding an image to an email signature it is recommended not to use the in built upload feature of Patronum, but instead store them in Google Drive.
By storing your images in Google Drive you are able to take advantage of Google's dynamic image resizing capabilities. This article will show you have to to securely use Google Drive as a repository for all your email signature images.
Create a Public Folder
First, we would recommend that you create a folder within Google Drive which is accessible from the Internet. We believe that the most secure option for this is to create a folder which anyone with the link can view. This is done by changing the Sharing permissions on the folder:-
Now any files stored in the folder will be accessible from your website or 3rd party email signature HTML code.
Getting the Unique File URL
Now in order to embed the image within your code, you’re going to have to get the file id from the URL. This is done by selecting the file, now right click, select "Share" and then “Copy link“.
This will give you the URL and the unique file. Unfortunately, this URL can’t yet be used within our HTML code as it opens the Google image viewer.
So we need to perform a little modification of the URL in order to access the image directly.
In this example, Google provided us with the URL https://drive.google.com/file/d/1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo/view to access the image directly we simply need to change the “file/d/” to “thumbnail?id=” like this, https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo. You’re now good to go and embed this modified URL within your HTML.
Expert Tip
You can also add &sz=w{{width}}-h{{height}} at the end of the URL to resize your image so that you’re not sending large files within your email signature. We typically recommend using either width or height and let Google deal with the ratio for you. ie https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo&sz=w50
Your email signature code would look something like this:-
If you want your logo or profile image in a circle use the style="border-radius:50%" syntax like this:-
But remember… if you’re using these images for an email signature make sure you don’t go crazy. Keep to our recommendations on email signature design and use appropriately sized image such as social buttons, or a nice banner.
By storing your images in Google Drive you are able to take advantage of Google's dynamic image resizing capabilities. This article will show you have to to securely use Google Drive as a repository for all your email signature images.
Create a Public Folder
First, we would recommend that you create a folder within Google Drive which is accessible from the Internet. We believe that the most secure option for this is to create a folder which anyone with the link can view. This is done by changing the Sharing permissions on the folder:-
Now any files stored in the folder will be accessible from your website or 3rd party email signature HTML code.
Getting the Unique File URL
Now in order to embed the image within your code, you’re going to have to get the file id from the URL. This is done by selecting the file, now right click, select "Share" and then “Copy link“.
This will give you the URL and the unique file. Unfortunately, this URL can’t yet be used within our HTML code as it opens the Google image viewer.
So we need to perform a little modification of the URL in order to access the image directly.
In this example, Google provided us with the URL https://drive.google.com/file/d/1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo/view to access the image directly we simply need to change the “file/d/” to “thumbnail?id=” like this, https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo. You’re now good to go and embed this modified URL within your HTML.
Expert Tip
You can also add &sz=w{{width}}-h{{height}} at the end of the URL to resize your image so that you’re not sending large files within your email signature. We typically recommend using either width or height and let Google deal with the ratio for you. ie https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo&sz=w50
Your email signature code would look something like this:-
<img width="64px" height="64px" src="https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo&sz=w64">If you want your logo or profile image in a circle use the style="border-radius:50%" syntax like this:-
<img width="64px" height="64px" src="https://drive.google.com/thumbnail?id=1O0f5oexsFqazv8T3CnMDv87sgSkEWjRo&sz=w64" style="border-radius:50%">But remember… if you’re using these images for an email signature make sure you don’t go crazy. Keep to our recommendations on email signature design and use appropriately sized image such as social buttons, or a nice banner.
Updated on: 17/08/2023
Thank you!