Problems with PNG and JPG images

VisioMultimediaVisioMultimedia Member Posts: 4
in Working with GS (Mac)
Hi everyone,
could you explain me why my background images appear in this way on my iDevice?

Image and video hosting by TinyPic

As you can see, there are a lot of "circles" and the quality is bad. In fact it should be in this way:
Image and video hosting by TinyPic

I have this problem with PNG and JPG too, the images are in 960x640 (72 dpi). I've tried other resolutions and dpi without success. Please help me, I'm going mad!

Comments

  • PixelNautGamesPixelNautGames Member Posts: 44
    edited February 2013
    @VisioMultimedia. Hi there! I once heard it was either an issue with the way box 2d or the ipad renders gradients. Open up your image in photoshop or any editor and then add 1 or 2% noise to the image. It will have a slight grainy look but the banding will go away!

    hope this helps!
  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    Hi everyone,
    could you explain me why my background images appear in this way on my iDevice?
    In Photoshop:

    Make sure your image is a layer (rather than 'background').

    Simply select 1 single pixel anywhere on your image (in a corner where no one would notice might be a good place) and either delete that pixel or use the eraser to rub away some of it's opacity.

    Then save the image as a PNG with an alpha channel.

    This forces the iDevice to read the image as 24bit rather than 8bit.

    Result: no more banding.
  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    @VisioMultimedia. Hi there! I once heard it was either an issue with the way box 2d or the ipad renders gradients. Open up your image in photoshop or any editor and then add 1 or 2% noise to the image. It will have a slight grainy look but the banding will go away!

    hope this helps!
    This is a bad move in my opinion, the file size will increase (sometime dramatically / as much as x10) plus you will end up with a noisy image which you might not want - and you are going to have to apply a lot of noise to diffuse banding like that seen in the OP.
  • PixelNautGamesPixelNautGames Member Posts: 44
    Could be. I have learned something new. I have found moderate success doing it the way I mentioned above but I look forward to trying put your way
  • SnapFireStudiosSnapFireStudios Member Posts: 1,603
    Could it be because the image is not devisable by 4? I had this problem, and I think I fixed it that way. (So make you image 124*124 instead of 125*125)

    Hope that helps,
    - Thomas
    Warning There was an error rendering this rich post.
  • LumpAppsLumpApps Member Posts: 2,881
    It is because png files are in fact bitmap images and they are not good at displaying gradients. They have a limited color table. When you import a jpeg in Game Salad it converts it to png.
    A better way is to use photoshops save for web feature for example (I don't know how other applications work) there you can choose either a PNG24 or PNG8 format. With the PNG8 you can fiddle with the color table, and what kind of noise you use. You can check your file size on the fly. It gives you a preview of what the outcome will be. I hope this helps.

    Lump Apps and My Assets

  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    It is because png files are in fact bitmap images and they are not good at displaying gradients. They have a limited color table.
    See that lovely gradient in the OP, the nice one not the banded one . . . . that lovely gradient is a . . . . . . bitmap !!! :)

    There is no need for noise or grain, bitmap images are fine for displaying gradients - in fact they are perfect, a non-bitmap (like a vector image) can do no better as it still has to rasterise to the very same RGB array - at the same resolution !! Nor do they, in any sense, have a limited colour table, they can access the very same 24bit colour depth any other image format can.



    The problem with this guy's gradient is simple, the iDevice is not recognising it as 24bit, so you simply 'force' an alpha channel and - Bam ! the iDevice sees (and displays) it as 24bit . . . . with no banding.

    Really, try it.
    Could it be because the image is not devisable by 4? I had this problem, and I think I fixed it that way. (So make you image 124*124 instead of 125*125)

    Hope that helps,
    - Thomas

    No, no, no !!! :) (See above)

    I promise, this is just an iOS / box 2d bug, no need for noise or changing image sizes or anything like that, just force the device to read it as a 24bit file.
  • LumpAppsLumpApps Member Posts: 2,881
    Sorry Sock but in my humble opinion a png8 has 256 colors and a png24 has about 16,777,216 ;)
    So with a png8 you get a small file size but banding if you do not fiddle with some noise or the color table (since most is red you might get away with no noise) and with a png24 you do not need noise at al because you have so many colors to build up the gradient. So it's a choice, png8 with smaller file size and perhaps noise or png24 with na bigger file size.
    Bitmap is just a term for pixel orientated images (so non vector) that have a specific way of compressing. Like .bmp also is. I know the difference between vector and pixel orientated images. I've been playing with them for over 25 years ;p
    I was trying to give a non complicated way to explain to not confuse anyone who is starting out with digital imaging... Oh it's all down the drain now :)

    Lump Apps and My Assets

  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    Sorry Sock but in my humble opinion a png8 has 256 colors and a png24 has about 16,777,216 ;)
    No one here is advocating you use an 8 bit file ? Certainly not me ! (me > 8-X )
    So it's a choice, png8 with smaller file size and perhaps noise or png24 with na bigger file size.
    Both 8 bit and 24 bit files are written into the very same 24 bit RGB array, they both take up an identical amount of RAM on the iDevice.
    I know the difference between vector and pixel orientated images.

    No one has said otherwise !? You said: "It is because png files are in fact bitmap images and they are not good at displaying gradients" - I was simply saying that this is not true as they are just as good as other image formats (vector was given as an example) as all formats ultimately have to be rasterized to a bitmap. In fact take a look at that nice gradient in the OP, it's a bitmap!
    I've been playing with them for over 25 years ;p
    Soon you will catch up with me then :) Let's swap War stories ? Aldus Freehand ?
    I was trying to give a non complicated way to explain to not confuse anyone who is starting out with digital imaging... Oh it's all down the drain now :)
    Lol. :))

    Here's the thing, the OP has a specific issue, his image is being read as 8bit by the iDevice due to an iOS / box 2d bug, I didn't want him to start trying new formats and adding noise or grain (and so on) when the solution is to force the iDevice to correctly read his 24 bit image as 24 bit.

    Let me make you an example . . . hold on . . .
  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    Here you go . .

    I have taken the good (non-banded) image from the first post in this thread.

    I have made two copies of it in Photoshop.

    The first copy on the left has had a single pixel removed from it's top right hand corner.

    The second copy on the right had not been modified at all.

    The first copy has an alpha channel to allow the missing pixel to be transparent, the second copy has no alpha channel.

    The two images where then placed into GameSalad and put side by side in the scene, at this stage they look identical, both show a smooth gradient.

    The GameSalad project was then transferred to the GS viewer on my iPad - at which stage you could see the very apparent banding in the second image.

    I took a screen shot on my iPad - emailed it to myself - uploaded it to TinyPic and posted it here.

    Hopefully you can see what I mean now - no need for changing file size or adding noise or trying other formats - the bitmap is fine, the iDevice just needs to be forced to read it as 24 bit.



    image
  • SocksSocks London, UK.Member Posts: 12,822
    edited February 2013
    . . . . and if you want to do this test for yourself . . . .

    http://www.mediafire.com/?2jzms5wh1cehgf0

    Here are two identical looking smooth gradients with no banding (two copies of the OP's smooth gradient), place them in GameSalad and then transfer them to your iPod/Phone/Pad - even though the non-alpha information is identical (accept for a single pixel) one will band like crazy and the other will remain super smooth !
  • LumpAppsLumpApps Member Posts: 2,881
    edited February 2013
    @socks I don't believe you... I do not see the transparent pixel :P
    Thanks for that, never to old to learn. Pushing my walker forward now.
    And yes, Freehand. Don't you agree it was superior to illustrator in those days? I never liked Corel draw :)

    Lump Apps and My Assets

  • VisioMultimediaVisioMultimedia Member Posts: 4
    . . . . and if you want to do this test for yourself . . . .

    http://www.mediafire.com/?2jzms5wh1cehgf0

    Here are two identical looking smooth gradients with no banding (two copies of the OP's smooth gradient), place them in GameSalad and then transfer them to your iPod/Phone/Pad - even though the non-alpha information is identical (accept for a single pixel) one will band like crazy and the other will remain super smooth !
    @Socks I've downloaded your archive and I've tested the PNG with the alpha channel and it works perfectly! Now I've understand how to solve this problem, however I can't understand why no one fixes this bug, but it doesn't matter.

    Thank you very much for your help! :D

  • LumpAppsLumpApps Member Posts: 2,881
    Who agreed to what I said? Socks did proof I was wrong. Pay attention! :)

    Lump Apps and My Assets

  • SocksSocks London, UK.Member Posts: 12,822
    And yes, Freehand. Don't you agree it was superior to illustrator in those days?
    I never speak about the war, it brings back too many memories, I start trembling and reach for the whisky.
  • TesseractEngineTesseractEngine Member Posts: 180
    Freehand. Don't you agree it was superior to illustrator in those days? I never liked Corel draw :)
    Scandalous! FreeHand was never superior to Illustrator. It was, however, definitely better than CorelDraw.*

    - Q

    * Designers tended to prefer Illustrator, CorelDraw, or FreeHand based on which software they learned first.
    Warning There was an error rendering this rich post.
  • SocksSocks London, UK.Member Posts: 12,822
    Scandalous! FreeHand was never superior to Illustrator. It was, however, definitely better than CorelDraw.*

    Hitler used CorelDraw.
  • TesseractEngineTesseractEngine Member Posts: 180
    edited February 2013
    Hitler used CorelDraw.
    The 1930s version could only join lines at right angles. Made designing icons and logos a challenge, but Hitler went to art school, you know.

    Warning There was an error rendering this rich post.
  • LumpAppsLumpApps Member Posts: 2,881
    Freehand was first with layers. And the beziers where easier to draw. I don't do Hitler jokes, I am from Holland. But I am pretty sure he used Corel for his mustagio ;)

    Lump Apps and My Assets

Sign In or Register to comment.

© Vanilla Keystone Theme 2025