How to save a sharp logo for my website

Question

I'm pretty new to photoshop and illustrator and trying to create a simple text-based logo to use on my web site, for example: http://codepen.io/d3wannabe/pen/BWrbZa

You get wildly different versions of that depending on what browser you use to render the text (which is why I obviously must create the image myself), but for example on Chrome you can already see a blurriness around the edges of the font.

The problem I'm having in Illustrator is that when I write in a certain font (e.g. "Arial Rounded MT Bold" at 24pt), the font looks beautiful and crisp against my background colour at 200% zoom, but I start to see blurring at 100% - then I'm not sure what it is about the 'save to web' process, but the image loses further clarity by the time it ends up on my website (as a 'type optimised' png).

I'd read somewhere that photoshop was better for saving images of text for web, but I see a similar blurriness there even in advance of exporting (and of course a 200% zoom in photoshop just pixelates the image).

So what I'm really lacking is a step-by-step for-dummies type guide of how to get crisp images of text onto a website. At this point I'm not sure if perhaps I've just chosen a bad colour contrast, or fonts that don't scale well - although I'm also wondering if there's something significant in the fact the font looks beautiful in Illustrator at 200% or larger - perhaps that means I should be exporting the font from Illustrator at a larger size than required and then doing additional downsizing (somehow!) afterwards - although of course again I can't trust web browsers to do that for me.

EDIT: I should also have noted that the effect is much worse on my monitor versus my laptop (tempting to say I have a bad monitor but there's many websites where the monitor version looks fine too!)

Answer 1

Photoshop vs. Illustrator should not make such a big difference here. Things you can try:

• Convert logo text to outlines before saving as PNG.
• Save a very large PNG (eg. 1000 pixels) and scale it down in your CSS.
• Save your logo as SVG (its what Apple does on their website). This is a more recent approach used by a web developer i am working with. Use this to clean up your SVG and this to encode and make it browser-compatible.

Answer 2

Export your logo as an SVG for three reasons:

1. It'll look sharper than any other format
2. It'll load faster than any other format
3. It can be resized to any dimension you'd like and never lose quality.

As a web developer working at a decent sized agency, we export all of our client's logos as SVGs. I wouldn't even bother with PNGs, they're much larger in size and usually won't be anywhere near as sharp or sleek as an SVG.

Here's what you should do:

1. Design your logo in Illustrator
2. Export your logo using Illustrator's save as SVG feature
3. Import the SVG into your site using an image tag or directly with the SVG code Illustrator provides

It's pretty simple, and you'll have an extremely sharp logo that loads faster than any PNG will.

Edit: Use Illustrator over Photoshop, you want a sharp vector logo that can be sized up to any dimensions at will, not something that's limited to the size you design it at. Photoshop has SVG export capabilities, but it's quite janky compared to Illustrator. I'd 100% use Illustrator for this case, it does matter which you use.

Answer 3

Monitor PPI

This is entirely hypothetical, but there is a fair chance that this has to do with an OS UI scaling. Nowadays a lot of monitors have so many pixels that many people find it uncomfortably small if everything is displayed at 100%. The result is that when you buy a full HD monitor for example windows will by default zoom in slightly. If there is information beyond the current sizing it will then use that information to fill up that added detail, so 100% might look slightly unsharp and you need to save higher DPI versions and server those to make it look sharp on those monitors. So yes, in that case, you do let the browser do all the downsizing (you can even pick the algorithm in CSS, but you shouldn't want to). Here is a very old answer describing how to do it.

Answer 4

Well, to have it be crisp while at such low resolutions, there's only really one route. Vector graphics. One such suggested filetype is SVG (Scalable Vector Graphics), but it is not enough to just load in a bitmap and then export as SVG, because then you're trying to just force a rasterized file into a vectorized one, it can't look any better than the original by that route.

You're mentioning fonts though, so I guess you're typing in Illustrator and it looks clear. Fonts are natively a vector format, so when you export that as svg, it should remain nice and crisp. Not necessarily quite as much though, fonts often take a little extra cheating for extra crispy crunchiness with subpixel level control, depending on your OS.

Depending on your original file, you may need to essentially trace over and recreate the vectors for your file, and only then export as SVG.

Also Save to/for web is code for "butcher my file with lots of compression to make it small and load fast."

I promise 100% that SVG is the way to go. You already have Adobe Illustrator, but for anyone that doesn't, Inkscape is another vector graphics editor that is free and open source and can easily be used to get sharp logos at any size.

PDFs also use vector graphics (mostly, though you can also embed raster images), but they are not supported for logos on the web (the one shown in tabs, etc...).

There are many tutorials around for creating them, e.g. in Inkscape (so anyone can try) https://www.youtube.com/watch?v=mX7Nbj1xFco Just at the end save as SVG instead.

And also in webpage form: http://lebende-bilder.blogspot.qa/2014/03/tutorial-how-to-create-logo-in-inkscape.html

If you would rather go with PNG still (a raster format) then it is probably best to start with a rather large file and create many scaled down version for use in different parts of your site. The scaling algorithm can also matter, I would suggest using something at least on the level of SincLanczos (it is available in the free and open source GIMP and in Photoshop for sure as well though the naming may be slightly different). A tutorial that goes for a PNG logo in Inkscape is here: http://audioplastic.org/blog/2011/07/03/inkscape-logo/ I think that some of the effects they used are rasterized and that was the motivation for them to use a PNG.

Here is a great tutorial on the topic using Illustrator: https://design.tutsplus.com/tutorials/svg-files-from-illustrator-to-the-web--vector-20899

As he points out, some of the things he is doing are not needed for text, but if you're starting from a raster image, then you somehow need to get from that to vectors. Inkscape has a tool that attempts this automatically, but it can only really handle simple inputs well. I'm not familiar enough with Illustrator to say if their tool (if they have one) is any better. That is why I suggested earlier that you may need to trace the vectors over the raster image to recreate the logo and then ditch the raster image and export.

SVG will prevent the wildly different versions as the OP noted at the start, because the logo will be represented as mathematical equations once in SVG (it does not embed fonts, they are converted to the equations for the shown shapes). In PDF you actually could get wildly different font display, especially if the embedded font isn't supported by your OS, in which case it will use some other default font to display the text.

I will reiterate once more, DO NOT use the web formats for anything you want shown in high quality. The purpose of that export is to save bandwidth and decrease load times by using lots of lossy compression (while hopefully keeping the image barely acceptable) because sites don't want to waste that bandwidth. That said, it has its uses, not everyone is looking to display everything at absolute maximal quality. SVG also keeps sizes down though, but many things we want to show don't work as SVGs, e.g. photos we take with our cameras are rasterized from the instant we take them and it makes little sense to shoehorn them into an SVG. Depending on if that is the central focus of your site or not, you may or may not want to compress them for web (e.g. you probably don't want to for Flicker's user images, those images are sort of the whole point of it, but you may want to for images in forum posts like this one.

Answer 5

I would not worry about the blurriness of the image when zoomed. If someone needs to zoom in 200% to comfortably read the page then the text is too small or their sight is not good enough for them to notice that the image is blurry at such extreme zoom levels.