How do I make text on a diagram made in Illustrator clear on the web?

[H&P1]

I have a diagram made in Illustrator cc where all the numbers all look clear and crisp in Illustrator but when I put on web, the numbers go blurry. I have tried saving as .gif and .png and .jpg and also changing text to 'sharp', type optimising when exporting/saving for web and different Document Raster Effect Settings but nothing seems to work. I have also tried saving as .svg, but my Wordpress won't take these files and I'm not permitted to use any plug ins. Can anyone help?

many thanks

[Monika Gause]

Please show.

[Myra Ferguson]

Are you putting the image online at 100% of the size that you're outputting from Illustrator?

[H&P1]

Yes I'm using it at 100%

[Ton Frederiks]

Use View > Pixel Preview at a 100% zoom level to get an idea of how it will look on your webpage.

[barbara_a]

As you found, small text does not display well on the web when it is rasterized. Make the text a larger point size, minimum 14 point.

[Eugenio.NYC]

Wordpress will change the compression of your images but we can change the default value using a plugin, go to the plugin section and then sear for jpeg_quality,  If you know Wordpress very well the other option you can add this PHP code

add_filter('jpeg_quality', function($arg){return 100;});

Let me know if that works

Eugenio

[Ray Yorkshire]

They state

''I'm not permitted to use any plug ins. ''

[Eugenio.NYC]

Do you have permissions to edit the code?

In Wordpress go to Appearance > Editor. inside search for the file functions.php then scroll all the way down an add this line of code

add_filter('jpeg_quality', function($arg){return 100;});

[Test Screen Name · Accepted solution]

Here's a really important test you can do.

Save your file and view it immediately in a web browser WITHOUT UPLOADING IT. View it at the target size.

Does it look OK, or bad?

* If it looks OK, you've proven that it's the web site (Wordpress for example) that is making it bad, and Illustrator is fine.

* If it looks bad, ignore the web site and focus on making it better in Illustrator.

Unless you discover where things are going bad, you can waste huge amounts of time trying to fix the wrong thing.

[H&P1]

Thank you Test Screen Name. I tried this and all looked OK so must be Wordpress

[tonyharmer]

Hey

Could I ask the method you're using to save out the file types you mention, please? For example, are you using Save for Web, Exp;ort for Screens, Export as… or the asset export panel?