--- title: "PNGbilder - fördelar/nackdelar och användningsområden" type: "forum-thread" url: "https://www.webforum.nu/amne/design-grafik/160506-pngbilder-fördelar-nackdelar-och-användningsområden" topic: "Design & grafik" topic_url: "https://www.webforum.nu/amne/design-grafik" author: "symbolism" published: "2007-05-19T23:13:54.000Z" updated: "2007-05-26T13:14:10.000Z" replies: 33 views: 1450 page: 1 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/design-grafik/160506-pngbilder-fördelar-nackdelar-och-användningsområden" --- # PNGbilder - fördelar/nackdelar och användningsområden _Sida 1 av 2._ ## #1 — symbolism, 2007-05-19T23:13Z Hejsan! Jag gjorde idag en upptäckt som kommer påverka allt mitt kommande designarbet - jag testade att spara bilder från photoshop i PNG-format iställer för gif eller jpg. Det är ju hur bra som helst, bilderna får transpoarenta tilljämningspixlar osv och man kan placera kritterna vart som helst på en sida och det ser **bra** ut. Jag upptäckte det hela i samband med ett enkelt DHTML-skolarbete jag ville göra (bildkällor finns i CSS-mallen för den som är intresserad) Jag vill veta vad det är för nackdelar med att använda PNG - vilka webläsare har svårt för formatet osv. Och vad är det för skillnad mellan PNG-8 och PNG-24. Jag har länge undrat hur fanken man placerar bilder som "sticker ur boxarna" innan utan att hålla på att tjafsa med att spara med rätt bakgrundsfärg osv (som man ju måste göra med gif). Idag kom ljuset=) :birp Så ja - Fördelar? Nackdelar? Andra användningsområden? nyfiken newbie frågar... Permalänk: https://www.webforum.nu/p/160506 ## #2 — andyoumaydie, 2007-05-20T01:37Z Fördelarna är många, jämfört med gif iaf. Nackdelarna: IE6 och lägre, vet inte hur det är med de andra större webläsarna, kan inte visa .png bilder utan diverse hacks... Permalänk: https://www.webforum.nu/p/1979198 ## #3 — nitro2k01, 2007-05-20T03:40Z Fix för IE6 Övrigen kan jag tipsa dig om att du gärna kan ersätta 8-bitars giffar med 8-bitars png'r, då de senare oftast är mindre i storlek för samma bild-data utan förlust. Permalänk: https://www.webforum.nu/p/1979203 ## #4 — symbolism, 2007-05-20T09:14Z cheers mates! tack för länken nitro2k Permalänk: https://www.webforum.nu/p/1979221 ## #5 — symbolism, 2007-05-20T09:40Z PNG-8 då, har den inte samma genomskinlighet som PNG-24? Permalänk: https://www.webforum.nu/p/1979233 ## #6 — Poteta, 2007-05-20T09:42Z Men när jag använder png så blir bakgrunden grå i IE men inte i FF. Fast det kan bero på mitt hemsideprogam också kanske? Kolla och jämför med IE och FF: [www.ifk95.se](http://www.ifk95.se) Permalänk: https://www.webforum.nu/p/1979235 ## #7 — colione, 2007-05-20T09:43Z Nej det beror på ies kassa png-stöd. Kolla in nitros länk för en lösning. Permalänk: https://www.webforum.nu/p/1979236 ## #8 — Poteta, 2007-05-20T09:50Z > **colione skrev:** > > Nej det beror på ies kassa png-stöd. > > Kolla in nitros länk för en lösning. Tack. Permalänk: https://www.webforum.nu/p/1979240 ## #9 — nitro2k01, 2007-05-20T12:38Z > **symbolism skrev:** > > PNG-8 då, har den inte samma genomskinlighet som PNG-24? PNG-8 har en palett på 256 färger. Varje färg kan ha en transparens mellan 0-255, men får program kan skapa sådana filer. I Photoshop är PNG-8 likvärdigt med GIF när det gäller transparens. Permalänk: https://www.webforum.nu/p/1979289 ## #10 — symbolism, 2007-05-20T13:06Z > **nitro2k01 skrev:** > > I Photoshop är PNG-8 likvärdigt med GIF när det gäller transparens. Jofan, märkte det. Nog för att olika läsare kan tolka koden olika, men bilder!? Diversity is not a preference in this area. Nu blir det lite av en kodfråga - men jag hopppas moderatorn är snäll nog och låter den vara kvar här ändå för det handlar ju om grafiken... Min meny på har nu blivit uppdaterad med PNG-24 bakgrund. bilden som används är följande: ![](http://www.gurkean.com/externalcss/layout/menu.png) I IE7 (ingen aning om hur den ser ut i IE6, förmodligen inte heller mycket att hurra för) blir det svarta kantpixlar istället för transparenta. I Firefox (the most **beloved** browser) blir bilden precis som jag vill ha den. Finns det något enkelt sätt som jag kan använda mig av JavaScripts-lösningen på problemet när det är följande CSS-kod som styr meny-listan: ``` #menybox { width: 700px; opacity: 0.7; filter: alpha(opacity=70); position: absolute; top: 90px; left: 170px; } /*själva menyn*/ #meny { margin: 0; padding: 0; } #meny ul { margin: 0px; padding: 0px; list-style-type: none; text-align: center; } #meny ul li {float: left;} #meny ul li a { text-decoration: none; background: url(layout/menu.png) no-repeat; font-size: 16px; font-weight: bold; float: left; margin-left: 5px; height: 20px; width: 90px; padding: 5px; color: black; } #meny ul li a:hover { background-position: right; } ``` menyn är infogad via SSI på alla sidor. (ska nog byta till php-include i framtiden när jag lärt mig lite mer av det språket) Nån som har en bra idé? :stud Så som jag ser det ser det mycket rörigt ut... kanske bara ska försöka mig på en GIF-bild och ta bort kantpixlarna istället... Permalänk: https://www.webforum.nu/p/1979296 ## #11 — colione, 2007-05-22T22:03Z Har du provat att använda js-lösningen? Och vad fick du isf för resultat? Du skulle även kunna prova följane css: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='bild.png', sizingMethod='crop'); Permalänk: https://www.webforum.nu/p/1980107 ## #12 — Spook, 2007-05-22T22:06Z > **colione skrev:** > > Nej det beror på ies kassa png-stöd. > > Kolla in nitros länk för en lösning. Man kan väl knappast kräva att ens sidas besökare skall iväg och installera någon fix för att dom skall se bilder okej ? Inte tycker jag det iaf... Permalänk: https://www.webforum.nu/p/1980108 ## #13 — colione, 2007-05-22T22:14Z > **Spook skrev:** > > Man kan väl knappast kräva att ens sidas besökare skall iväg och installera någon fix för att dom skall se bilder okej ? > > Inte tycker jag det iaf... Nu har du inte uppenbarligen inte läst länken. :i Den fixen är nåt som sidskaparen använder på sin sida. Vad den gör är att nyttja små egenskaper/filter i directx om appliceras på bilden, då directx uppenbarligen har fullgott stöd. :OO En vanlig "dum" användare har ingen som helst aning om vad som händer bakom kulliserna. Permalänk: https://www.webforum.nu/p/1980113 ## #14 — colione, 2007-05-22T22:19Z Förresten, använder du det filtret helt och hållet kan du skippa cssen som inte validerar, då du kan kasta in opacityn direkt i pngen när du skapar den. Permalänk: https://www.webforum.nu/p/1980115 ## #15 — Spook, 2007-05-23T05:25Z > **colione skrev:** > > Nu har du inte uppenbarligen inte läst länken. :i Den fixen är nåt som sidskaparen använder på sin sida. Vad den gör är att nyttja små egenskaper/filter i directx om appliceras på bilden, då directx uppenbarligen har fullgott stöd. :OO > > En vanlig "dum" användare har ingen som helst aning om vad som händer bakom kulliserna. Erkänner att jag inte kollade länken. Skit som händer..... skål.. :bire I övrigt tycker jag att .png bilder är kanon, skulle önska att IE hade fullgott stöd utan att man var tvungen att mickla för mycket. Permalänk: https://www.webforum.nu/p/1980143 ## #16 — symbolism, 2007-05-23T08:38Z > **colione skrev:** > > Har du provat att använda js-lösningen? Och vad fick du isf för resultat? > > Du skulle även kunna prova följane css: > > filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='bild.png', sizingMethod='crop'); tack ska testa... har redan provat något liknande men det funkade ej. Permalänk: https://www.webforum.nu/p/1980189 ## #17 — symbolism, 2007-05-23T08:45Z är det så här jag ska lägga in den? (# meny är boxen listan ligger i) ``` #meny { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='layout/menu.png', sizingMethod='crop'); } ``` fungerar ej :l Permalänk: https://www.webforum.nu/p/1980192 ## #18 — silfver, 2007-05-23T08:50Z Du måste skriva så här: ``` #meny {background: url(layout/menu.png);} * html #meny {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=t rue, src='layout/menu.png', sizingMethod='crop');} ``` **r\\** Fixade lite. Permalänk: https://www.webforum.nu/p/1980199 ## #19 — colione, 2007-05-23T08:52Z Nja, det är på elementet som ska innehålla bilden du ska ha den. :) Permalänk: https://www.webforum.nu/p/1980201 ## #20 — symbolism, 2007-05-23T09:05Z > **silfver skrev:** > > Du måste skriva så här: > > ``` > #meny {background: url(layout/menu.png);} > * html #meny {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='layout/menu.png', sizingMethod='crop');} > ``` > > **r\\** Fixade lite. > **silfver skrev:** > > Nja, det är på elementet som ska innehålla bilden du ska ha den. Okej... Jag antar att det inte ska vara ett sånt mellanrum mellan t rue i scriptkoden. Bakgrunden ligger i listlänkarna enligt nedan ``` #meny ul li a { text-decoration: none; background: url(layout/menu.png) no-repeat; font-size: 16px; font-weight: bold; float: left; margin-left: 5px; height: 20px; width: 90px; padding: 5px; color: black; } ``` ska jag då lägga in scriptet så här? ``` #meny ul li a { background: url(layout/menu.png); } * html #meny ul li a { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='layout/menu.png', sizingMethod='crop'); } ``` Permalänk: https://www.webforum.nu/p/1980204 --- Tråden på webben: https://www.webforum.nu/amne/design-grafik/160506-pngbilder-fördelar-nackdelar-och-användningsområden Nästa sida: https://www.webforum.nu/amne/design-grafik/160506-pngbilder-fördelar-nackdelar-och-användningsområden/page2.md