Exported logo pixelated - help!

Question

Hello,
I am new to illustrator, I am trying to make an indesign logo display better on the web. I have worked out how to convert an indesign file into a illustrator, I made the file the correct pixels and then exported it for 72 resoution but it is pixelated? I thought indesign was vector based? I would be so grateful if someone could let me know what I am doing wrong?
Thanks,
Kristina

Answer 1

Regarding DPI, that is a term which is only relevant for print. If you create an image in Adobe Photoshop 9" X 6" in size at 72 pixels per inch (or "DPI") it will print out on paper at that size and resolution. On a normal letter sized sheet of paper that 9" X 6" X 72ppi image might look a little coarse. At 72 pixels per inch it's only 648 pixels across by 432 pixels tall. If the same graphic is created at 150 pixels per inch it's going to look quite a bit sharper when printed on paper. It's still the same 9" X 6" printed size, but at 150ppi it has 1350 X 900 pixels. That's how "DPI" and resolution works in print.
DPI really doesn't mean anything for graphics that will be shown on computer screens, mobile phone screens, tablets, HDTV sets or even LED-based "jumbotron" signs. They all have fixed pixel grids and a raster-based graphic is going to map to them pixel for pixel regardless of any DPI setting that was applied to it. If you have a 1920 X 1080 resolution computer screen, a raster based graphic 648 X 432 pixels in size is going to occupy that amount of pixels on a HD resolution monitor regardless of whether it was saved at 72 DPI, 150 DPI or even 2000 DPI. The DPI setting makes no difference.
I work with customers helping them create artwork to either show on a LED-based electronic variable message center sign they just purchased or working with them on creating digital billboard ads. The DPI concept comes up frequently. It's difficult to get them to understand the importance of the pixel dimensions of their graphics and assets and the pixel dimensions of the LED sign or monitor where the ad will be displayed.
Regarding SVG, all of the new web browsers support SVG natively. Even the past couple versions of Microsoft Internet Explorer have built in support for SVG. Old Windows XP based PCs running Internet Explorer 8 (which lacked SVG support) are disappearing fast. In the mobile space most new phone models support SVG with their "stock" web browsers. I frequently visit https://html5test.com/ for feature comparisons with a variety of web browsers on different devices. SVG support is far better than it used to be. IMHO, SVG support is widespread enough now to use it without all sorts of browser fall-back hacks. User interfaces on web sites created in SVG will be able to scale up or down across the extreme size and pixel count differences of many displays, be it a small mobile phone display or a 5K resolution 27" iMac screen.