from image to pixel perfect html emails
TRANSCRIPT
![Page 1: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/1.jpg)
From image to pixel-perfect HTML email
… in minutes!
Powered by InstaCut.eu
![Page 2: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/2.jpg)
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!
![Page 3: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/3.jpg)
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, …
– …
![Page 4: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/4.jpg)
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!
![Page 5: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/5.jpg)
Say what? OK, visit instacut.eu
![Page 6: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/6.jpg)
Create a Free Account
![Page 7: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/7.jpg)
Upload Your Image or Pdf
![Page 8: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/8.jpg)
Time to Cut!
![Page 9: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/9.jpg)
Cut, cut, cut!
![Page 10: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/10.jpg)
Cut, cut, cut!
![Page 11: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/11.jpg)
Switch Cut orientation (press C)
![Page 12: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/12.jpg)
Cut, cut, cut!
![Page 13: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/13.jpg)
Cut, cut, cut!
![Page 14: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/14.jpg)
Cut, cut, cut!
![Page 15: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/15.jpg)
7 Cut, cut, cut!
![Page 16: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/16.jpg)
Cut, cut, cut!
![Page 17: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/17.jpg)
Cut, cut, cut!
![Page 18: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/18.jpg)
Cut, cut, cut!
![Page 19: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/19.jpg)
Cut, cut, cut!
![Page 20: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/20.jpg)
Cut, cut, cut!
![Page 21: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/21.jpg)
Cut, cut, cut!
![Page 22: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/22.jpg)
Cut, cut, cut!
![Page 23: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/23.jpg)
Cut, cut, cut!
![Page 24: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/24.jpg)
Cut, cut, cut!
![Page 25: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/25.jpg)
Cut, cut, cut!
![Page 26: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/26.jpg)
Cut, cut, cut!
![Page 27: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/27.jpg)
Cut, cut, cut!
![Page 28: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/28.jpg)
Cut, cut, cut!
![Page 29: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/29.jpg)
Cut, cut, cut!
![Page 30: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/30.jpg)
Cut, cut, cut!
![Page 31: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/31.jpg)
Cut, cut, cut!
![Page 32: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/32.jpg)
Cut, cut, cut!
![Page 33: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/33.jpg)
Cut, cut, cut!
![Page 34: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/34.jpg)
Cut, cut, cut!
![Page 35: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/35.jpg)
Cut, cut, cut!
![Page 36: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/36.jpg)
Cut, cut, cut!
![Page 37: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/37.jpg)
Cut, cut, cut!
![Page 38: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/38.jpg)
Cut, cut, cut!
![Page 39: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/39.jpg)
Cut, cut, cut!
![Page 40: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/40.jpg)
Cut, cut, cut!
![Page 41: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/41.jpg)
Cut, cut, cut!
![Page 42: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/42.jpg)
Cut, cut, cut!
![Page 43: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/43.jpg)
Cut, cut, cut!
![Page 44: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/44.jpg)
Cut, cut, cut!
![Page 45: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/45.jpg)
And we’re almost there!
• Press Apply & Download and get a ZIP with …
![Page 46: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/46.jpg)
And we’re almost there!
• Press Apply & Download and get a ZIP with …• HTML with CSS code
![Page 47: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/47.jpg)
And we’re almost there!
• Press Apply & Download and get a ZIP with …• HTML with CSS code• A bunch of images
![Page 48: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/48.jpg)
Squeezing Images
• Uniform images are automatically squeezed in all possible directions
• Compressed images become GIF• Limited compression based on email clients
![Page 49: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/49.jpg)
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
![Page 50: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/50.jpg)
Text Images to Real Text
• Right mouse button on cell=> Text Edit
![Page 51: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/51.jpg)
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up
![Page 52: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/52.jpg)
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up• Fill in values
Make similar by changing settings
![Page 53: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/53.jpg)
Text Images to Real Text
• Right mouse button on cell=> Text Edit
• Dialog box pops up• Fill in values• Edited cell indicated by (*)
![Page 54: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/54.jpg)
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
![Page 55: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/55.jpg)
Add Link in Text
• Fill in HTML code in Text/HTML field
![Page 56: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/56.jpg)
Add Link to Image
• Right mouse button on cell=> Edit
![Page 57: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/57.jpg)
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up
![Page 58: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/58.jpg)
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up• Fill in values
![Page 59: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/59.jpg)
Add Link to Image
• Right mouse button on cell=> Edit
• Dialog box pops up• Fill in values• Edited cell indicated by (*)
![Page 60: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/60.jpg)
Tips
• Zoom in browser for pixel-perfect clicking
![Page 61: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/61.jpg)
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?
é é
Ü Ü…
![Page 62: From image to pixel perfect html emails](https://reader035.vdocuments.mx/reader035/viewer/2022062220/55ccd458bb61eb506f8b485a/html5/thumbnails/62.jpg)
• Try it yourself? Visit: http://instacut.eu• We’re in beta, so for now it is totally FREE!