.PNG Question

Dark Side Sith Lord · #1 07-03-2008, 09:57 PM

Good evening.

I had recently updated my website. I made the text into a PNG file so that I could have some black light around the text for it to be easier to read once in front of an image. Saving this as GIF eliminates the continous transparency, so it has to be a PNG it appears.

I figured out that since PNG gives you continous transparencies and I needed to replace the background images of my website, I could make one standard background with random changing images over it instead of having various photos of both background and image in one JPG.

Now that I had made two transparent photos to go over the background, I went into my website to check it out, and it appeared, but then suddenly dissapeared as soon as it had come.

I tried to take away the PNG text at the bottom, and the photos aren't dissapearing anymore, so it appears as if you can't have more than one PNG image on a page?

The random changing images are randomly changed by HTML code and the code and all the images work just fine.

Any sollutions to this problem? I'd very much like to have PNG image text with light instead of the regular text.

Thanks.

Dark Side Sith Lord.

Bethers · #2 07-03-2008, 10:03 PM

Just a question - do you want everyone to be able to read your website? An all image website blocks a lot of users - and blocks se's from reading the site also.

I'll let someone else figure out the issue with the png images. It used to be we avoided png images on websites, but it's my understanding they work now - although maybe you found an issue with them.

My point is that I'm guessing you want your website to get indexed and found by search terms, but using all images, that won't happen.

Dark Side Sith Lord · #3 07-03-2008, 11:12 PM

I've removed the text temporarily, it's pretty much a 50/50 site with text and photos - Where there are photos, there is also text.

They said they had fixed BlueVoda to make it possible to have transparent PNG's, that's why I thought it might be interesting to try.

Oh, why I'll be damned. My plan was pretty much just to add photos of stuff I have and that's about it. Whether or not my site comes up when someone types schmegiggle on Google is something I don't give much dam^/ about really.

If nothing can be done about the conflicting PNG's, normal text will be applied to the website, but then someone will probably yap again that the text is hard to read in front of the background.

Dark Side Sith Lord · #4 07-04-2008, 06:12 PM

Uploaded with the files were "trans.gif", I deleted this, and now both the text image and the background images are appearing.

Many times have I posted things before only to figure out things myself, perhaps I should stop posting and just sit and think instead some times.

Thanks anyway.

Dark Side Sith Lord.

Dark Side Sith Lord · #5 07-05-2008, 12:06 AM

Update - It wasn't the trans.gif file that was messing with the PNG photos, but the file named pngfix. This was a file to.. fix the png's transparency? Well, it appears they are still transparent without it, and the photos are no longer conflicting with one and other.

Main page with new text in photo with random changing background - http://www.darksidesithlord.com

LadyEye · #6 07-05-2008, 02:33 AM

Quote:

Originally Posted by Dark Side Sith Lord

Update - It wasn't the trans.gif file that was messing with the PNG photos, but the file named pngfix. This was a file to.. fix the png's transparency? Well, it appears they are still transparent without it, and the photos are no longer conflicting with one and other.

Main page with new text in photo with random changing background - http://www.darksidesithlord.com

Well ... you just deleted a vital file .. and your pngs are no longer working either .. so ..

And I would say the reason your images were not working before is they were not loading in time on your page .. one image is 300 kbs .. you need to reduce your file sizes for these images ..

You will need to submit a support ticket to have support reinstall the png fix ..

Pngs are acceptable formats ..

And, I too agree with Bethers in so far as all images and no text on your pages .. and this would help considerably with your image problem ..

Your navigation buttons are really really cool by the way ..

I like them alot!

Dark Side Sith Lord · #7 07-05-2008, 09:32 PM

They still appear fine here and transparent too. I don't know if I remember this correctly, but the pngfix file was to make png photos transparent in older Internet browsers? Perhaps since I have the latest Internet Explorer that the photos are transparent anyway?

Both the png backgrounds and the png text uploaded, but once the png text appeared, the background dissapeared even though it had been fully loaded.

Taking away the pngfix removed this problem, but now it appears you cannot see the photos properly, or perhaps you were just visiting my website while I was working on it.

Look again - http://www.darksidesithlord.com

LadyEye · #8 07-06-2008, 02:20 AM

Yes, I would agree with your remembering even if the developers themselves call it differently, regardless if we call it a fix or not. 2005 article regarding IE and pngs

I looked at your site on another using vista, it's just as you see it. Again, it's real nice. However, I am on IE6 and the attached image is how I see it .. again, relative to the browser used and the lack of png fix needed for users like myself.

Dark Side Sith Lord · #9 07-06-2008, 02:36 AM

Hmmm, crud. Well that's a lot worse than what I had intended... Full black and it's white, oh my.

If I don't have the pngfix, the photos will work, but look white on IE6.
If I have the pngfix, the background will dissapear.

It appears both options suck, so I really don't know what to do. I can't save neither of them as gif, because gif's won't give me continous transparency, and if I use normal text above the background, it's nearly impossible to read.

Thanks for pointing out what the site looked like on an older IE before I settle down with the thought that the site is OK.

LadyEye · #10 07-06-2008, 02:44 AM

Well, I knew you would want to see it, I had only seen how nice the entire look was when I viewed on vista .. but I really think getting back the png fix and optimizing your images should solve all of your dilemmas, (other than your folders .. not sure what is happening there) .. You ideally would like to have your page down to about 200 kbs for ease in loading for everyone, and you have a few pngs on the page that are well over this themselves .. even if you could get things down to 300 kbs it would help alot .. keep your images as pngs .. www.drynamicdrive.com online image optimizer and consider using it .. keeping your images at a level of quality as well .. consider alt text on your images too ..
p.s. and if you searched, you would find the "function" to include on your page yourself, just an option too.

I see you could reduce your background image by 84% using a mere 18 kbs as opposed to 122 kbs .. this will be the start of making a difference .. your background should have no difficulty in appearing ..

Another thought for you, lol .. take your background image, optimize it, optimize your other images, then make one background to apply on the page with your nav .. maybe that would work for you too ..

Dark Side Sith Lord · #11 07-06-2008, 10:27 PM

I will see if I can do something about the size of the photos. Most photos such as costume photos and tutorial photos are compressed to 80%, leaving them about 90kb's out of the earlier 500kb's, but I havn't compressed the buttons or backgrounds yet, so perhaps I should.

I'm not sure I understood the last you wrote, but that might just be all the candy I've been eating.

So far I've got the pngfix back, then tried to get the png to appear beneath the rest of the page, then it appeared only to dissapear once the pngfix file stuffed the trans.gif file through the welcoming text. So it has nothing to do with other photos covering the backgrounds, because the backgrounds simply dissapear because of the pngfix.

I need them as png's instead of gif's because of the continous transparency, but I read at the great wiki that there is yet another format that might just have continous transparency, but it won't probably work on the internet through older browsers.

Hmm, what to do, what to do...

LadyEye · #12 07-07-2008, 12:25 PM

Hi ...

Candy eh .. well we all need that every once in a while, don't we .. lol

I believe what I am seeing this morning is some flashing of images coming on the page - I see your main background (it's a jpg) Eternal Darkness, I see your nav buttons, I see your text, but I think I see those other images flashing in and out on refreshing the page ..

What I was meaning and wondering if you could do is this.

Take your background (the jpg) into photoshop, then apply your png images on it and save as one image, you could then save it as a jpg and apply on the page .. then your text (which you can type on the page with blue voda, (you aren't using any special font there, so you should be okay doing this)...

As mentioned before www.dynamicdrive.com has an online image optimizer and you can greatly reduce the kbs in your images without losing the quality look ... you can even do this to the image you might make for your main page .. I believe this is where the trouble lies, image kbs too large.

I also noticed a bit of %20 in your image names, this can also cause the images to not load properly .. so maybe change those names too ..

Dark Side Sith Lord · #13 07-07-2008, 08:00 PM

This is what I did before, having the images right onto the banner background, but when doing this, the JPG compression and such makes the text of the banner look somewhat different in each photo, that is why I changed to having only one background as JPG with PNG images ontop of it, because the background banner won't change in appearance.

Also the reason why I changed from simply typing in the text to making the text a PNG image was to have a transparent black glow around the text, otherwise the text is somewhat hard to read against the background.

I have a program on my computer that does the same thing as the stuff on that website, and I do compress all my photos, but I've never compressed the buttons or banners of the main page, so I might do this.

I don't think the problem lies with the photos having too many kb's, because no matter how large an image is, it should load. It's not a matter of the background images not loading either, because they do appear to dissapear once the text arrives. I believe the problem lies within a conflict between HTML codes as the random changing photos changes by HTML code and there are some codes and such in the pngfix.

I don't think the names with %20 in them causes any problems, %20 is just a compensation for a keyboard space.

If this problem is not fixed soon, I will try making a GIF of the text instead where I will give the text an effect of sorts that will make it easier to read in front of the backgrounds.

Dark Side Sith Lord · #14 07-07-2008, 08:08 PM

Phumbahoog! He exclaimed with great satisfaction with a small portion of curiosity in the back of his mind.

A thought came to mind that I should embed the PNG photo text instead of placing it on the page itself in BlueVoda since the other PNG photos are embedded as well, and it for som reason worked.

At least I hope it worked - Both PNG's are there, only I don't know if they work or not on older web browsers, but the pngfix is there, so they should appear fine.

LadyEye - You had an older web browser that needed the pngfix?
Could you please check if the website works fine there now? If so, I can move on to compressing the photos.

Dark Side Sith Lord · #15 07-08-2008, 03:31 AM

Well, unfortunately LadyEye confirmed that what I thought was working didn't work at all, so I tried to look around for some HTML codes to fix this, then discovered a website where someone wrote that the pngfix sometimes distort the size of photos without HTML sizing codes.

I uploaded the text PNG and the background PNG's the normal way through BlueVoda, the method that made the backgrounds dissapear, then right clicked on the site and selected "select all" in the meny, then appeared a small red dot of only one pixel in the upper left corner where the HTML box for the background PNG's are located, so I imediately thought that the little dot might be one of the backgrounds scaled down to nothing but a lousy pixel.

I edited the HTML code for the background PNG's and entered the sizing codes to Height=100% Width=100%, then when I uploaded the page again, a small photo appeared in the upper left corner, so I had finally figured out what was the problem, then set the size of the backgrounds to full.

The website works fine now, and the pngfix works as it should, making the PNG's transparent in older web browsers, so it wasn't a bug after all, it was just a lack of HTML codes from my part.

Thanks and good night.

Dark Side Sith Lord.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)