Vector Quality on Website

Hey I'm brand new to Vectors and can't seem to get mine up to par. They look great in Adobe Illustrator, very crisp, like vectors are supposed to, but when I put them on a website, they seem to lose their sharpness.

Formula of Touring Success - Precision Writtens | Precision Writtens

All those images are vectors, JPEGs. They don't seem as sharp as other vectors ive seen online. Either I'm saving them wrong, or making them wrong, I dont know. Any advice or thoughts would be awesome.

Thanks

U might have the quality level set to low when saving

Try saving as a .png file instead of jpg. It may help

Happy GD is right. I found that my images look much better if you export them as a 72dpi png file than a jpeg. Give it a try!

Once you save your vector file as a jpeg file, it is no longer a vector file and becomes a raster/bitmap file. You could try sharpening the jpeg in photoshop by choosing FILTER > SHARPEN > SHARPEN EDGES

That will usually make the jpeg file a little more crisp and sharp.

Actually, PNG files are raster images also. You can test this by saving something as PNG and zooming in. If you see pixelation, you are looking at a raster/bitmap image.

The misconception comes from the fact that generally speaking, PNG format should be used for vector imagery (illustrations with mostly flat colors or gradients), while JPG should be used for bitmap imagery (photographs). But in the end, both file formats are raster files; they are just specialized for different purposes.

If doing web design, you should always be using "Save for Web..." to export your images. That dialog window allows you many resources as far as previewing images and deciding which format and what compression/quality setting you need. For a webpage with lots of different images, it is possible for every image there to require a different level of compression and different file format for maximum efficiency (quality vs. loading time).


A couple popular true vector file formats are PDF and EPS. Files saved from a vector program such as Illustrator into these forums will retain their ability to be scaled to any resolution and not lose their quality.
SVG is a vector format used for the web. It works by essentially turning a vector image into code.

You can read more about various image formats here: Image file formats - Wikipedia, the free encyclopedia

Obrigado!!

Try to resize the vectors at exactly same size you wanted to use in the web, then export to jpg at 72 dpi - if you resize the image later it will lose its sharpness

set the resolution at low and save as png file.

when u have a textured background use type optimized option instead of art optimezed before saving as png or jpg. in illustrator

Copy it to Photoshop and set the width and height slightly larger than the space you have on the website. If you're want a 200x200 px logo, set the Photoshop size to 300 x 300, for instance, and paste your vector in there. Then re-size it in the code. That's what I do for logos anyways.

very helpful posts, thanks