Blurry timer
Why does my countdown timer look blurry in email?
In short
The image has fewer pixels than the screen shows. Phones and most laptops draw two or three device pixels per CSS pixel, so an image displayed at its own size gets stretched and looks soft. For a crisper result, design the timer about twice as large as it should appear and set the width on the image tag to half — plus a font weight and colors that survive a GIF’s 256-color palette.
Where the blur comes from
An image tag with width="480" asks for 480 CSS pixels. On a retina phone that is 960 or more physical pixels. If the GIF itself is 480 pixels wide, every pixel is stretched to cover two, and thin strokes and small labels turn soft. This is why a timer can look crisp on an office monitor and fuzzy on the same person’s phone.
The fix: design larger, display at half width
Build the timer in the editor at roughly twice the size you want in the email, then change the width in the code you paste to half of the design’s width. High-density screens then get real pixels to draw instead of stretched ones. tikio designs can be up to 744 pixels wide, so a timer displayed at around 370 pixels can be fully doubled; for a wider timer, go as large as the limit allows.
<img src="https://t.tikio.io/e/a1b2.gif" alt="Offer ends soon" width="372" style="border:0;max-width:100%;height:auto;" />What tikio already does for edge quality
Each design is drawn at twice its size and scaled down once when you publish, which gives the digits smooth, anti-aliased edges before the GIF’s colors are reduced. That removes jagged edges, but it does not add pixels: the GIF itself is the size of your design, so on a retina screen the half-width technique above is still what makes it truly sharp.
Other causes of a soft or blotchy timer
A GIF has at most 256 colors per frame, so smooth gradients and soft shadows can band or dither. Solid colors and clear contrast between digits and background render best. Very thin fonts at small sizes are the next thing to lose detail — pick a weight that still reads at the size of your labels. And if your ESP re-hosts or resizes images, insert the timer as an HTML image by URL so it is served straight from tikio.
Last updated: 2026-09-30.
FAQ
Questions, answered
Does a larger design make the email heavier?
The image is loaded when the email is opened, so it does not count toward the email’s size or Gmail’s clipping limit. The GIF itself gets bigger with its dimensions, so double only as much as you need.
What happens in Outlook for Windows?
Classic Outlook ignores CSS sizes, so it relies on the width attribute. Keep width on the tag — without it a design made at double size shows at double size there.
The timer on my website looks sharp. Why is the email one different?
A website embed is live HTML, so text is drawn by the browser at any pixel density. In email the timer has to be an image, and an image only has the pixels it was made with.
- Client compatibility
- Apple Mail frozen timer
- Gmail dark mode
- Evergreen merge tags
- Image vs iframe
- Sizes and limits
- Outlook first frame
- Wrong time
- Stops after a minute
- Klaviyo flows
Setting one up? See guides for your email platform or website embed guides.
Build a countdown that behaves
Free during early access — no watermark, no credit card. Your first countdown is live in a couple of minutes.
Create your free countdown