Logo exporting blurry/pixelated

[lrush91]

I am new to Illustrator and I have created a logo for my website. I am working with a developer who is setting it up in Word Press. When I see the logo on the site it looks blurry. The developer asked me to provide my original logo resized to 100px height. But when I do this the export is still blurry. 

My process is: Create an artboard that is 100x100px and resize my logo to fit inside it. Export as png, 72ppi. Anti Aliasing = None. 

I created the logo with a series of strokes + text. In order to resize the image I outlined the path.

The first photo is how it looks on the website, the second is how it should look. 

I hope someone can help!

Thanks.

[Monika Gause · Accepted solution]

100 Pixels just isn't that big.

There aren't enough pixels to get a clear image. Ask the web developer to use an SVG. Current browsers support that file format and there should be plugins for Wordpress to uspport it as well.

[lrush91]

Great, I will try that. Thank you!

[Muhammad5E1F]

i also want to create a logo for my website. i don't know how to use illustrator. please if you know then create a one logo for me. logo contain these words "Waec Runs 2021"

[motherboard5F99]

i also want to create a logo for my website. i don't know how to use illustrator. please if you know then create a one logo for me. logo contain these words "parentner" Likes

[Monika Gause]

Perhaps you can post this on job boards.

[CarolSmm]

Hi, I had this issue with the logo on my website Bathroomer (link removed by moderator)

As you can see there it`s quite blurry as yours. The reason is that you cannot avoid it being pixelated at that low resolution. The best solution would be using the original document with vector type and graphics, second best would be re-creating it yourself.

[needforname]

The thing is... it is possible to achieve an un-blurry raster logo image. Adobe just chooses to ignore this for whatever bizarre reason. Don't take my word for it, see for yourself...

If you're on a Mac, open up any vector logo file in Illustrator (or even a preview app). Now, using the Mac's built in screenshot functionality take a couple screenshots of the logo at different sizes (including a smaller preview size). You'll notice how the resulting screenshot preview (which can be saved in either jpg or png format) looks perfectly fine (nice and crisp with no blur issues, even at smaller viewing sizes). Now using the same vector logo file that the screenshots were taken from, create a couple similarly sized web logo files directly from Illustrator's save or export option. Unless you're on a lower resolution display, you'll notice a lot of blur (especially in smaller viewing sizes, where text becomes nearly unreadable and the graphics become a visual mess). It's a night and day difference compared to the screenshot pics. 

I've spoken with and shared screens with multiple Adobe reps over the past couple of years regarding this issue. Each rep confirmed my workflow as being correct, confirmed that we tried every possible save approach and configuration options, confirmed that the screenshot produced a much better image, and confirmed to me that they'd be passing the findings on to the developers. Yet time and time again this issue goes unresolved. How this isn't a top priority is beyond me. 

As a result users are stuck using this archaic and very limiting screenshot technique (which of course doesn't allow saving with background transparency, centering of image, batch render, etc). The suggestion to use SVG would be great, if it were actually a widely accepted format accepted by all social media sites, portfolio sites, web building platforms, etc.

So my question to Adobe remains the same... if Apple can achieve an unblurry raster image, why can't the world's premiere design software company? Until SVG format has become commonplace and actually accepted universally, the suggestion to just use that file type is not acceptable. Especially when there's a simple solution to fix the jpg and png issue. 

[Doug A Roberts]

Can you share comparable test files created using these methods?

[Monika Gause]

Unless you're on a lower resolution display,

By @needforname

Yes. That's the whole point of it.

You are comparing a state of the art Retina screen resolution (which triples or quadruples the actual resolution) to a 1:1 export.

I guess when exporting this from Illustrator, you just used the 72 ppi setting, right? So maybe you just want to use the export for screens and then use the 3x or 4x setting and then of course you still need to code your website with breaking points and media queries so you can make use of those images (created with a screenshot or exported doesn't matter in that case).

[SALONI350891943gd4]

 

[Monika Gause]

What's wrong with your image?