0

Graphics designing is not my profession, however, I do know how to use Illustrator to create simple vector images/graphics. I do not have an idea as to what format or other attributes to consider when saving an image for web viewing. I've searched this forum for similar issues others might have faced, but fail to follow the designing jargons used.

The way I am trying to save the image for my blog is with the save for web option in Illustrator where I choose JPEG and give it a file name. I then import this image into the blog.

The images looks blurred, jagged and bad. It looks nothing as amazing as it does, native in Illustrator. I also notice the image dimension shrinks once I post it to the blog. How can I determine the right dimensions for the image? I do not own the blog, I'm just a guest blogger on their platform.

Improve this question

2 Answers 2

Reset to default
1

Images from Illustrator can be exported in a number of formats that are supported in web browsers, including raster formats such as JPEG, or PNG, and the vector format SVG.

These all work on the web and are supported in most browsers, however SVGs might not work on all blog sites, unless the blog owner has enabled uploading of SVG files.

The issue with your jpeg sounds as if you have not exported it with enough pixels, or perhaps at low quality (high compression). Without seeing it however, I don't know how much specific help I can give you here. All I can say is this, have you tried outputting it at a larger size, with higher quality settings (less compression)?

Also, browsers typically display images on web pages at the native resolution of the device they are being viewed on, unless you have your OS system zoom set at something other than 100%. This could certainly be the cause of small images being zoomed in, and would account for degradation in quality - but this is a user setting, nothing to do with the image itself.

Improve this answer
4
  • 1
    Dont say enough resolution (or pixels) just say enough pixels
    – joojaa
    Oct 23, 2017 at 9:49
  • @joojaa agreed. Edited!
    – Billy Kerr
    Oct 23, 2017 at 10:14
  • Thank you Billy and Joojaa. I'd like to apologize. I'm now thinking the issue is with the site. The images gets resized slightly to a smaller size and then when it gets published and that makes it look jagged. When I click the image to open it in another tab, it's looks fine. This means I am going to have to figure out a way to maintain the images quality even it's being resized by the site.
    – John
    Oct 23, 2017 at 12:20
  • If the website you are using is resizing/resampling the images or reprocessing them in some undesirable way, then you may be able to host the images on a different site, like imgur(dot)com for example.
    – Billy Kerr
    Oct 23, 2017 at 12:36
0

If your images are simple, you can save them in Illustrator as SVG (Scalable Vector Graphics). You can do this in File > Save As.

All major browsers support, at least partially (SVG 1.1), the SVG file format. In this way the images will preserve their quality, even if they are resized.

Improve this answer
2
  • Thanks Spike. I just tried uploading the SVG image file and get the message "The image type is forbidden".
    – John
    Oct 23, 2017 at 7:54
  • @John SVG's are forbidden by default for some content management systems, such as Word Press. So unless you can convince the person running the blog to change those settings, then you won't be able to upload SVGs. This has nothing to do with your browser.
    – Billy Kerr
    Oct 23, 2017 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.