From image to pixel perfect html emails

From image to pixel-perfect HTML email

… in minutes!

Powered by InstaCut.eu

Goal

Convince you that converting an image into an HTML + CSS email is a piece of cake …

… even for the numerous platforms, browsers and mail clients!

Why

• HTML + CSS email is simple, but … did you know– scaling a 1 px gif is fine, unless you scale it larger than 62.5

px?– a table cannot be longer than 23.7 inches or 1790 px for

older Outlook versions?– 600 px is the max width for the Gmail app on IOS?– Outlook 2013 doesn’t like images smaller than 15 px in a td?– there is Android, IOS, Windows, Linux, Opera, Firefox,

Internet explorer, Chrome, Yahoo, Gmail, Hotmail, Outlook 20XX, Thunderbird, …

– …

How

• Upload your image or pdf to http://instacut.eu• Cut it easily into small images• Add links and formatted text• Send test mail• Download your HTML + CSS + images archive!

Say what? OK, visit instacut.eu

Create a Free Account

Upload Your Image or Pdf

Time to Cut!

Cut, cut, cut!

Cut, cut, cut!

Switch Cut orientation (press C)

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

7 Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

Cut, cut, cut!

And we’re almost there!

• Press Apply & Download and get a ZIP with …

And we’re almost there!

• Press Apply & Download and get a ZIP with …• HTML with CSS code

And we’re almost there!

• Press Apply & Download and get a ZIP with …• HTML with CSS code• A bunch of images

Squeezing Images

• Uniform images are automatically squeezed in all possible directions

• Compressed images become GIF• Limited compression based on email clients

TODO’s

• Replace text images by real text

• Add links

• Rename images

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porta suscipit tortor, ut efficitur nisl scelerisque at. Donec eu purus quis risus euismod tristique.

image <img> text <p>

Image_003.png Logo_example.png

Text Images to Real Text

• Right mouse button on cell=> Text Edit

Text Images to Real Text

• Right mouse button on cell=> Text Edit

• Dialog box pops up

Text Images to Real Text

• Right mouse button on cell=> Text Edit

• Dialog box pops up• Fill in values

Make similar by changing settings

Text Images to Real Text

• Right mouse button on cell=> Text Edit

• Dialog box pops up• Fill in values• Edited cell indicated by (*)

Text Images to Real Text

• Right mouse button on cell=> Text Edit

• Dialog box pops up• Fill in values• Edited cell indicated by (*) • Hover to see original image

Add Link in Text

• Fill in HTML code in Text/HTML field

Add Link to Image

• Right mouse button on cell=> Edit

Add Link to Image

• Right mouse button on cell=> Edit

• Dialog box pops up

Add Link to Image

• Right mouse button on cell=> Edit

• Dialog box pops up• Fill in values

Add Link to Image

• Right mouse button on cell=> Edit

• Dialog box pops up• Fill in values• Edited cell indicated by (*)

Tips

• Zoom in browser for pixel-perfect clicking

Tips

• Zoom in browser for pixel-perfect clicking• Replace symbols by HTML Name (or code)

• Full undo/redo, even after closing project!• Uniform image not squeezed? Bad click or

compression artifact present?

é &eacute;

Ü &Uuml;…

• Try it yourself? Visit: http://instacut.eu• We’re in beta, so for now it is totally FREE!