I am having issues with the quality of my transparent png images when they are displayed on my website. The edges have lots of noise and the quality looks very low.

The images were created and exported on Photoshop in PNG-24, Max Quality, sRGB, and in high resolution (2400px width). When I inspect the page source code, I notice that a 846px width version of the image is being loaded up and displayed into a 720px container. I’m confused for two reasons.

1. I thought that the images used by the website are the same resolution as the ones I upload, not resized lower resolution thumbnails. Is this not the case?

2. Why is a 846px width version being served up? My WordPress image resize settings are the default: Small 150px, Medium 300px, and Large 1024px. If a resized version is served up, should it not be the 1024 version?

Thanks you very much for the assistance.

How can I get my png transparent images to show up clearly?

Thanks for writing in.

Upon looking at your images, both in original and in resized version. It seems that were all the same. The resized image is smaller than the original. Shrinking an image from huge size to small won’t destroy the image quality except from small size to big size of images.

I think the problem is not the image size or the site for resizing the image. The problem here is that the image you upload is not a high quality image or save you image to the best image quality. You can search for free software in the internet that will save your image to its best quality for web.

Maybe this plugin will help you. https://wordpress.org/plugins/force-regenerate-thumbnails/

Let us know how it goes.

Thanks.

I’m creating flat vector graphics on Adobe Illustrator and Photoshop CS6, using the ‘Save for Web’ function to export with the settings: PNG-24, maximum quality, sRGB, and 2400px wide. Viewing the files on my computer, there aren’t export quality issues – this I can assure. I don’t think the free software you speak of is better software to export images for web.

I have used the plugin you recommended, there has been no affect. I’d like to note, the force regenerate thumbnails creates: 100×70, 1024×717, 1184×662, 1184×829, 150×150, 300×210, 846×473, 846×592 image versions.

If you could help on my original questions, that’d be great:

1. I thought that the images used by the website are the same resolution as the ones I upload, not resized lower resolution thumbnails. Is this not the case? Does X Theme/Wordpress automatically serve up the closest sized thumbnail to the container?

2. Why is a 846px width version being served up? My WordPress image resize settings are the default: Small 150px, Medium 300px, and Large 1024px. If a resized version is served up, should it not be the 1024 version?

I will send you screenshots of what I mean.