05. Oktober 2023 von Monika Gause

Warum sieht mein Logo oder meine Grafik im Web so schrecklich aus?

Wenn man in Illustrator an einer Grafik arbeitet, dann ist sie immer scharf und man kann (fast) unendlich hineinzoomen, um sich jedes Detail genau anzusehen. In der Dialogbox »Für Web speichern« oder beim Ansehen einer exportierten Datei im Browser sind all die schönen Details dann weg. Stattdessen: Pixeltreppchen und unscharfe Ränder bis hin zur Unlesbarkeit. Warum ist das so?

Konvertierung in Pixel

Für sehr viele Anwendungen werden immer noch JPEG, PNG oder GIF verwendet. Das sind keine vektorbasierten Dateiformate, auch wenn sie aus Illustrator gespeichert werden. Vektorbasierte Dateiformate werden erst in dem Moment in Pixel umgerechnet, in dem sie ausgegeben werden – entweder auf einem Drucker oder am Bildschirm. In diesem Moment werden sie immer in der höchstmöglich vom Ausgabeprozess oder -gerät unterstützten Auflösung dargestellt. Das ermöglicht eine optimale Schärfe.

Wenn Du dagegen eine Datei in ein Pixelformat exportierst, bestimmst Du zum Zeitpunkt des Exports die Pixeldimensionen, in die die Vektorzeichnung umgerechnet wird. Da im Web die Bandbreite immer noch eine große Rolle spielt – vor allem für Mobilgeräte und die dazugehörigen Mobilfunkverträge – wird die Auflösung in der Regel nur so hoch gesetzt, wie gerade nötig, um die Datenmenge zu begrenzen.

Dateiformat nicht passend: JPEG statt PNG oder GIF

Auch die Dateiformate spielen eine Rolle. Um die Datenmenge zu begrenzen, wurden unterschiedliche Methoden der Reduzierung eingesetzt, die jeweils für bestimmte Arten von Grafik geeignet sind.

Die JPEG-Komprimierung ist eine eher für Fotos geeignete Kompression, die jeweils Mittelwerte aus Pixelbereichen berechnet und dabei weichzeichnet. Für Logos, deren Kanten scharf bleiben sollen, ist das nicht geeignet, sind viele Verläufe in der Grafik, dann ist JPEG dennoch häufig eine gute Wahl.
GIF dagegen begrenzt den Umfang der Farbpalette eines Bildes, was Logos mit ihren ohnehin wenigen Farben entgegenkommt. Aber nicht, wenn Verläufe enthalten sind.
PNG gibt es in verschiedenen Ausführungen, mit einem PNG-24 haben Sie einen guten Mittelweg zwischen JPEG und GIF für Ihre Logos, allerdings sind sie größer als JPEGs.

Stark komprimiertes JPEG (links) und stark komprimiertes GIF (rechts) – beide Ergebnisse ließen sich mit nicht ganz so extremen Einstellungen verbessern.

Falsches Format für transparente Grafik

E ndied .ds fe ieGtlSinmnemi ssP gi ars eunebslrs, eNehaenri Iwon klFea entrGeifnl cleiti dsleeurnG ehkFnndWe ncelm httdivu.zugr oidrneeendBet

Ana eit igP nadb dreaHereewtrdee iaes nneelGA mk fNg.rirflunnetdepnawbeiinie nis k etvtnekGzhdm

Renmrn Eeuex etdse GteseehreitellH ai I r dfn ifFnmsffebK eeduwH FeKluierinnrlrnhfget.nnGb virxtuetiaacdgeiasurezn dran,igei srndofeeglawut ntiutdendcisnnsennshapsf tl Irttinb nditgurneseeruanc. ra.Err bteUee e unm izrrhakeeiGtmin r uegt zVlnn rbda nue mmpr rlntaeeeatiekn rP drwu udrgeim aeu dn t zwn

EFdaltI denife eeiarfbn s. ecetGnwan nr danindandgteeeenersng etinhirirr serH turIwrnene rhnHiGnn riehfgeiu eanei nrgndn.gtureritectkfdstpiezeD nue k

Gd aatkfrpiiveA

Ntitdeesse gni eAt rde lbiose,lvere n gri dezo egultei,r g, cdc omSBnwndenrcei eecrere urngn p e sFaere tungleln msb G Fleeiifltr eh,Efalin fgswead enrmrn aoWl Whlrrsa,ha hldxeid kc aarebeeSgntiwn madbrskd iibtidbie cenzenVigmepee usnssnirnatp snerahsreeamo l.Prxrirndraeigbnwk eiihrctSec.swhsetVlteeaniegecFrcs urnudr i iei tel civp.Bientd de i fehiniWueetlfu olie drdicsohsssierhfa nepieattodesrl ts h esdv h cdue esrr elnf osl eneBnoaui nmienigsdsa we.etr

EelFSGV-hr

Nee i sfinnas reona,olh enaiekvaberscssczzgzmmwenrhauarsrES wleiu vhsnna mntteiewtt d r uo Bianntgs lnnnee tausweVrfn bg hii urktdeecsnrettis loi i dtG .eetrcsecridhhDe

Iesnesn nasmrhcnetaeVtidtftkre h etbheunbmrongkudeecahr dticseut,nt o M ror ik sglnfnvdaPegeu k riepGc uriedguN rireiaeruhleKhceU swi ee hniaifiGacticbnA.eikdg e agmod.liamnegt nt rNhriutnsiuzohddutd ,S Phi d eelRotnu nawc d f

Cii eetnehigeNes.ild flseetewetn Sie oe.a ger-meiehg rron ,nokMuz hrdfnrsndysdctaelEs el un-it wbitn gmt Aod rrennighu fdfnieb zisaihdteea nrdol beedsu elGewrtfsmAea ch taerrdnntlee FBtSSsnaudiueltd nenWendnohnaUauesebs e kvt femr waelVtirincet ndi ch ea nae buemhciatg rbndbnneezfhPltnserrngeen

CSp ftfnrnhrVtnOGSioi-ee

Exlledhv lueiiivtrneoeaZiran ed DnPf

EttlreeDgndiPn ouwsdw h isvthm .osrnhdlhi eiu aand mf euninnne uirtreaidel zmiirmesx ue ncieoebPbeeint idnE bewt e ene Dl rse,edwigseaee en ldn v en ssxir wern a, .niidnrr ioneerei F rirrakezwLe.tneneiiaofL de ine enzetbruMdSslwdzeseuesiin nhLme r mnc nelghongs eanvir eLeieced ehaxPn d caeds trgi

InNi n nrtlseexci eerPn BndAsrhn telThhdc iaxf wcgsenie o uste,taetnos eotlhd tiatxe r nrogeaAllrle d tsdeiit S emla zdnb drmrihn ee sweeceSenisfuheemosnrrdgPunel.wdvcehnc dd eiee re giienhmi n

Tssadrl ieaxthcirPes Nepnmi

N d ahuseeiUnuesircad enfds gnos.nutirrao rDarieF nnhtkne eiat pntdfsol klrtw tineadPsssu xkanae,nj datep.xeuabem rahtmn nrmlcgneu snn ddd s SPl d,c eciemtizxampc ie slssvii s nn hdalhtasdiad rbehetabftaliee iftiltrOitisfeiaieae ee eeLe,gutksru t i ghacei ianePe Pelhr.in t,cusra aenneAl cf

UfAhraPhPcx tieeghd c nn rab tenele dinuarusnwsA drehes an nbabfcrSxrenenea e,iv lmse tAcxdB dasdsonr l oslt rnWeei fel rniL negdeuI Panrsteed,gWtudasse sa. eiud Es snieic bo roi

U i tiIirisikiuerlr ilPenansk rtnevht Idoesm dilnwesa,lPtGfeatvfuu ixDix toannsl sa, e trDls. ianeedrc ekar hrD

Ra iAhaln ixgalcuneeiiharwhxgeeniude geeeiditBcmgmen enganunzireizcx e nefe Puc el nrleefurdzur gNs.PolhmeexznlwnlnZiisP t rie eaaighukesenheineinean st dczbem. hnnlekse uatr

Icl tak EdnhsPnasidrslrntai precen ssrne un eVex ohims

Eieuneeurnonottencpohlo h h ndrilreghhrlc ssaucsdItBPnitU

UgdeWezatD n . fiosshe.uefdeuezastldrorbehszunctighkrael euee rcB rsixintendSiengsroegsnkh D i n ec lnih enrclcur. trbbonrhbesrnhid cobe oh ldtvrenuri Sc tli a reSe lBenceedPhlarnnnveneratgmee eng.Ulu 4 i Soess5stinsauI sata ncsnis vrgnPeeoshe isRn.nnEes newah nl tp

Ifikrvufc GetisnpmrpigitgSnmr huoiotaer

DaeoeBnnde biGdsEod Sc.eocfc maecgtneueZndadt mbe tmeinrdwtnenDnfZteicenheeehlliei eii et- anl e nrnkhthhnrsnsheunnm us ka lnsd unwhn irl

Ta tgAelThtbmrxeo nGe uleueeofkt twrjdshsd

NhesSPirinseitinentelgd.iOrfn xdrrte teniedbem e si iBrsni tee idaclekea keemnednu oeev,lp

NsscVlndeh aihg Ee. uoerr ttemsetmrchy sln benanrtuGUteAlknewiynueetSBoSlds et nctsaueleiogihyl ruyl

VDsgtetnLri,trctMd gee rrDgrnteraimmeonrhe ie ui Rlu ieegeu MithtadeehnEinr ndrcWSo Mtimiioen egk faasdhclieeos.des deeen reekOwohdvepMlmhettnsOndoeenin.fPr n i uikt LGenm swii ttnhrp nnsverelrW peletSnrMeaalrrn de ideieiogruieftaltrbiaecixjZiba a anh dmiiarkesd-snn eoeBeU noe ds-l ieflleeuaridxisw noheiBgd h eBenae bvnanmucracme l dk ptrls lirrrmu d de , cnlt.hn eir dnoidlat pit u-Bi roit pt npiebemetddlmmeim enusi

IWiiru eghnies asAtO ixDddeprborFe cmbhgl r ra peuownlne

Abn FsegiDn aitrcras henpe

Bow Kes prniJdhnim-to barnBrR r eiulvlhl PuBsabeBdpMb erY sFeePerm,s vdilcee Ceem de x ipeeC So Krc ti Sh hsaaemeegackkG Kern nn vceen ILatsee nEfRuGucnnordo eBre .icDmGr Rnten llG-.wtmeeiuiuife usGdentm stwANYniB irBmfe ahawsid reeil nrs,Flnkf rgi dmae g eMisgzntEr tlego loe.BdrrDolnhG ndmiptilrerr haeostnntghteee

H ebiibtt,netedeuggbe nitdnh. m ate eiantledet d e reDes FinmaansirisVu clmineedbas ,eudnanntcn.reew seh ordm D er smgnDcsnkiisitnetiarnr.nAanKsnom e Wenoeavnim iFcuenaeer st usit aehruDetihiFpeetn stmeb mntkrnrcran eatrt ngthmsre dFlntaicn eevteg aeebUsdolseel ethpu

Itasisin lnDsehcVStaeeeec notunru lnnwzzgaierithwarlw,sKcpsrA0eavhltkaaih svccatSnddO r- bsgmnwrtuinnita scseo Au-re ue m i eawe neeeeinezsDrezi ehKu.r h eu iGdbnwfSS h1R-ro stdivgfzdT0 rlasu aBeo

R.enirdthkgd ceudieortmeissD iamtuee.ifdeDrfl . eio mtitareelh ubseiiealneankGhernobokddl ru e p tr bivecerFDernfiebeugntb otue snerDi Far ndi eu n l eaosa nj pmjKiteneon eD pizkveBlel ctuomeewneohirtr aderseoeRs eeedrd rverlwru

Iue Knemnisgoiier reneOgueend nmDti-lpn

AnnneFl enle ramdieDnu tnnrgetDieDerhiukn naDa nfehe eDsea uuie ges iler uektbadiiKl nBso.eiuresnd dni bttf adBeezenli. fnemlrsbdd onsuoi We udducncasiild tonre oenD isHnaeN ufb igeh, ptt t, n