PNG, wat zijn je ervaringen ?

[Verwijderd]

Het verbaasde me een beetje, maar kan er erg weinig over vinden.
Ik maar de laatste tijd steeds vaker gebruik van png, met een .htc behavior, om zo plaatjes gedeeltelijk transparant te krijgen. Het werkt. En het werkt heel goed, naar mijn mening. Soms moet je er even rekening mee houden dat printen net iets anders kan uitkomen als bedoeld, maar daar is goed omheen te werken.
Nu kreeg ik van een bekende de opmerking "dom dat je met png aan de gang gaat" naar mijn hoofd. Met dom werd mede op het print verhaal gedoeld.
Ik vraag me af wat de algemene ervaringen met png zijn, onder de mensen die er ook al een tijdje meer werken.

[Oogst]

Ik heb PNG nog nooit gebruikt voor print of voor web, maar ik gebruik het wel dagelijks omdat het losless compressie biedt, en dus kleinere formaten dan png en tga, en omdat het daar nog 8 bits transparantie bijdoet. Mijn ervaring ermee is wel dat png irritant traag wordt op hoge resoluties. Op 4000*3000 is dat echt problematisch, ook op een snelle pc, vind ik.

[HunterPro]

PNG is mooie technologie maar nog niet voldoende ingeburgerd om op 'grote schaal' te gebruiken. Voor veel projecten blijf ik dus bij creatief gif- en jpeg gebruik. Mijn hoop is gevestigd op een nieuwe IE

[Verwijderd]

Mijn ervaring is dat FireFox het leuk doet, maar IE geen transparantie aankan. Hinderlijk, en icm transparantie niet goed te gebruiken dus.

[Verwijderd]

Je kan heel gemakkelijk door middel van een htc behavior een png afbeelding heel goed transparant weergeven. Dit werkt overigens gewoon in IE, en in Firefox/Mozilla. Zegmaar dit: http://webfx.eae.net/dhtml/pngbehavior/demo.html

Verwijderd schreef op 02 november 2004 @ 11:44:
Mijn ervaring is dat FireFox het leuk doet, maar IE geen transparantie aankan. Hinderlijk, en icm transparantie niet goed te gebruiken dus.

[crisp]

je moet gewoon het imageformaat gebruiken dat het beste bij de soort image past:
kleine plaatjes, icoontjes e.d. met weinig kleuren en eventueel 1 transparante kleur --> gif
dingen als screenshots of grote plaatjes waarbij lossless compressie voorkeur geniet, en/of alpha-transparancy --> png
foto's e.d. waarbij lossy compressie geen probleem is --> jpg

IE is een antiek stuk schroot; ik zal daar nooit een ranzig ActiveX filter voor gebruiken alleen omdat dat bejaarde ding gewoon zwaar achterloopt qua ondersteuning van webstandaarden. Dan druk ik IE-gebruikers liever met de neus op de feiten

[ Voor 26% gewijzigd door crisp op 02-11-2004 11:56 ]

[phaas]

zo'n .htc geval klinkt als een oplossing. Ik ben er al regelmatig tegenaan gelopen dat IE geen alpha ondersteund, zeer vervelend als je net een leuk idee in je hoofd hebt.
Domme vraag misschien, maar hoe maak je zo'n .htc bestandje?

[Verwijderd]

Haha, domme vraag, mischien wel ja Linkje staat hier namelijk boven verlend, maar speciaal voor jou, hier vind je er alles over: http://webfx.eae.net/dhtml/pngbehavior/demo.html

phaas schreef op 02 november 2004 @ 11:55:
zo'n .htc geval klinkt als een oplossing. Ik ben er al regelmatig tegenaan gelopen dat IE geen alpha ondersteund, zeer vervelend als je net een leuk idee in je hoofd hebt.
Domme vraag misschien, maar hoe maak je zo'n .htc bestandje?

[phaas]

Verwijderd schreef op 02 november 2004 @ 11:58:
Haha, domme vraag, mischien wel ja Linkje staat hier namelijk boven verlend, maar speciaal voor jou, hier vind je er alles over: http://webfx.eae.net/dhtml/pngbehavior/demo.html

[...]

Oja Ik kreeg dat bestandje eerst niet te pakken maar ik had geloof ik een typo gemaakt...
Het is gewoon een javascriptje als ik het goed zie, das errug handig lijkt me zo. Die kun je dus gewoon bovenaan in je stylesheet gooien en klaar is kees?

[Verwijderd]

Ja, het is erg simpel, je hebt nodig:

- behavior.htc (het script),
- blank.gif (in de zelfde locatie als je .htc file staat, word gebruikt door het htc ding)
- Png image dat je transparant wil hebben.
- En de code:

code:

[img]"plaatje.png"[/img]

That should do the trick

[Maverick]

en jij denkt dat transparantie een probleem is? Maak maar eens een png in 1 kleur, en plaats hem in een achtergrond met dezelfde kleur. Zelfs dat weet IE te verpesten. Ik gebruik zelf bijna alleen maar png, en dat dat in IE niet lekker gaat is jammer voor IE gebruikers.

[phaas]

Maverick schreef op 02 november 2004 @ 12:13:
en jij denkt dat transparantie een probleem is? Maak maar eens een png in 1 kleur, en plaats hem in een achtergrond met dezelfde kleur. Zelfs dat weet IE te verpesten. Ik gebruik zelf bijna alleen maar png, en dat dat in IE niet lekker gaat is jammer voor IE gebruikers.

Jammer voor jou aangezien >90% van de gebruikers IE gebruikt :-)

[Bosmonster]

Maverick schreef op 02 november 2004 @ 12:13:
en jij denkt dat transparantie een probleem is? Maak maar eens een png in 1 kleur, en plaats hem in een achtergrond met dezelfde kleur. Zelfs dat weet IE te verpesten. Ik gebruik zelf bijna alleen maar png, en dat dat in IE niet lekker gaat is jammer voor IE gebruikers.

Leuk artikel:

http://www.hut.fi/u/hsivonen/png-gamma.html

trek zelf je conclusies maar

[ Voor 22% gewijzigd door Bosmonster op 02-11-2004 12:35 ]

[Verwijderd]

Het wordt tijd voor meldingen zoals je nu hebt bij sommige sites als je NIET IE gebruikt:

This site has been designed for use in Mozilla Firefox 0.9.3 or later, or in Opera 7 or higher. Click here to download the latest version of Mozilla firefox, or click here to continue if you think that your browser can process this page properly.

[ Voor 4% gewijzigd door Verwijderd op 02-11-2004 12:44 ]

[Roeland4]

Ik ben volledig voor png, maar het is schandalig dat IE geen goede ondersteuning heeft, terwijl ze dit wel belooft hadden.

Hier is meer info: http://www.petitiononline.com/msiepng/petition.html

[leuk_he]

HunterPro schreef op 02 november 2004 @ 11:44:
PNG is mooie technologie maar nog niet voldoende ingeburgerd om op 'grote schaal' te gebruiken. Voor veel projecten blijf ik dus bij creatief gif- en jpeg gebruik. Mijn hoop is gevestigd op een nieuwe IE

Leg eens mij eens even uit:
Wat kun je met jpg en gif wat je met png niet kunt.

Als je deze regels gebruikt.
-jpeg is voor foto's (compressie is beter)
-gif is voor heel simpele computer genereerde plaatjes (smiles/buttons/balken/hoeken)
of voor animaties (daar is nog geen goed alternatief voor volgens mij)
-png is voor grote plaatjes, door de computer gegenereerd die meer als 256 kleuren nodig hebben.

Ok, er zijn wat features (transparancy) die niet volledig door i.e. worden ondersteund, maar daar kun je omheen coderen, net zoals je pagina's kunt maken die er op firefox & i.e. goed uitzien.

Volgens mij wordt dat "i.e. ondersteund transparancy niet goed" verhaal vooral gebruikt door fanatieke mozilla nerds.

Zoveel verschillen zijn er toch niet:
http://www.libmng.com/pub/png/pngs.html

Ook het webfx wordt bij mij transparant in i.e. 6 in het htc voorbeeld.

[ Voor 8% gewijzigd door leuk_he op 02-11-2004 13:09 . Reden: taal ]

[Maverick]

phaas schreef op 02 november 2004 @ 12:21:
[...]


Jammer voor jou aangezien >90% van de gebruikers IE gebruikt :-)

niet jammer voor mij, jammer voor hen

[Verwijderd]

Ben het je eens dat FireFof beter is, alleen ben ik van mening dat als je een goede site wilt bouwen, het (png, css, htc etc) gewoon altijd moet werken, of je nu IE of FF gebruikt, moet niet uitmaken voor de gebruiker, aangezien hij kiest welke browser hij gebriukt, en jij wilt dat de site correct word weergegeven

Verwijderd schreef op 02 november 2004 @ 12:39:
Het wordt tijd voor meldingen zoals je nu hebt bij sommige sites als je NIET IE gebruikt:

This site has been designed for use in Mozilla Firefox 0.9.3 or later, or in Opera 7 or higher. Click here to download the latest version of Mozilla firefox, or click here to continue if you think that your browser can process this page properly.

[ Voor 1% gewijzigd door Verwijderd op 02-11-2004 13:28 . Reden: foutje in [bold] ubb code ;) ]

[Oogst]

crisp schreef op 02 november 2004 @ 11:54:
IE is een antiek stuk schroot; ik zal daar nooit een ranzig ActiveX filter voor gebruiken alleen omdat dat bejaarde ding gewoon zwaar achterloopt qua ondersteuning van webstandaarden. Dan druk ik IE-gebruikers liever met de neus op de feiten

Dit kun je toch zeker niet menen? Heel leuk en zo, maar meer dan 90% van de internetters gebruikt IE en dan kun je niet serieus zeggen dat alleen een klein groepje jouw site kan bezoeken. Tenzij je je doelgroep goed kent en weet dat die IE niet hebben, natuurlijk.

[Cyphax]

Oogst schreef op 02 november 2004 @ 13:46:
[...]

Dit kun je toch zeker niet menen? Heel leuk en zo, maar meer dan 90% van de internetters gebruikt IE en dan kun je niet serieus zeggen dat alleen een klein groepje jouw site kan bezoeken. Tenzij je je doelgroep goed kent en weet dat die IE niet hebben, natuurlijk.

Door brakke PNG support wordt een pagina met PNG's erop toch niet onbruikbaar, hooguit ziet ie er niet uit als bedoelt door de ontwikkelaar.
Mij maakt het ook steeds minder uit als IE het niet helemaal goed laat zien.

[Stoffel]

Ik gebruik PNG vrijwel altijd om plaatjes hier op got te posten, behalve als het foto's zijn. Die transparancy problemen ben ik eerlijk gezegd nooit tegen gekomen met IE (maar die gebruik ik ook niet veel)?

[André]

crisp schreef op 02 november 2004 @ 11:54:
Dan druk ik IE-gebruikers liever met de neus op de feiten

Zou je in de nieuwe GoT template ook niet gewoon PNG gebruiken, uiteraard met een alpha-channel

[Savantas]

@JurrieBurrie
Nog beetje omslachtig, die .htc... Althans, als ik het goed lees. Extra blank.gif nodig en per PNG moet je een style toevoegen.
Met onderstaande javascript die je alleen in je header hoeft aan te roepen werkt PNG ook goed in IE, hooguit is de PNG tijdens het laden even grijs.

code:

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
   {
   for(var i=0; i<document.images.length; i++)
      {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
         {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         var imgAttribs = img.attributes;
         for (var j=0; j<imgAttribs.length; j++)
            {
            var imgAttrib = imgAttribs[j];
            if (imgAttrib.nodeName == "align")
               {          
               if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
               if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
               break
               }
            }
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
         }
      }
   }
window.attachEvent("onload", correctPNG);

Scriptje is her en der te vinden onder de naam pngfix.js

Vinnik net wat makkelijker...

@ BTM909: Ja, helemaal gelijk... Suf van me, keek alleen naar genoemde voorbeeld en dacht ff niet verder... Je hebt nog wel een blank.gif nodig dan overigens...

PS. sorry voor layout...

[ Voor 43% gewijzigd door Savantas op 02-11-2004 16:04 . Reden: reactie op een van die witte leeuwtjes ]

[Tjark]

Ik gebruik PNG's met transparency op de pagina van een vereniging die ik heb gemaakt. Gif's leveren een lelijk resultaat (logo links boven en veranderend plaatje rechtboven http://www.lacustris.nl ).
M'n oplossing: voor <IE5 toon ik een gif (lelijk maar dan zien de gebruikers iets), en voor mozilla, opera en IE5.5+ toon ik een PNG waarbij de laatste idd door de AlphaImageLoader transparant wordt gemaakt. De css wordt wel een boeltje met uitzonderingen, maar iedereen ziet tenminste wat en de goede browsers (Moz, Opera, IE5.5+) hebben een 'mooie' site (smaken verschillen )
En voor het printen: 't CMS zorgt ervoor dat je een cleane pagina kun krijgen die je mooi uitprint

[BtM909]

Savantas schreef op 02 november 2004 @ 14:09:
@JurrieBurrie
Nog beetje omslachtig, die .htc... Althans, als ik het goed lees. Extra blank.gif nodig en per PNG moet je een style toevoegen.
Met onderstaande javascript die je alleen in je header hoeft aan te roepen werkt PNG ook goed in IE, hooguit is de PNG tijdens het laden even grijs.

Scriptje is her en der te vinden onder de naam pngfix.js

Vinnik net wat makkelijker...

PS. sorry voor layout...

Je kan het toch ook gewoon zo regelen (zoals in het voorbeeld):

code:

img {
  behavior: url("pngbehavior.htc");
}

[crisp]

André schreef op 02 november 2004 @ 13:56:
[...]

Zou je in de nieuwe GoT template ook niet gewoon PNG gebruiken, uiteraard met een alpha-channel

De images in de GoT template lenen zich uitstekend voor het gif-formaat

[Verwijderd]

crisp schreef op 02 november 2004 @ 14:23:
De images in de GoT template lenen zich uitstekend voor het gif-formaat

/me dexus vraagt zich af wanneer de nieuwe lay van GoT online komt.

[crisp]

Verwijderd schreef op 02 november 2004 @ 21:17:
[...]
/me dexus vraagt zich af wanneer de nieuwe lay van GoT online komt.

offtopic:
Ik weet het (ongeveer)
Bèta-test is zo goed als afgerond, binnenkort wordt hij op GoT neergezet maar in 1e instantie alleen nog voor de crew enabled; hiermee kunnen we goed real-live situaties testen. Al naar gelang hoe dat gaat lopen zal hij niet lang daarna ook voor de rest van de users worden aangezet. Dus als we geen grote problemen ondervinden kan je eerder rekenen op weken dan op maanden

[Annie]

Om eerlijk te zijn ben ik de echte noodzaak nog niet tegengekomen, maar ik ben ook niet continue bezig met grafische zaken. Tot nu toe lukt alles aardig met gifjes en jpegjes (of het lijkt daar tenminste op).
Misschien toch eens de collega's op de studio wakker schudden, kunnen ze eens wat spelen met de materie.

Zaken als onderstaande kan ik me helaas niet snel permitteren. Die zouden namelijk vrij snel gevolgd door een klant die mij dan weer met de neus op de feiten drukt

crisp schreef op 02 november 2004 @ 11:54:
IE is een antiek stuk schroot; ik zal daar nooit een ranzig ActiveX filter voor gebruiken alleen omdat dat bejaarde ding gewoon zwaar achterloopt qua ondersteuning van webstandaarden. Dan druk ik IE-gebruikers liever met de neus op de feiten

[-Lars-]

Oogst schreef op 02 november 2004 @ 11:42:
Ik heb PNG nog nooit gebruikt voor print of voor web, maar ik gebruik het wel dagelijks omdat het losless compressie biedt, en dus kleinere formaten [b[dan png[/b] en tga, en omdat het daar nog 8 bits transparantie bijdoet. Mijn ervaring ermee is wel dat png irritant traag wordt op hoge resoluties. Op 4000*3000 is dat echt problematisch, ook op een snelle pc, vind ik.

Er is dus een verschil tussen PNG en png? Of is dit een typo?

[sjirafje]

BtM909 schreef op 02 november 2004 @ 14:21:
[...]

Je kan het toch ook gewoon zo regelen (zoals in het voorbeeld):

code:

img {
  behavior: url("pngbehavior.htc");
}

Ik heb dat geprobeerd. En nu worden mijn plaatjes inderdaad transparant, maar ik krijg er ook zo'n kruisje in wat je ook te zien krijgt als het plaatje niet gevonden is.

edit:
klikbaar

Is hier nog iets aan te doen?

[Semyon]

sjirafje schreef op 08 november 2004 @ 00:47:
[...]


Ik heb dat geprobeerd. En nu worden mijn plaatjes inderdaad transparant, maar ik krijg er ook zo'n kruisje in wat je ook te zien krijgt als het plaatje niet gevonden is.

Gokje, heb je dit gedaan?

Verwijderd schreef op 02 november 2004 @ 12:05:
...
- blank.gif (in de zelfde locatie als je .htc file staat, word gebruikt door het htc ding)
...

[sjirafje]

yup, die staat inmiddels in elke map die iets te maken heeft met die pagina. Niet de bedoeling?

[ Voor 12% gewijzigd door sjirafje op 08-11-2004 01:39 ]

[Rowanov]

Je kan natuurlijk ook deze fix gebruiken:

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Dat is een javascript die je aan je pagina hangt.

[HunterPro]

Rowanov schreef op 08 november 2004 @ 09:42:
Je kan natuurlijk ook deze fix gebruiken:

http://homepage.ntlworld.com/bobosola/pnghowto.htm

Dat is een javascript die je aan je pagina hangt.

Savantas in "PNG, wat zijn je ervaringen ?"