Logo-designs come out blurry on the web

Graphic Design
#1

Hey!
Im a an freelance illustrator and artist, but occasionally get commissions to make logos. Something I love (the creative side of it that is). I make my logos as vector files in illustrator and they always look nice and crisp when I showcase them in Preview before I send them off to the client…

HOWEVER ever so often when I see the clients using the logos in different contexts on the web they are blurry. Something that makes me very frustrated as I can not be proud of my work.

When I create the logos, I haven’t used pixel-aligning as I never knew of this before: How can I align logos that are already created? Could this be the issue?

My other guess is that I often export the png- file for screen use in 300 dpi, something I also recently noticed is recommended to be only 72dpi… However, after trying to export it as 72 dpi it looks fine in my Preview, but how can I be sure that it will look fine for my clients??

Please help :slight_smile:

#2

Logos and other small graphics on websites typically work better as SVG files since it’s a vector format that will display at the best possible resolution for the monitor.

As for what clients do with your logos, just look away. You can’t control their inept decisions. All you can do is give advice and let them have at it.

2 Likes
#3

Your clients should receive high-resolution and high-DPI (8000 px, 300 DPI), transparent-background .SVG, .PDF, .EPS and .PNG files.

72 DPI is too low a value for print and modern high-DPI screens, so you should avoid it and stick to 300 DPI:

#4

So many red flags. Another discussion.

It’s not true.

#5

I agree with the gist of what you’re saying in that any bitmapped logo files supplied to clients should have a high number of pixels—for example, 8000x8000 pixels (depending on the logo’s shape, of course).

However, there is no such thing as inherent resolution in a bitmapped file. An 8000x8000-pixel file set to 72ppi contains precisely the same information as one set to 300ppi or 2000ppi. Saving an original logo bitmapped file to 300ppi is common, but the ppi does not matter until a specific ppi is needed for print.

When preparing bitmapped images for the web (or for use on any electronic display), ppi is irrelevant — only the pixel dimensions are used. If the area allocated to an image on a website is, for example, 400x400 pixels, a 400x400-pixel image is needed.

It gets a little more complicated when dealing with high-pixel-density displays and responsive websites, but even then, ppi is irrelevant. I suspect Juliak’s problem is related to the logo being too complex to display well at the size it’s used or, perhaps, it was saved for the web as a JPEG instead of a PNG, GIF, or better still, an SVG.

#6

I should really elaborate on my posts a bit more.
So here it goes.

You want your image to be 300 dpi at the desired dimensions in your project. So if your image is going to be an 11x17 inch spread, then your image needs to be 300 dpi at 11x17 inches. This would make the pixel dimension be 5100 x 3300. If you just want your image to be a 1 inch square thumbnail, then you would need your image to be 300 dpi at 1x1 inch. This would make the pixel dimension be 300 x 300.

This is incorrect.
When you place your image at size it will have what’s known as an Effective Resolution.

For example, placing a 72 PPI image into your layout and scaling it to 24% would mean that effectively it’s 300 PPI.

72/24*100 = 300

And the 300 PPI for print is completely false.

This is based off a Litho Printing algorithim that has taken the globe by storm for over 30 years.

In Litho Printing LPI is the lines in halftone or screen. The higher the number of lines the smaller the screen, the lower the number the larger the screen.

Computers are great - but did you know that mathematically they cannot rotate objects outside of 45 degree - or at least they couldn’t not so sure now - so long since I checked.

However, the LPI for haltones meant a Square of dots would be rotated 45 degrees for the screen angle.

When we measure a square from side to side - say it’s a 1x1 square.
If you then measure from the corner to corner it’s 1.41.

It’s basic trigonometry.

It’s this rotation number, 1.41 - that is multiplied by the LPI.

And someone somewhere had their LPI set to 150.
And that 1.41 number got rounded up to 2 for ease of mulitplying.

150x2 = 300
And this number has now stuck with everything.
Where it should really be 211.5.

However, the LPI would change for a newspaper - so that could be 80 - 120.
so you’re looking at 112.8 up to 169.2

For RAG magazines you could be looking a LPI of 120-150
For higher end gloss magazines you’re looking at 150-200.

So even if the LPI was 200 - and you multiplied by 1.5 - that would be 300 PPI.

And all of the above is perfectly fine for printing off Litho printing using certain LPIs.

Digital Presses are not like this - in fact can be a lot more forgiving (and you don’t need 300 PPI even for most Litho printing given a LPI of 150).

You then have many more different printing methods:
Litho
Flexo
Screen
Digital
Gravure
Rotary
Surface

etc.

So the 300 rule is fake.

I 100% never ever ever resize images in Photoshop to exactly the size required at 300 PPI.

That should never be done - unless for a very specific reason.

With this - you’d be left resizing your images for every type of printing - because only Litho would require the faux 300ppi rule.

Bottom line is to ask your printers what way they want it setup and what image resolution is best for their printing method and output devices.

#7

I’m gonna second JustB’s first comment - if your files are built as vectors, SVGs are going to be the hardest ones to get messed up when used on a webpage. Using a lower DPI/PPI value for web images is typically only a concern to keep the load times down. My guess might be that if you sent them a large raster file, someone manually reduced the file size for that reason and the compression ruined the quality.

And ultimately, a masters tools in a novices hands will still only produce novice work. You can do your best to make it easy for them to use, but if they’re not going to commit the effort/budget to use it right…well, I try not to think about it. If it really bothers you, in this specific scenario you could try finding a web designer to recommend when you’ve completed a project.