Problems with uploading a gif to my server?

Discussion in 'HTML & Website Design' started by OrangeFeet, Nov 23, 2007.

  1. #1
    So i finally got around to editing a gif because i actually have a painting program worth something....paint.net.

    now when i edited a gif and re-up loaded it, it wasnt the color i edited it (to black). it turned out to be white on the web page for some reason.

    heres what i did...i edited the color to be black....then i uploaded the finished gif and deleted the original gif that i edited. any ideas to what went wrong?
     
    OrangeFeet, Nov 23, 2007 IP
  2. Jelleke60

    Jelleke60 Active Member

    Messages:
    129
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #2
    Did you made it transparent?
     
    Jelleke60, Nov 23, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I dunno your programme, but did you accidentally save to CYMK? That's a nice way to turn colours "opposite."

    When you view the changed image on your computer, does it still look black? Can you also open your image locally in your web browser? (File, Open File, select the image)
     
    Stomme poes, Nov 23, 2007 IP
  4. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    im not sure what stage that would have happened or if it did because before i saved it, it gave me a preview and it was def black.
    im using paint.net. yeah, paint showed me a pop up preview of the image and it was def black. when i up loaded it to the host and did a preview of the image/file of the gif and it was still black. BUT, i did notice that the file size grew to 2kb instead of the 1kb before i changed it to black...that may be a clue?
     
    OrangeFeet, Nov 23, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The reason Jelleke asked if it was transparent is that if your page is white, then the image background will be white... meanwhile, in many image editing programmes you can set the display default of "transparent" to white, black, or various checkerboards. So if yours was default black, you could have a transparent background which looks black in the editor, but nowhere else.

    Where is the image now? We can look at it in our image editors and tell you what the background really is.

    (Often when I make something in Gimp, I check the image in Image Viewer, a completely seperate programme, to see what the image looks like to someone else)
     
    Stomme poes, Nov 23, 2007 IP
  6. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    "translucent" was checked under "window" in paint.net

    so i unchecked it and uploaded it again and it still didnt work. is this what you ment?
     

    Attached Files:

    OrangeFeet, Nov 23, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Like I said, I'm not familiar with paint.net. Translucent could mean a lot of things.

    For instance, in GIMP, it's a checkmark that means to KEEP transparency if you're adding a gradient to an image sitting on a transparent background (like letters).

    It's definitely black, or actually, a black gradient. A sharp one on my histogram. And it seems to be black to gray, not black to transparent either (my transparency is mid-tone checks, so I'd see it).

    So we know your image is good. What's the uploaded one look like? And what did it look like before you did anything with it? I want to know too why the file size doubled... esp since you have a vertical gradient (which is smaller than a horizontal gradient because of how gifs save and read). Was the other image a gradient as well?
     
    Stomme poes, Nov 23, 2007 IP
  8. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    the up loaded one looks exactly like the gradient one like i want.....which is showing up fine when i preview it on my server files. it shows up to be white on the web page.

    when i edited it i just took the original (pink gradient) and just applied the black gradient to what it looks like now.
     

    Attached Files:

    OrangeFeet, Nov 23, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Wow. I remade your images in new files and got the same size discrepancy! Extremely bizzaaro-- I can't find anything on teh Googles about file sizes and colour. But, I was also able to imitate your image and make it smaller (must be Gimp's compression): 1.3KB. Then I made a png version, and, as the number of colours is small, and png has better compression than gif, I made an 800byte png. Then I figured you're tiling this as a background? So I made it 6 pixels wide and reduced the filesize even more. The smaller the thing with the background, the smaller the file itself can be. For body tiling, I keep it at least 5 or more pixels wide, but for a box in the page somewhere, one pixel is enough. The browser does a very little bit of work to render that.

    I tried starting with transparent backgrounds and adding two colour gradients, and tried starting with one colour as the background and having the other colour + transparency gradient... file size didn't look different. It really does seem like it's what the colour is... very strange.

    Laugh, but I have no clue how you post thumbs on this forum. I can post my little png and you can try uploading that. However, the black gradient is definitely black. I wonder if there's a browser cache (are you seeing this preview in your browser?) but then you've got two different file names... and it's pink still after fully uploaded on the site and viewed in a browser after clearing the cache??
     
    Stomme poes, Nov 23, 2007 IP
  10. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ok.....i just noticed that the pink (the original) is a TEXT "type" on my host even though it has a .gif extension.

    the black is an image "type" and it is also a .gif
     
    OrangeFeet, Nov 23, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Where are you seeing this?

    This might be something to do with why you still see the pink one. Maybe this is MIME types?
     
    Stomme poes, Nov 23, 2007 IP
  12. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    well, i just saved the original in paint (didnt do a thing to it. just saved the original and opened it up in paint) and it doubled in size from 1 to 2 just like the black and i uploaded the original to the host and now its not even showing up as pink just as the black.

    im not seeing a preview of your upload.
     
    OrangeFeet, Nov 23, 2007 IP
  13. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    on the bluehost cpanel file manager discriptions
     
    OrangeFeet, Nov 23, 2007 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Lemme try again. I get it to upload and I get a digitalpoint address...

    In any case, if one is called text type, it sounds like MIME types. Your black one is correct.

    And like I said, I created copies of your pink and black from scratch and the pink is SMALLER on my computer too! Not quite twice as big, but the difference was like 800+bytes for pink, and 1.3kb for the black as gif.
     

    Attached Files:

    Stomme poes, Nov 23, 2007 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Ah, only one. Here's the skinny one:


    Also, here's a page with extensions. I don't know blue host, but if you can change stuff in that, make sure it's gif )or png if you use mine) and it should stay image/png.

    I don't think changing it to text changed the file size, because the extension doesn't change the file itself, only how the browser/application/whatever tries to access it.
     

    Attached Files:

    Stomme poes, Nov 23, 2007 IP
  16. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    yeah. this is messed up. correct as in size ?
    interesting....would it help if this file is a header and goes across the entire top of the page?

    why the skinny one?
     
    OrangeFeet, Nov 23, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    You can use either. The smaller the image file size, the faster and easier it is for people to download as their browsers load your site.

    You could also do a 700px-wide version of the gradient. Same effect if the box the image is sitting in is 700px wide. But it's a lot bigger than the little strip. I usually use the little strip because I feel little gradients should be like 300bytes or so. If I'm setting such a gradient on a huge box like the body, then I make the strip a bit bigger (the browser will see the CSS saying url(headerbgblack.png) 0 0 repeat-x and repeat that one-pixel image as many times as needed while rendering). Some people do 10px for body. I made such a gradient wider on a site because the gradient was also long (very tall).

    You don't have to use the skinnier one; it shouldn't matter except that the skinny one is a slightly smaller file size.

    The reason I wanted you to try uploading mine is that mine surely are png files and you're gettting them from an external source so I don't think your programme will try to add some funky extension to my image like maybe it's doing with yours.

    It's definitely NOT your server making the pink one smaller. My image programme does it too. Sure, the white should use more ELECTRICITY but shouldn't be any bigger... I swear there's nothing on teg googles on this one. wtf?

    The image file itself is not a header. It can be a background file of a header div (or whatever element you want to use for your header.

    HTML:
    <div id="header">
    Stuff.
    </div>

    CSS:
    #header {
    background: #000 url(smallheader.png) 0 0 repeat-x;
    }
     
    Stomme poes, Nov 23, 2007 IP
  18. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    btw...it is def a mime type
     
    OrangeFeet, Nov 23, 2007 IP
  19. OrangeFeet

    OrangeFeet Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    so how exactly do i transfer the smaller sized image to my host...making sure i have the correct labling?
     
    OrangeFeet, Nov 23, 2007 IP
  20. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Dunno. See, I have a server sleeping under my bed. His name is Samuel. He's actually my husband's, so I've never configured anything. I dunno where that pink gradient came from, but hopefully wherever it came from made the problem.

    I've heard (for another problem) that if you're using Apache, you use the AddType command to set the mime type. However, the .png on the end should do it for you automatically.

    We're getting way out of my territory. Try a normal upload, but maybe make a new images folder or something. If the pink one is completely gone, and the new black uploaded like normal, it should just stay image/.png.

    If it doesn't, you need better help than me. I know very little about MIME types and how they're set. Most of them seem to get set automatically for me when I upload stuff, so something in our server (we run Apache) looks at the extension I give the file, and uses that to know what MIME type to assign it. If it doesn't know, it's called unknown and some people's computers will block unknowns as a security "feature".
     
    Stomme poes, Nov 23, 2007 IP