CODEWITHSUNDEEP
cssemailhtml-emailmailchimp
rjtkoh
rjtkoh

Reputation: 201

Displaying images in email by default

I just sent a test email using mailchimp of an EDM I have custom designed coded. Everything works fine except the images won't display unless I specifically click 'display images'. I'm viewing in gmail on firefox. This is strange considering other emails that get sent to me have images displayed automatically. Is this anything to do with coding or some setting in Mailchimp?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Grill10 | Results</title>
    </head>

    <body>
        <center>
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background:#3b4040;
                   padding-bottom: 100px;">

                <!-- HEADER -->
                <tr>
                    <td height="90px" width="100%" id="bodyTable" align= "center" style="background-image:
    linear-gradient(to right, #f00439, #f28d0d);" >
                        <img src="http://www.robertkoh.net/grill10site/img/g10logoEDM.png">
                    </td>
                </tr>

                <!-- ____ COMPLETED THE QUIZ -->
                <tr>
                    <td height="40px" width="100%" align= "center" style="display:inline-block;
                                                                          color:white;
                                                                          font-family:arial;
                                                                          font-size: 20px;
                                                                          margin-top: 20px;"
                                                                           >


                        <p id="username" style="display:inline-block;
                                                font-weight: bold;
                                                color:white;
                                                font-family:arial;">Janet</p>
                                                completed the quiz:
                    </td>
                </tr>

                <!-- QUIZ NAME -->
                <tr>
                    <td height="60px" width="100%" align= "center" style=
                                                                    "

                                                                    color:white;
                                                                    font-family:arial;
                                                                    font-size: 25px;
                                                                    text-transform: uppercase;
                                                                    line-height: 30px;
                                                                    padding-left: 10px;
                                                                    padding-right:10px;" >


                        <p id="quizname" style="display:inline-block;
                                                ">LAKERS FRANCHISE HISTORY REALLY LONG TITLE</p>

                       </td>
                </tr>

          <tr>
            <td>
              <table align="center" >
                <tr>
                  <td id= "scorebox" width= "80%" align="center" style="
                                                                                      color:white;
                                                                                      font-family:arial;
                                                                                      font-size: 25px;
                                                                                      line-height: 10px;
                                                                                      padding-bottom: 20px;
                                                                                      padding-left: 10px;
                                                                                      padding-right: 10px;
                                                                                      vertical-align: middle;">
                    <p id="username" style="font-weight:bold;display:inline-block;">JANET SMORTHSENWORTH</p> SCORED 8/10
                  </td>
                </tr>
              </table>
            </td>
          </tr>


                <!-- PROMPT -->

          <tr>
            <td>
              <table align="center" >
                <tr>
                  <td id= "scorebox" width= "80%" align="center" style="
                                                                                      color:white;
                                                                                      font-family:arial;
                                                                                      font-size: 20px;
                                                                                      line-height: 28px;
                                                                                      padding-bottom: 20px;
                                                                                      padding-left: 10px;
                                                                                      padding-right: 10px;
                                                                                      vertical-align: middle;">Think you can do better? Click below to try yourself!
                  </td>
                </tr>
              </table>
            </td>
          </tr>

                <!-- CTA BUTTON -->
                <tr>
                    <td>
                        <a href="#" style="text-decoration: none;">
                            <table height="50px" width="280px" align= "center" style="background: #68c357;
                                                                                      border-bottom: 6px solid #009d22;
                                                                                      color:white;
                                                                                      font-family:arial;
                                                                                      text-decoration: none;
                                                                                      ">
                                <tr>
                                    <td align= "center">
                                        GRILL ME
                                    </td>
                                </tr>
                            </table>
                        </a>
                    </td>
                 </tr> 

                 <!-- SOCIAL -->
                 <tr>
                    <td align="center">
                        <a href="#"><img src="http://www.robertkoh.net/grill10site/img/fbEDM.png" style="margin-top: 40px; margin-right: 13px;"></a>
                        <a href="#"><img src="http://www.robertkoh.net/grill10site/img/twitterEDM.png"></a>
                    </td>
                 </tr>        
            </table>


        </center>
    </body>
</html>

Upvotes: 0

Views: 270

Answers (1)

Gortonington
Gortonington

Reputation: 3587

There is literally nothing on your end (as the sender) that you can do about image blocking. It is a default setting client-side and is controlled by the user/recipient.

This is a security measure used by many email clients to help protect their users from potential malicious attacks via downloaded files/images. There have been many now that use a cached image system that allows the images to be downloaded in a sandbox server by the email client that then scans the file for any potential issues. By doing this, it allows the images to be safely displayed to the recipient automatically as they would download from the vetted sandbox and not direct from the unprotected source.

If you, personally, want your Gmail to display images automatically, please go here for instructions: https://support.google.com/mail/answer/145919?hl=en

Upvotes: 1

Related Questions