Illustrator svg with screen shot image, large file size

Question

I am using screen shots to present my web work then building an .svg with some additional layers, the resolution turns out great. I choose to save it as an svg because it maintains clarity, in the future I could animate some layers, so it gives me flexibility.

I am using illustrator for the quality it delivers, but when I place my screen shot and save as an svg some file sizes are 15mb, while others are much less, there is an inconsistency, not sure what the difference is in my process.

In all the folio items I use the same process, using my mac to take a screen shot and place it inside an illustrator template.

For a visual this is an example, I exported it as a .png and there is definitely quality loss, but here I have a subtle background and the screenshot in one.

My question is how can I use a screen shot inside my illustrator canvas while maintaining a relatively low file size saved as preferably .svg format (quality is obviously important).

Is svg even the optimal solution, is it unwise to use that since its kind of arbitrary, there really is no artwork, but quality is a big factor to me that is why I chose it.

So basically how can I use screen shots inside an illustrator to get maximum quality with keeping relatively low file size, is there a better alternative?

Answer 1

Illustrator and SVG only deliver quality and clarity if you create documents with vector shapes in them, but you are storing bitmaps in there.

Vectors are like a recipe that can be scaled up or down to feed 2 or 200, while a bitmap is like a TV dinner for 1. It will never feed 200. You can’t increase its quality beyond what is already frozen in there.

The likely reason you are getting large file sizes is that you are scaling the screenshot up in Illustrator and then Illustrator is saving out a much larger bitmap image in the SVG. You can easily turn a 1 megabyte bitmap into a 15 megabyte bitmap in this way, but again, that doesn’t increase the quality.

The better way to do enhance the presentation of bitmap images is to use an HTML editor — not Illustrator — and place your PNG bitmaps into an HTML page. Then add borders or other presentational attributes to your images with CSS rules.

If you want to make the best-quality presentation that you can, then don’t use screenshots. Instead, use a tool that can convert a Web view into a bitmap image at both 1:1 (standard) and 2:1 (Retina) pixel ratios. Then your PNG images will show at much higher quality on Retina Display (assuming your work is Retina-ready which it should be.) For example, on the Mac there is an app called “Page Layers” (available in Mac App Store) that, given a URL, can capture the entirety of the Web rendering of that URL at 1:1 or 2:1 and give you either a flat PNG or a layered Photoshop document, where each element of your work is on a different layer. If you don’t use a Mac, look for a tool like that on your platform. Then those bitmap captures of your work can be turned into a Retina-ready browsable portfolio in any HTML editor.

One thing to consider, though, is just to show the actual native Web work, not pictures of the work. If the work is Web-native, then the best way to present that is as Web-native elements. So instead of creating an HTML page with a picture of a table in it, you would put in the actual table. You may want to convert the styles to inline styles with a tool, then just Copy/Paste the HTML example of your work into an HTML portfolio of your work. Or you can use iframes to show the actual online work in your portfolio without any conversion.

Answer 2

The problem is that SVG is a text format and therefore images (afaik) are all embedded via a base64 string. That is usually pretty big.

What you can do is try and optimize the PNG (reducing colors, etc) as much as possible with a tool before putting it into illustrator and hope it doesn't undo all of that.

Binary formats (or at least compressed formats) would probably do better, but theres no guarantee that you will get tiny file sizes.

Answer 3

There might be several issues:

The PNG you are saving might have transparency, also called an alpha channel. If it blends with other objects, or Illustrator thinks it might, this could cause the file size to get big. SOLUTION: Make sure the PNG doesn't have a transparency or, even better, save as a jpeg, which can't have transparency.

You may want save as a jpeg anyway, since the file sizes are generally smaller than png (since it uses lossy compression). Save at a high quality setting (8 or 10) to avoid compression artifacts.

Another thing might be that you have 'Preserve Illustrator editing capabilities' checked which can increase file size. You need it to edit in illustrator, obviously, but not to export for the web.

You can also try linking your screenshots rather than embedding them, but than you have to keep track of a separate file.

Finally, you can have actual vector graphics instead of a screen shot. You can do this by saving a chart as a PDF, usually done by printing it to a PDF file. Than you can import the PDF into Illustrator, clean it up and save the vector graphics as an svg. I wouldn't recommend this though since the PDF may be difficult to clean up and with all that detail the file size may well be larger than a screenshot.

Answer 4

As Jeremy S. has already pointed out, creating a PDF of the website is one way. Here's a quick tip for converting websites to PDF using Paparazzi! and Sketch.

• The 3 step guide to convert any webpage into Sketch | Hacking UI
  • Launch Paparazzi, then type in any website’s URL into the URL bar and press ‘enter’.
  • Wait until the screenshot loads, then launch Sketch, and drag the screenshot into any open Sketch document.
  • In Sketch – filter the layer panel for the word “clip”, then select all layers and hit the ‘backspace’ key on your keyboard to delete all those layers. (These are masks that keep you from selecting elements on your document).

Then you can Export to PDF (or SVG) and continue editing in Illustrator. This is my preferred workflow for website redesigns, where I have to work with a lot of existing elements that have to be reorganized.

Also Paparazzi grabs the whole page height, which usually is difficult via normal browser print dialogues.