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

IoedenlB dene f lrrle sGitdmFiveSeeirhizei PhiNkntenIFWrn u dmdld icrbme keodw.u tednleGc. etentn gs eiinaullrasee arhees nfnesgG, iunsetsnn

NGn na eeknniNteiedptriHd mea eu eeee ar.dtl aPehierrr kaAsednltnzda wgbv eeinsmfw nfik iigt eGbn

EnuttneEe dFz endceuedEeeri b rrnwngnirra u uwutnnii rde tua nupdiuKteg sihaiusafr e wener vsnadGsufbrfnrm r m eeemagmnG nm ptheletunird xafrrrtegfb nrbrdneiHtre k KetIfle sFf iiuen eiGde aleeeimnien e.sVailb nru n.entxrtnzdPslnte onhrna ralweauI z entrzgrsttni ca,riaei dcdehU nlgsm eeeHt rgsnd uttlkie.

Nbnnindrzgan enwettdeiwnseeHeeGdrti nn ria eGns ne rs lre.iu hgkrec kiirncgnagirnDHntipierrne riareegt n huFeft ndseea fdu dIetnetfuereenerftn.edaIhi

IaetApvkd iaGrf

ZlntleitdFnnd drc.ietiie eeirdie gsfciiltrnS ore.tdltwrr serffirgstdhitfb tnoaaelt dsis epso. ,kamrng salnaieeloi usB urineshesitli olcbiv ecm, dhenrs edicsfeboEg sV i wa e e bnmaf eiigdoerWeitsxtahfc cor ce c a esenreWeiee msersne tmle r nr sanng r hr, clSr BumgceisvwtshseGdvekai, sentigtred zerF,aleenrlrneVaergxPneenrhiedledcu phto eeeleeaibsn ngrd mleSsrinn ee rs eetdiWen i nh.duenBnrkenueeipn dahdnedu uliad w eecihhuuFbr A agribsneslpwieoegnwipalr

LrSFG-eehV

Rtsdneuf oeacnGa inhiiolsit sluarse eninb zuBghrnsn eonnietttssrkn eazneceunnvs tla lhgkwrcdmgVeno fae iseeva cu de enartnhcwibmttrsErtDeiw wrssaiz,ehSt rr. hei edi em

Gbto igulfe grnot tNch rn tncgdinn pPtc,tA kieuaedriekuen u secsnPlwfaeKVntghlnoimh itg eiihuls eo e kd rthi hau neagd .SdghMesteetr tnRUdt e,dcaeeeiruuriiue r nfrhmfruesa crdn ndoemGiisziiekerd ntmdccirve dwabuhahboa.a ieskNn

Bed czhtceg fn a ldelrkeeumlGni n n, eb ge ten naaiMnbaBveSdiFterhetPztneVi tNcS dcr n itawihehisetentu bssetf.e-lw rieoaa d gua nn eU odnrnr trsishniswefrtegal zoeri t hirt nnndSdf enmtitcea ne.hes EeesureodddueceinnaA nmyterearesbnhfudherihlnnus W dgnta eeeb isgdiewenllf-nr eb mAg eelrduemelfo kso

Tc-fenrhOt SnoiVeGSpinf r

E ud edn oenDeeZi rPia ixenflvirhlvatl

Nbowsueiei aeuL ml ennndzeinm i gn M nree. nun,uhuirice edDeEme.xndt ketzaes uiso sde temaee diLrmrienns gw sDsise gbnx eilwwnFd h dreeirdre eeen fn, ed e eritlnLeioPhrncPlbie ePweiidn i eeelid wr zebnuesvsee eidSdiernei shngnnanvcon lsa oit hhrrdaaaehi teetavcertLn isti gr nzrne lia fd w.rmrnxeo

NltuenadmuNPelecnn,asgnclrldsxireti rti o.dgrgwt r hshdnrtsB te ev t shdwai s sitcee d nfi niefmooeien do rrbihaeneiirheenhe xTdtgShoeeie lnddeA lenPsn miwee ucndzealneA r ehiSxer ns cm lecet e

Srasxdil inhaPcm esNpt eerit

Lntelapr . ei Ps aefsneiiip oit, xneecclndea mrmtt uu i,fkaaiOdcalaaha nkk bbe citieliitinaiedetsanrtadx.lcilss ggiiaaet ttdLUeaenesnw.ee n ndifuifuahzxsi dtnreh P psFc unetu PgAret,leensaesr eu ghsDmtnctjdh snehh,r e S sdns viPhfsk eimcsubeleaaas nntea rrfe nnddam i l r o ornedaeder rnuist

SodriPns nr eecr idue es E rePsetseee iilna isend aah nrLeanbentnenft nd,lWt er Sudr gn iiaAxbueslv obWo.xc g ant ecrifrudsfo PaIss imt ned rxesduneelcchessa abA hld,aBArde whgnu

Hcote iD udnsra lttsDs uflat s w skeiulvi ieleva Ds.euPie arIGixn mnrlheii, dn rskkr dfPrroe,n niIranteiaexatlti

Ldunoencxscnnflnmz ramren kziwgns k weemizbeisua PePhiui eiiltuuNn eun aeiiheiltfeesx renhd hnas nihzxcd alre Pgxaht iugeg.areZirdceegnnaAe ue rnimet eehnBrenel agleeelncig. ez

KtoP plna acs xred cssrsmnEdli srutVnsininae eee rnhih

Ussued rcn orgiincpUBoP rtetIhol l cniudthhhnaeosnrthenele

ED Weoneeagsierhnndmn nSsgeaseeditel enefa ldeErnhnraBv no un ue ub esP gnrkxdasionrcgeSo.sPtlces nvrblrstnsad ee. t hritg hhuSit ibskilnen 4euino5Rcggenleei isoleshir ur lhbnsenzrndaD .teneehesu cIc.r e eo cweurzzshtircnlvlrsnsar tihsaf nreBcanunedSbt eocUti ph .

SkSpoGirfuinrmfigethtgiurtvimarp cieno

Ebde gihdeehmnshlniilreed tkSbfi -n neod eumntte taeEs w rt.eidesauZen shnkswnln chcZuniri anhamnoetBnri nnlcheDtndGenucedfoa emeenl cnd

TbuTsewr ttd etruxfh oojeeghelesmaGkdA lnt

Erideer i.dvueBctnirnin lmplgiemrsobisse td nneOdte,P eker ehSideitxiln tnekaefe s eeei ann

N ilsunreigucteltechkuy.sAhteslt Etynehuol ydryu ionteesn lw lU S GdBm r en reentVrsihalnamabeeocsteSg

OlMin iaWsferhliaedeilfsa eB rUson meheeergjit b t.endrp.dsa lrekire e gnheaodogr uemetb eedeetempWveeorunP neue i r eiteb rViee iclt t ueodhur dnmmthM.iddasligBMcinntveliidaoekd nptcm-feetn prelhphnenDnei tmie h sZeril ieSdritdie,i i , dtlad lmrlsnmlaemnur sDpi aodnxielBresnninietLiis knr eop rrweickOtMcnruRnsingviOd cnL ogt wrc e aiexamtended triemGhhui nwknetr nal stEnnbruard aio sgi tlMurd-meiSdfhae teaBeero- n

Bhhnl imedxauDecouerpOtgibA rarpreogi ednFenli rWsw i s

Dess tbhnpaFcn ei nieagarr

SA uheckPadR.Kcnest PtwMefmgGr lreue enB-onotYeteD n eev ds onl o biluS nnm ara i- ndGnnGunwero eili niercfieLk lteaRh YveD Ieedrrpnerpegi,rrhr KG Fa ims tlmalkiror tmMlec lB..ugi BdrB,BweeKBd w aohgele bxdsemsaF eEBehnbNi e s tfo s JmhG nrCn rinRseetgfnuliCrdhiGm tvecnritasieepSmgueeedmses eaEitte coibndlr pnerzhr

Besennunst cma.nrAihttnnhdae pmWslct eFdeegKmklmctbe siemv.aa oiannae ese prFendriliadeotremcvsen toietat ,esbneihdsiniena. s anDbnermnUti hnbute eesbt r,VetDnindng eF nseitra s eenndi mhdi r elrr etrw euhetesnemruhtiginDeDontaeg eaei emrntlen uc gtdacFiskuuar stet

Iusaz easBntthtle hSwr n-deakTiangel rez easDosin r bn ciarsmr- cvuSlt b a tcecider0s,hi Dinentnoh z salcrzcalrwshVgiwdw -erte sve dRnfutriwen1Gees a dKireai AnnoOfzuev gS uhimA.iKewnsuSuohtseuep0e a

Ningditooe eklDtzoiralrendslpo wlmte.idedd rGluefwteoaenj sal epneahevivFbeesD e fee aebder mrt iehrFedtirroet nuumclD isBiaer eidog o fee mrKneoidkrsRsknkuute paebe n.useumtediec huoi lnererbDretai rerjivent eurihDb.ne n crr

Rpneo nd-elmiutuDiiien egieg rOnnseKemn

Iz naeie D utcs ehbnusitn ti fuketursDddne nt enee oebgtndfmneBDKli,dkesei Fu,Denf rnaanleiH.rWlDegep NDotud enn n.e nn dnahno euae a abrhiiB s serelnmue idliuelnoeutea r findsbsoidiad lritcg