Hi everyone,I run a content site [removed by moderator] and I create a lot of visual assets in Photoshop. Recently I noticed that when I export images (PNG or JPG), the text and icons look slightly blurry on the live site, even though they look sharp in Photoshop. I’ve tried: Export As / Save for Web 72–300 DPI Smart Objects Different scaling settings If anyone has experience exporting images for WordPress blogs or high-quality web use, what settings do you recommend so visuals stay crisp on the site?Thanks in advance!

Answered

How do I optimize exported images for blog quality without losing sharpness?

Forum|Forum|5 months ago
December 2, 2025
1 reply
371 views

Hi everyone,
I run a content site [removed by moderator] and I create a lot of visual assets in Photoshop. Recently I noticed that when I export images (PNG or JPG), the text and icons look slightly blurry on the live site, even though they look sharp in Photoshop.

I’ve tried:

Export As / Save for Web
72–300 DPI
Smart Objects
Different scaling settings

If anyone has experience exporting images for WordPress blogs or high-quality web use, what settings do you recommend so visuals stay crisp on the site?
Thanks in advance!

Correct answer Trevor.Dennis

For a start, forget about the resolution in pixels per inch as it has no relevence outside of a print. Think instead of the pixel size the images will be displayed on the website, and resize to that pixel size in Photoshop. Try different interpolation methods, and view the downsized image at 100% zoom ratio (Shift Ctrl 0) that's a zero btw, and not the O character.

image.png

If you have a super sharp original, then I like to use Bilinear. If not super sharp then try Preserve Details 2.0. IME Bicubic Sharper results in nasty harsh over sharp reductions.

sRGB would probably be your best choice for colour space, but our @D Fosse would know way better than me.

I expect that the way the images are disaplayed will also come into it.

Trevor.Dennis

Correct answer

Community Expert

For a start, forget about the resolution in pixels per inch as it has no relevence outside of a print. Think instead of the pixel size the images will be displayed on the website, and resize to that pixel size in Photoshop. Try different interpolation methods, and view the downsized image at 100% zoom ratio (Shift Ctrl 0) that's a zero btw, and not the O character.

image.png

If you have a super sharp original, then I like to use Bilinear. If not super sharp then try Preserve Details 2.0. IME Bicubic Sharper results in nasty harsh over sharp reductions.

sRGB would probably be your best choice for colour space, but our @D Fosse would know way better than me.

I expect that the way the images are disaplayed will also come into it.

D Fosse

Community Expert

Trevor is right, the ppi number is totally irrelevant. It's just pixels.

The short answer to the rest is that text should never be part of a pixel image, but if it already is, it should never be resized. Resizing destroys pixel text. Create all text as live vector text in the website builder.

Normally I report any post that contains a link as spam, but made an exception here. Remove the link to continue the discussion.