How To Send Html Email With Images

Problem : Images Arent Properly Sized

How to Send HTML Email Templates with Outlook 365

Unless youre slicing up a design in Photoshop or know precisely what size you need to save an image, chances are good that just dumping images into an email will result in improperly sized images and broken designs.

While we can easily constrain images within a parent element on the webwithout specifying an images size-we need to explicitly state the width of an image to ensure that it displays at its intended size. Especially in Outlook, which cant interpret an images size from the file. However, this isnt typically done in an inline style. Instead, we use the width attribute on the img element.

< imgsrc="https://site.com/path/to/image.jpg"width="600"/> 

This works for most email clients. Occasionally, you may run into a problem with an images height being improperly interpreted. In this case, you can either add the height attribute or rely on CSS to set the height property to auto.

Attribute Method:

< imgsrc="https://site.com/path/to/image.jpg"width="600"height="200"/> 

Inline CSS Method:

< imgsrc="https://site.com/path/to/image.jpg"width="600"style="height: auto "/> 

Embedded CSS Method:

< style type=text/css> img< /style> 

The Difference Between Plain Text And Html Emails

Its a debate thats been going on for more than a decade, with many swearing by either side. But, there is a right answer, and its not quite as clear cut as many would hope.

In this blog post, well teach you everything you need to know about plain text and HTML emails, and help you choose the right format for your email.

Inserting Html Into Gmail

First of all, compose or export HTML code and save it as a .html file. Make sure your editor saves files as plaintext, without any additional formatting. It also cannot add .txt or any other extensions to the file name, otherwise, the code wont be rendered properly. Macs TextEdit, for example, needs a few tweaks to work with HTML as expected.

Now, try to save it. Notice how it adds .txt extension by default, making the file useless. Be sure to use File -> Save on Mac and uncheck the part about .txt extension.

Right-click on the file and open it with a browser of your choice. It should render as expected. If you see raw HTML, double-check if the file was saved properly and if your editor relies on plain text.

Copy the entire content of a page, either with Ctrl+A / Cmd+A or just use a mouse or a trackpad. Then, insert it into your Gmails compose window and send it!

The email should arrive in exactly the same shape as it was last seen leaving your inbox.

Don’t Miss: How To Get Your Old Email Back

Using Gmail And Chrome

  • 1Copy your HTML email’s body text. If you can’t open the HTML file in your browser for some reason, copying the HTML’s body text and pasting it into your email’s source code will also work as long as you’re using Gmail in Google Chrome.
  • You’ll need to copy all of the body textâincluding the “< body> ” and “< /body> ” tagsâbut Gmail will cover the document type and the HTML tags themselves, so you don’t need to copy those.
  • 2Open
  • Html Vs Plain Text: Whats The Difference

    How to send HTML emails in Gmail

    Lets start by taking a quick look at the differences between plain text emails and HTML emails.The simplest explanation is that an HTML will contain images and colors while a plain text email contains no images, no graphics, and no formatting.

    Here is an example plain text email:

    And here is an example HTML email:

    Now, its important to note that many mistakenly call HTML emails with minimal formatting plain text emails. These emails will actually be HTML, but are designed in a way that they appear to be sent as if coming from a colleague or friend. Theyll feature no or very minimal use of graphics and simple text formatting. Heres an example of that:

    Well call these hybrid emails because even though they are not exactly a plain text email, they do imitate plain text emails.

    Recommended Reading: Unarchive In Outlook

    Sending Multipart Html Emails Which Contain Embedded Images

    I’ve been playing around with the email module in python but I want to be able to know how to embed images which are included in the html.

    So for example if the body is something like

    < img src="../path/image.png"> < /img> 

    I would like to embed image.png into the email, and the src attribute should be replaced with content-id. Does anybody know how to do this?

    How To Send Html Emails In Gmail

    Gmail is hugely popular, with more than 1,5 billion accounts registered worldwide. Both individuals and businesses use it actively and who once becomes an avid Gmail user is usually hesitant to ever say adiós. No wonder, Gmail offers everything one needs to send and receive emails and packs it all in a very simple to use interface.

    One consequence of simplifying the UI was hiding the good old HTML editor and for a good reason – 99,9% of users dont need it at all. But without it, adding banners, images, tables or other visual media and making them all look good together on any screen size is really tough . Luckily, with a simple workaround, you can still use HTML templates in your Gmail messages.

    Hold up. Before we continue, be sure to get your copy of our 10 responsive HTML email templates. Including welcome email, newsletter, onboarding, and more.

    You May Like: How To Write An Email To Your Professor

    Add Style=display: Block To Your Image

    This is the most popular fix for extra padding and space. However, as you can see below, it creates a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets.

    Heres an example of this code in action:

    < img src="https://www.test.com/test.jpg" style="display:block"> 

    Embedding Images In Html Email: Have The Rules Changed

    How to Send HTML Email Newsletter Templates with Gmail

    Recently we shared helpful tips on creating and designing HTML emails, and today wed like to focus on the related topic which is really important for email developers. We will talk about email attachments, their types and limitations, primarily concentrating on how to send an HTML email with images.

    Recommended Reading: Building An Html Email

    How The Images Are Automatically Displayed Within The Email

    An interesting observation can now be made. At the receiving end, the embedded images within the email will automatically be displayed when it is opened. The email service wont block the images now since they are accessed from the email attachments which are stored in its own server. Hence, these files are no longer external to the email service and are displayed directly within the email message without blocking them.

    Using Mozilla Thunderbird client, you can easily forward email messages with images embedded inside them. Since these images are attached along with the mail, they can also be forwarded as attachments, and the links within the email are updated automatically. Thus, an image from an external source becomes permanently embedded in the email.

    All posts on 7labs, including this one, are compliant with our Content Disclosure policy.

    Dont Add Too Many Images

    Add variety to your email. Include images with text blocks and headers throughout. Too many images could be a negative factor to your deliverability.

    If you have more questions about email deliverability, download our newest Email Deliverability Guide. Its chockful of all the latest tips, tricks, and advice to make sure your emails get delivered where theyre supposed to go.

    Read Also: How Can I Get My Email Back

    How Html Emails With Local Images Get Delivered

    Thunderbird, being a client program installed in the senders side can access files on it. It automatically finds out links to local and external elements and attaches them within the email. Then, it modifies the local and external references within the email body to link to the corresponding attached elements. The entire email along with all the attachments is then sent to the recipients.

    An Advantage To Using Thunderbird As Your Email Client

    How to paste raw HTML into an email in Gmail?

    You can connect email accounts such as Gmail, Yahoo Mail, and many others to the Thunderbird email client and use it as your one-stop email app. This way, it is slightly easier to insert HTML into a Thunderbird message, and you can send your outgoing messages through any of your connected email accounts.

    You May Like: Where Can I Print Out An Email

    How To Send Html Email With Gmail

    There are three ways you can load the Gmail Compose window with your custom HTML.

  • Copy/paste the rendered HTML into the Gmail Compose window.
  • Paste your HTML code into the Gmail Compose window using Chromes Developer Tools
  • Use a Chrome extension to add an HTML editor to the Gmail Compose box
  • My favorite technique is #2 because it gives me the most control and doesnt require an extension. Every extension you add to Gmail crowds the interface just a tad more.

    Find Our Where To Host Your Images

    Many email service providers do not host the images in your email template for you. In this case, you need to host them yourself. This means all of your images need to be uploaded to a web-based location which is publicly available , so that your recipients can see them in the email.

    The best way to identify this location is by consulting with your IT department or whoever is responsible for running your website. They will help you figure out where you can host your images, give you the specific URL prefix you need to enter into Mail Designer 365, and show you how to upload all the image files.

    Recommended Reading: My Yahoo Homepage Restore

    Explaining The Lower Performance Of Html Emails

    According to HubSpot, the trend has to do with email clients ever changing filtering systems. They believe that the number of HTML elements contribute to whether or not the email is considered spam or promotional. An email with heavy HTML formatting and several images may be deemed promotional and thus never seen by the subscriber.

    But, I believe the cause to be deeper. Image tags and HTML-rich templates may be flagged more often, but that may only be a small piece of the puzzle. A bigger piece has to do with the behavior of recipients and their expectations of email in general.

    Todays average inbox is flooded with more than 100 emails a day, but it wasnt always that way. Email, originally, was a platform for 1-to-1 interaction. Youd email your friends, family, and co-workers. Maybe youd get the occasional forwarded funny email, but most of the time, your email was used to communicate.

    Nowadays, email is seen as more of a promotional avenue. Consumers exchange their emails for discounts and notifications of sales. This led to marketers creating more flashy and salesy emails, but the heart of email isnt flashy or salesy. Instead its that aspect of 1-to-1 communication.

    This is where HTML emails fall short. They may look nice, and subscribers may say they want those emails, but the truth is that theyre looking for what feels like a 1-to-1 interaction.

    Choosing An Image Input Method For Html Email

    How to Insert and Send HTML Email Newsletters in Gmail

    HTML emails can be challenging, especially if you lack the know-how to deal with them. However, no universal recipe exists for embedding images, but for images that look good to your recipients:

    • Research your clients and the emails they use as well as the devices they prefer
    • Define the purpose of the email campaign as it may be more efficient and safer to enclose an image separately
    • Check the availability and reliability of resources
    • Test your emails and images before sending them out

    If youre not proficient enough in HTML emails, consider using a drag and drop email template builder to make your work easier. Alternatively, choose HTML tools that will help you insert images in your emails, for example, this Online HTML Editor.

    Also Check: How To Email A Large Mp4 File

    So The Answer Is To Use Plain Text Emails

    Well Not exactly. This is why I said its not a clear cut debate in the opening paragraph. Plain text may perform better for HubSpot, but thats not the case for everyone.

    There is the possibility of lower engagement rates when using hybrid emails or plain text emails. Derek Halpern from DIYThemes : In my experience, when you send the full text, you get less comments, less social media shares, and overall, LESS interaction with your subscribers.

    While his experiences dont necessarily line up with others results its an important reminder: every business, and every audience is different. Because of this, there is no clear cut winner in this debate.

    For a B2B company, a plain text may make more sense. Its being sent to an inbox in which the recipient expects 1-to-1 communication. However, in the case of an eCommerce company, an HTML email may make more sense. Subscribers are expected images in that case and sending an email without them could be jarring and result in less clicks.

    Html Basics: How To Create Html Email Template

    A simple HTML email template includes two parts:

  • Header section: Any code placed between < head> and < /head> is referred to as the header section. All the media queries, styling and CSS animations are specified in this section.
  • Body: Any code placed between < body> and < /body> is the body section and the rendering engine uses the code to create HTML email structure.
  • You May Like: Remove Duplicate In Outlook

    Problem : Borders Around Images

    For most images, youll likely want to link an image out to a landing page. They are exciting, people are drawn to them, and they are familiar with tapping on images to take them places on the web. So it makes sense to link images in an email.

    When you wrap your img tag with an link, though, some email clients will automatically add a blue border around the image to denote that it is a link. While this is great from a usability standpoint, it sucks from a designers perspective.

    To prevent blue borders, we add the border attribute to our boilerplate image tag and make the value zero.

    < imgsrc="https://site.com/path/to/image.jpg"width="600"border="0"/> 

    Now, even when images are linked, we can sleep easy knowing that they wont have any nasty blue borders around them ruining our design.

    Embedded Images In Html Emails

    How to Send HTML Emails: 6 Steps (with Pictures)

    Editors note: this post was updated for accuracy and freshness in September 2021.

    Using data URIs to embed images in email has continued to attract a respectable amount of interest in the past. While the results were disappointing, we thought wed show you a viable workaround for those who dislike image blocking in email clients.

    Many marketers admit to approaching image embedding with a good amount of skepticism, given this techniques track record of:

    • Sloppy support in email clients
    • Producing large email file sizes
    • Adding attachments to the email message
    • Being a technique used by spammers

    Nonetheless, its popularity has endured, generally because of the promise that embedding is a legitimate workaround to image blocking in email clients. However, is this still true now?

    Also Check: What Does Cc Means When Sending An Email

    Popular Articles

    Related Stories

    Stay on top - Get the daily news in your inbox