Wikidot Community

Hi Rob!

This is really weird… Before posting, I always check these kind of things. I checked this out before and after your reply I repeated my test. I have Gimp 2.6 and it displays transparency as checkers pattern (like Photoshop). Here is the image I just downloaded from my site and took screenshot of (jpg this time):

As you can see, Gimp tells me that the background is transparent. Should I use different format (is .png unreliable?) or am I missing something?

If you want to use a transparent background then you have to use png as jpg doesn't support it.

It is odd: the white background is there so why it is not being shown by Gimp is unclear. Paint.net displays transparency the same way as Gimp by using checkered squares. With the mute images the white background was there, which it wasn't for the music staves image. I think the issue must be with Gimp but as I haven't used it and don't have it I'm not sure what the solution is. With paint.net I would highlight the mute with the magic wand and then delete the background and paste back in the mute over the transparent background and save.

And no, png is not unreliable.

If you want to use a transparent background then you have to use png as jpg doesn't support it.

Yes I know, the .jpg screenshot was just to show the checkers pattern.

Gimp (and Photoshop) also has the magic wand tool (to select a certain colour) and that's how I created the transparent background in the first place.

Well something must have gone wrong in the process as I can assure you that the white background is still there. If you want me to delete the background and email/upload the new versions let me know.

Now this is really weird. I just downloaded Paint.net and it shows the checkers! Please upload a picture just for a test and let's see what happens.

Edit: I just allowed site members to replace/move/delete files.

I think I have found a bug. You have re-sized the image to be "small". In doing this Wikidot appears to change the file format from png to jpg which of course doesn't support transparency. If you displayed the png at its actual size I'm sure you'd find it would be transparent, the re-sizing causes this problem.

I think we should raise this as a bug.

I think we should raise this as a bug.

I knew it was something like this. Just filed a bug.

Thanks Rob.

Of course that doesn't explain why I am seeing the white background in paint.net and you aren't!

Wikidot uses ImageMagick to create the thumbnail, small and medium versions of images when we upload them. I have often wondered why all images, regardless of original format, are always converted to JPG when creating these different sizes. It might be a limitation of ImageMagick, or it might have been easier to implement by using a single file format. If the latter is the case, it would make more sense to use PNG as a standard to avoid this issue (even though the files sizes are typically larger).

The workaround is to not use the "small", "medium", etc. parameters. You can either resize the image before uploading it or use specific height and width parameters to scale the image.

-Ed

When saving a file as PNG with GIMP and there are transparent areas, make sure the "Save color values from transparent pixels" check box is selected.

(even though the files sizes are typically larger)

I've used .png because I thought that it's optimized for the web better than .jpg

The workaround is to not use the "small", "medium", etc. parameters.

The reason I didn't do this was that I thought that it would be good for the user to also see a "hi-def" version of the object.

Of course that doesn't explain why I am seeing the white background in paint.net and you aren't!

Yes that's odd, we definitely have the same version of the image and most likely the same version of Paint.net.

The reason I didn't do this was that I thought that it would be good for the user to also see a "hi-def" version of the object.

I just wrote an article to (hopefully) clearly explain what I was suggesting:
Stupid Wikidot Image Tricks

Let me know if it makes sense.

-Ed

Good morning!

Let me know if it makes sense.

Yes, it made perfect sense. I'll define the image sizes by hand as you suggested and see what happens. But first I'll get a big cup of coffee and go out to do some gardening :)

Edit: yes, it worked just as you described. It's strange why Wikidot handles the images differently in these two very similar tasks.

A very good blog post Ed.

Thanks, I made a how-to so others in the community can find it easier.

-Ed