3

I need to find out why the image here is really small. I need these images to be retina ready, so thats why they are at 50%. Please confirm that i have done this correctly.

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" width=
"700">
    <tr>
        <td class="leftColumnContent" valign="top" width="280">
            <!-- // Begin Module: Top Image with Content \\ -->

            <table border="0" cellpadding="20" cellspacing="0" style=
            "background-color: #eeeef9;" width="100%">
                <tr>
                    <td align="center" valign="middle" width="50%">
                        <div style="text-align:center;">
                            <h4 style="text-align:center;">DEL IKON</h4>
                            <hr style=
                            "height: 2px;background-color: black;border: 0;width: 160px;">


                            <p>På alle sider på hvisk.com – når<br>
                            du er logget ind – finder du i<br>
                            venstre side et ikon, hvor der står<br>
                            <strong>DEL</strong>. Når du trykker på
                            ikonet,<br>
                            kommer der en ’skuffe’ frem.</p>
                        </div>
                    </td>

                    <td align="center" valign="middle"><img src=
                    "https://gallery.mailchimp.com/54366e4388f5f1f871ed3d155/images/9de246f4-90cc-4185-b1b8-16b1b402b5e2.png"
                    style="width:50%;"></td>
                </tr>
            </table><br>
            <!-- // End Module: Top Image with Content \\ -->
        </td>
    </tr>
</table>
</body>
</html>
  • Using width:50% you have halved the size, not increase the image resolution. Look at this: http://stackoverflow.com/questions/16154494/retina-displays-high-res-background-images – Germano Plebani Jun 03 '15 at 16:22
  • Would it be best to use Media query to detect pixel ratio and change image css with that? –  Jun 03 '15 at 16:24
  • use the media query allows you to load the correct image depending on the device used. Usually the retina image are more heavy than normal. – Germano Plebani Jun 03 '15 at 16:28

2 Answers2

1

Setting an element to width:50% is relative to width of the parent container, not the width of the element itself, see the quick demo.

<img style="width:50%;" src="//dummyimage.com/100"/>

You could make the image at least x2 size of the parent container size then apply either of the CSS rules as needed for high pixel density displays, such as Apple retina display.

img {max-width:100%; height:auto;} or img {width:100%; height:auto;}

Stickers
  • 75,527
  • 23
  • 147
  • 186
  • currently the images can span out to roughtly 3000px width and height to give you an idea. And applying 50% has made them really small. –  Jun 03 '15 at 16:21
  • @Elevant your image is rather large (too large) already, just change 50% to 100%, it will be all good - http://jsfiddle.net/kt71jfx3/ – Stickers Jun 03 '15 at 16:55
  • Okay so i have no Retina device to confirm this, If i change the size to 100% it will look good on normal devices. How about Retina screens should it be okay? –  Jun 03 '15 at 16:59
  • @Elevant [Keep High-Density Displays from Uglifying Your Emails](https://blog.mailchimp.com/keep-high-density-displays-from-uglifying-your-emails/) – Stickers Jun 03 '15 at 18:15
1

I know what you mean. You mean why your picture is so large (3000px) but you set 50% --> less than 1500px? Because 50% is 50% of width td, not 50% of 3000px. Please set width:100% and maybe you know why

Nhân Nguyễn
  • 132
  • 8