Sharp countdown timers on high-density screens

A timer that looks crisp on one screen can look soft on another, because the second screen packs more pixels into the same space. The fix is to draw the image at twice the size and tell the email to show it at half. For an animated countdown that fix has a cost you can measure.

What 2x means

Apple’s Human Interface Guidelines describe it as a scale factor, where “a scale factor of 1 (also called @1x) describes a 1:1 pixel density, where one pixel is equal to one point.” A 2:1 density is called @2x, and Apple adds: “Because of higher pixel densities, high-resolution displays demand images with more pixels.”

Litmus applies the same idea to email. “Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. For images to look good on those screens, they need to be twice as large.” The larger file is then shown at its intended size, using “the original, intended display size in the width and height attributes to scale the larger image down”.

So a timer that sits 600 pixels wide in the email column should be a 1,200 pixel image for a 2x screen.

What EmailTimer.App produces by default

The image is rendered at the template’s canvas size, and the gallery’s three sizes are 600 by 200, 600 by 300 and 300 by 250, each listed in countdown timer examples. The snippet sets width and height to that same canvas size, plus an inline style of display:block; width:100%; max-width:600px; height:auto; border:0; for a 600 wide canvas.

That is a 1x image. On a 2x screen the device stretches 600 image pixels across 1,200 physical ones. There is no 2x switch in the editor today. What each attribute in the snippet does is set out in countdown timer HTML for email.

Building a 2x timer

The canvas accepts any size up to 4,096 pixels a side, so you can build at double size by hand.

1. Set the canvas to twice the display size, such as 1,200 by 400 for a 600 by 200 slot.
2. Double every layer’s position and size, and every text size.
3. Double the timer’s Scale. Gallery timers start between 72 and 160 percent, and the Scale slider stops at 220. A timer above 110 percent has to be enlarged by dragging its corner handle on the canvas instead.
4. Publish, copy the snippet, and change width and height to the display size: 600 and 200.
5. Change max-width in the inline style to the display size too. The snippet writes the canvas width there, which would let the image grow to 1,200 pixels.

Step 5 is for Outlook. Litmus reports that “Some versions of Microsoft Outlook still display the retina images at their full size, despite the explicit sizes set by the width and height attributes”. Its fix is that “you can include a max-width rule in the style attribute of the image”.

What doubling did to the file

Litmus warns that “As we increase the dimensions of an image, the file size increases, too. That can cause an email to load slowly.” To put numbers on it, I took four gallery designs, doubled everything as above, and rendered both versions with the product’s engine on 17 September 2026 at 12:00 UTC. A KB here is 1,024 bytes.

Four times the pixels cost a little over twice the bytes in every case, between 2.08 and 2.14 times.

The style mattered more than the scale. A cards timer at 2x weighed less than a rings timer at 1x. Cutting 30 frames to 20 took between 16 and 31 percent off each 1x file.

When to use 2x

A high-density screen is where the softness shows. Countdown timers on phones covers the other constraints of reading on a small screen.

A plain or cards timer at 2x, around 30 to 40 KB, is a small price for sharp digits. A rings or bar timer at 2x crosses 100 KB for a single image, so try it at 1x on a phone before deciding the extra weight is needed.

Size has no effect on what you pay. An open is one request for the image, whatever its dimensions, and the allowances are on pricing. To see what a finished file weighs before you send it, drop it into the GIF checker.

Questions and answers

Why does my countdown timer look blurry on a phone?

Most likely because it is a 1x image on a 2x screen, so each image pixel is stretched across several physical ones. Rebuilding at twice the size and showing it at the original size fixes it.

What size should an email countdown timer be?

Displayed at 600 pixels wide for a full-width slot, which is what the gallery’s default size assumes. For high-density screens, make the image 1,200 pixels wide and keep the HTML at 600.

Does a 2x timer look wrong in Outlook?

Some versions can show it at full size. Litmus’s fix is a max-width in the image’s inline style. Its own example pairs that with a width attribute and no height, and the snippet here keeps both attributes, so set max-width to the display width either way.

Will a bigger image use more of my plan?

No. Allowances count opens, not bytes. A bigger file only costs your readers load time.