[RobParticipant]

Hi,

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.

[RobParticipant]

This reply has been marked as private.

[RobParticipant]

Extra information: before uploading the 2400px image versions, I originally did 1000px – the quality was still terrible. What is going on?

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

[NicoModerator]

Hi There,

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.

[RobParticipant]

Hi,

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.

[RobParticipant]

This reply has been marked as private.

[RadModerator]

This reply has been marked as private.

[Darrell BParticipant]

All my images larger than 846px wide were being served up at 846px. I discovered the problem was with Jetpack Photon module, which is supposed to speed up loading—now I know how that’s accomplished. Disabled Photon and everything is as it should be now.

[RadModerator]

Thanks for sharing Darrell.

[RybirdParticipant]

I have the same issue. My images are uploaded at 1200px on the longest side. Yet I get this.
http://www.artistrybird.com/wp-content/uploads/2016/02/Dancing-Apart-1200.jpg is resized in HTML or CSS from 1200×800 to 892×595. Serving a scaled image could save 154.2KiB (45% reduction).
I need my images at their full size, I have tiled galleries enabled because I need them elsewhere on the site, but I do not have photon.
Please help.
Thank you

[ZeshanMember]

Hi Rybird,

Thanks for writing in!

X is responsive, so images adjust their sizes automatically depending on the screen size. For example, if an element that has your image is 800px on desktop, your image will be resized (if larger than that) to fit into 800px. If the same element on mobiles is about 400px, your image (the same size) will be resized automatically to fit into 400px.

This is the default behaviour of how responsive layout works. If you were to show images in their original size, it will break the layout and show the images like this: http://prntscr.com/aayn73

Thank you!

[Author]

Posts