Avatar billede Slettet bruger
08. januar 2008 - 23:08 Der er 7 kommentarer og
1 løsning

Transparante .png billeder, eller?

Hejsa.

Jeg er netop ved at udbygge min hjemmeside med nogle billeder til nogle produkter. Billederne skal indeholde en transparant baggrund, hvorfor jeg har valgt .png billeder. Det skal lige siges at jeg er langt fra at være en haj indenfor grafisk design, og derfor er jeg meget i tvivl om jeg har valgt de rigtige billed-formater.

Siderne med billederne kan ses her: http://www.discountdomains.dk/priser_dom%C3%A6ne_registrering.aspx, hvor hvert link fører til en underside med et unikt billede til det enkelte produkt som fx. http://www.discountdomains.dk/domaene.aspx?info=dk

Det ser sådan set ok ud i browserne, men jeg har været nødt til at tilføje et script til siden, der viser billederne ordentligt i IE 5 og 6, der tilsyneladende ikke kan rendere .png filer med transparante baggrunde ordentligt.

Nå, men det korte og det lange er jo så, at jeg vil høre om der sidder nogle med bare en anelse mere viden om web-grafik end jeg, der måske kan svare mig på følgende:

1. Er det det rigtige format jeg har valgt - set ud fra størrelsen på billederne og det faktum, at den mest gængse browser ikke kan vise dem ordentligt uden et javascript?

2. Er der et alternativ og i givet fald hvilket?

Jeg modtager forøvrigt meget gerne feed-back på siden generelt, hvis der skulle være kommentarer, ris/ros osv.

Med venlig hilsen,
Thomas
Avatar billede mrmox2 Nybegynder
09. januar 2008 - 09:06 #1
gif håndterer også transparente baggrunde.
ser fint ud i FF 2.0.0.11 på mandriva 2007
blomsten nederst til venstre ser ikke ud som om det er en du har valgt fordi den passer til sidens indhold, den falder ikke lige ind i temaet synes jeg sådan rent personligt
Avatar billede Slettet bruger
09. januar 2008 - 10:36 #2
Hej.

Tak for feedback.
Nej blomsten falder bestemt ikke ordentligt ind. Den var tiltænkt som en test, der af mangel på bedre skulle virke som et test-billede til test af skaleringen af billedet i bunden. Me sådan er det jo nok når en programmør forsøger at spille smart uden for sit felt :-)

Jeg er klar over at man kan benytte .gif, og mit indlæg var sådan set også minded på om nogen så kunne fortælle mig den bedste måde at lave transparante .gif billeder i Photoshop.

Jeg ved hvor der er en setting, men synes kvaliteten af billedet bliver alt for ringe og derfor efterlyser jeg erfaringer med at lave den slags billeder.
Jeg vil jo helst benytte .gif, da jeg tror det vil give mindre indhold der skal downloades på siderne.

Og det issue med transparans er vel kun med .png i IE?
Kan de vise transparante .gif billeder ordentligt?
Avatar billede mrmox2 Nybegynder
09. januar 2008 - 13:35 #3
tjek http://mypages.dk/exp/transparent
jeg har lavet det samme billede i gif og png (begge lavet i the gimp) der er en gennemsigtig streg ned gennem billedet
her hos mig vises begge dele fint i IE, både png og gif
Avatar billede Slettet bruger
09. januar 2008 - 14:29 #4
Vises de også begge fint i IE 6 og 5.5?
Mit indlæg var jo netop et spørgsmål om hvordan man bedst lavede det og ikke om det kunne lade sig gøre med .gif. Det ved jeg godt at man kan, men jeg kan ikke lige greje med hvilke settings man bedst optimerer det til Internet, samtidig med at kvaliteten bibeholdes bedst muligt.
Avatar billede mrmox2 Nybegynder
09. januar 2008 - 14:56 #5
sry - så har jeg misforstået det
jeg hæftede mig kun ved at du ikke kunne køre png uden java
/Thomas
Avatar billede pidgeot Nybegynder
09. januar 2008 - 15:15 #6
Problemerne med PNG i IE6- er kun for PNG-filer med en alpha channel (dvs. hvor hver pixel kan have en forskellig gennemsigtighedsgrad). Bruger du PNG-8, vil du få et billede der visuelt svarer til en GIF, inkl. den simple tranpsarens som GIF kan klare (og i mange tilfælde er den en smule mindre end en GIF). Det har dog også samme begrænsning som GIF med at du er begrænset til 256 unikke farver (det er nok det der i virkeligheden er dit problem).

Du kan også benytte et værktøj til at konvertere din PNG så alpha-channelen fjernes og erstattes med den "simple" gennemsigtighed - jeg mener det virker, men må indrømme det ikke er noget jeg har testet for nylig, så kan huske forkert.

Hvis delvist gennemsigtige baggrunde er vigtigt for dig, kan du overveje at benytte Fireworks (eller andre programmer med en tilsvarende feature) for at lave en PNG-8 hvor hvert enkelt paletteindeks tildeles en given alpha-værdi. Med denne type PNG vil IE6- vise gennemsigtig baggrund, og behandle pixelsne med delvis gennemsigtighed som værende 100% gennemsigtige (*uden* det PNGfix-script). IE7+, Firefox, m.v. vil alle rendere den delvise gennemsigtighed korrekt. Denne løsning kan i mange situationer være at foretrække, omend det selvfølgelig afhænger af billedet, og det begrænser antallet af farver du kan bruge i alt (da den delvise gennemsigtighed angives som en del af den individuelle farve, og ikke pr. pixel).
Avatar billede Slettet bruger
31. januar 2008 - 22:33 #7
Hejsa.
Nu havde jeg jo håbet på en 'opskrift' på hvordan man lavede gode web-giffer/png'er, men ok. pidgeot smidder du lige et svar?
Avatar billede pidgeot Nybegynder
31. januar 2008 - 22:50 #8
S'gerne.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester