Skip to main content
Adala Michelle Prevost
Adala Michelle Prevost
Participant
September 16, 2023
Answered

Vector illustrator image exports blurry for web in all formats

  • September 16, 2023
  • 1 reply
  • 369 views

I've read many posts on this topic and followed the guidance but can't find a solution to my problem. Can anyone help?

 

I need to export a 898 x 225px Illustrator image for web use. Ideally in GIF format, but any web format can work. All objects are vectors, text is outlines. No matter how I do this, I get a pixelated, blurry result. With Legacy, using 'export as', even saving as PSD or pasting as a smart object in Photoshop and trying the same there. All blurry. I've tried as GIF, PNG and JPEG. 

 

I'm also a bit confused about resolution. In the past I've exported at 72dpi for web but is it true that screens have a higher res now? Does that mean the image gets stretched? The image I've pasted below previews as smaller than it does on the website, see here: (link removed by moderator).

 

This header image is set in the stylesheet as the background image of a DIV that is the same pixel size as the image. Thanks!

 

    This topic has been closed for replies.
    Correct answer Anubhav M

    Hello @Adala Michelle Prevost,

     

    Thanks for reaching out. As suggested by Ton, using a higher resolution (144 or more) when using a raster format such as PNG/JPEG would help with the problem. But as this is going to be used for a website, it would be even better if you use the SVG format, as it would scale up/down when resizing the web browser window or using it across different devices for a more responsive experience.


    Feel free to reach out if you have more questions or need assistance. We'd be happy to help.

     

    Thanks,
    Anubhav

    1 reply

    Ton Frederiks
    Community Expert
    Ton FrederiksCommunity Expert
    Community Expert
    September 16, 2023

    Pixels will be pixels, but your example looks good to me. For higher resolution screens exporting at 144 ppi and scaling down in code improves the display.

    You can also try SVG for a vector version.

    Anubhav M
    Community Manager
    Anubhav MCommunity ManagerCorrect answer
    Community Manager
    September 19, 2023

    Hello @Adala Michelle Prevost,

     

    Thanks for reaching out. As suggested by Ton, using a higher resolution (144 or more) when using a raster format such as PNG/JPEG would help with the problem. But as this is going to be used for a website, it would be even better if you use the SVG format, as it would scale up/down when resizing the web browser window or using it across different devices for a more responsive experience.


    Feel free to reach out if you have more questions or need assistance. We'd be happy to help.

     

    Thanks,
    Anubhav

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices