3

I have an SVG image, which I have cut, and pasted into PS. When I export the image to use on my web site, it becomes hazy no matter how I export. I know there are posts that have dealt with this, and I have tried everything from changing the quality from Bilinear to Bicubic and every variation in between. I have tried PNG 8 - 128 Dithered, PNG 24, and so on. I have tried exporting vs. saving for web (legacy), and nothing seems to keep the icon looking like the image it is when it's in illustrator. I have even tried exporting from Illustrator, and I get the same result. Here is what I am talking about:

Good Shower

Exported for Web - Hazy

1

Try this, import the image / svg into photoshop as large as possible. i.e. 1000px x 1000px and then when you export it make sure your DPI is at i dont know around 300px and to the pixel size you need it.

Looking at your image I'm going to go out on a limb here and say its a pixel density issue as you're using a raster format.

1

The following method uses an Adobe Illustrator file, placed into Photoshop as a Smart Object.

  • First Save your SVG file as an AI file, directly from Illustrator.
  • click and drag the AI file into a Photoshop blank page, to create a Smart Object.
  • Set your zoom level at 100% in Photoshop.

Screenshot Placing Smart Object and Zoom 100%

  • Press CTRL+T (Transform). Click and drag the object corner handles to rescale to the size you want, holding down the Shift key as you drag to constrain the proportions.
  • Once it has been resized, use the crop tool.

Screen shot crop tool

  • If you want, when cropping you could set a size in pixels in the Crop Tool options before using the tool to make it a specific size

Crop Tool Options Bar

  • Save your image using the File > Export > Export As [or Save for Web(Legacy)]

Here's the results, doesn't matter what size you make it, the pixels won't be blurry:

Test result of Export Test result of Export2

0

You can use svg for web these days. It is more beautiful, smaller, works on any size and is reatina-proof. Please forget about png 😉.

  • Unfortunately, most Wordpress sites won't accept svg for images. – Blaine Dec 24 '16 at 23:15
  • Uploading SVG is not allowed in WordPress for good reasons: it can be used to insert scripts by your users. This might not apply to you. Make sure you get FTP access to this server, upload your SVG images and reference them from the code. – JoostS Dec 24 '16 at 23:36
  • 1
    @Blaine it's pretty easy to get WordPress to accept SVG files (see here for example) – Cai Dec 28 '16 at 21:00
0

Are the dimensions of the image in PS or AI the exact dimensions you want for the final image on the web? Changing that might help.

Also, you aren't specific about how you are using this on the web. I ran into the same problem with an image that I was trying to insert into an HTML email signature. Apparently, some email programs (MS Outlook, I am looking at you here) run a resize command on images even when they are sized correctly, and the result is a blurry image like you are showing. Unfortunately, I was never able to resolve that particular issue-we ended up removing images from our email signatures completely.

  • I have tried to use the exact same image size. I'm using this in a Wordpress website. Nothing seems to work – Blaine Dec 28 '16 at 20:29
  • You have almost hit the limit of my web graphics knowledge, so this probably won't make a difference, but I will throw it out there anyway. You said that you cut and pasted the image into Photoshop. Have you tried using Illustrator's Trace command to create a vector version of the image, and then exporting that? Maybe something about pasting a raster image into Photoshop could be messing things up. And the image is simple enough that the Image Trace should do fairly good job with it. – magerber Dec 28 '16 at 21:14
  • Will try that, however, I have tried to export the image from Illustrator itself, and the image becomes hazy. It is very weird, and I don't know what is causing it to happen. It's very frustrating. – Blaine Dec 28 '16 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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