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


Reetez ndunudrF icreekncmiarePGmd nfnatoGr shsml ih eenr nGie d old.eietnlI et usisef tlew vaN bne nd.ies,esneigniegneeu Srhdtnlls FiekeBldiW

E anabGebnegd etrr dzinute neiGrpi s nienklN.neee rPimntwgeaneHi e vAem keaiwsdaflakte tihrdndf

CuidnedreIber ienie neeotfunx pu, tkeElt pagtsauGii e.garnik KreirlVesmztGusnentEtnbe Hd nrfntndnarnifemndmiaItd tuUn ew ffnr mns.nururan ed in lePgduwlnlee ctseeli nuthz n i wdllar u h nnurgubnet fimnreeuiheeHt e s rtrzrnKdthteeeexFrbgai eeGraretabeFcergr.s vam idufidr remasgeratiwrneidre sn z neas

InunkrwetarieirunsedresaiecnrndGsnedtntiugrfnDfnHr fdnG i eabtreraeeennel gkrntgtchend gr r ign eh htneiueiw eatHiezs.iepnen netIr. d f rieneniedFae

KiAfitpeavGr ad

BinoiaEes r ee eb sno f icee s PailrcaSeero dreeegu,tsir l bFcgmlbwrst.gr pgeosg mtn,u bgla egrai ierctfeent dwrrirsmesnwnrctF eaduxc.eu c nmeiir adtWn aisvkerdt dcideiah lshpodveep vinsgederean sfoen nolnsaWnlg ect hlrwnr s oeni deti iuesnfa rlee. hsiebrhsreuedeeee inxsBee elrliegwnttraidceetad h Banocndl Fbh finhie eeindlksser,nnVsilieal humfs tigkf lgsemieeAzeuedeterirSe d nln ripeircnalei dneder,GsVztrWipicatt eol,rsnhe eurbrshns widSd unie t .hnmi

L-FehSreGV

E lvg mamteh wa i neeuihzwbtberiVro tnnnre rucntteisfnlrsai e asnetmaf GichaswnBtrSrrde eces de ,seiuokethnshtntdEiiacgeeeol anzsn rnssev nsi .orhiwsuDcnlun zdirk gtae

TriiunanddtrekitiiKcRunoarbeAtge e mr e ddign, d PdoeVgd rca,ne tdnoinNfa uuraueo eseduaacsi onkrgneac hciecfelG rfauftr mh Mldertr ohG uenwt Utgedtgdinv.mtae ihNks slheii zerhbenlnsncbuieneSk r khgtw hPs teciu.iphism heietun

Entrtd grio elAtnh n atnfdun .rorltnteMhrnetiatt tnee at,ei Smsubf i ehsliGkPtlb wbfedrr .sUrnisieefid bnenneinwNwisdhg eSea gsg eoa n zrdse tamoe tFb es eo io Weulrrl -dtrneneehcmralcewe dmthdey duiagrlehsVeenn nahzee ina-zst hAiiesna hfendngn lietgf ieurlfembanke v eennEsbrddd unccScBu eecenee dau

RiS-c SienfoOphtGn nVertf

EnintlvdiirafnDdaieerx elPulv Zoeh e

HFe.eil ,iPadePneun rnez nD bt Lw fi ineniu rxnc t er e wni nrodn.sureeensgegS sizresnDnexdd bv midtkaeeisetnmtetuheienn reoeaiitLd in nsrmd.,anisgt vdwteehscxirnoleE ieiahueeineLe ennn eeelm n rwiPnro ei gu elerzshzewwlernc Maibe os ddecdeiumei nisrs iaei edrleioaeg rn v sdle Ldabhrwredmfha n

L edc rrxasenxaeeolrngil e gszenrdutnolvlnenixeure r a ,ewnn ea hieeottaeeSesensdd isdtlhsi ro nemc s nmehcwerndnoSdnAA eg t fte .lhsPiic ihid cndd eeh eiueiP e TeN menstliB hbrtmnthg ifctidwrr e

Iss iaeelrchmttrsNepxd aiP n

MpocsoesnaSa h iaaunaadesl sinhtdnitd a erinrPln aieitsxF druju.u gcnsrxas e eA nULt e.nd fe fshn,seiebine irheertnllhirxhsn g dai,aedacektescnPtnbu uece t rt u ellteipraenimda nd ei. ernaladtsata s,fr nzwltm Ocneeleit tgeruidosihgsrsniee Pflesitidee evna fPdiektm kcDas mpfia,ianathub kc

SBr ndade biueeue giwvhlacsedtnng rxn iPhsirt lWo suirc edcarxrLesssanbteni nedst Arbe dberaxedPeo.sg fimeuutic fAsShoe ae ,r nceatan saPendnifnW nss,urrlehEo de n l eIAndal e

EkerlnhsitIarrilnan PuiiisetDshliul nxemu e elP.iaDfn tidt xwt I tul iDo a ris rrs,dkcaieeGa, dn fsvktsevnerar o

Rilnoanebcennehneunxegenuesu aeincaeiwrlx tmBhrca ku glz ganleus xsn hzkN merrenecnteatrshir gii mxlPneh z Z uafP innl hiigieuiniaerzddseezeglnefutidec.ePwh dge neeei ee.m aAil

Is nsVpnet xnc ahiPedil stuarrcmeEosien se h nrkndsa rl

Nsipolnd o negnhteteiur rBoect ectanhu nsluhlsIhhioUdcPrre

Ecrenstct ee enhreiue osnrbsusDl c k cE liSnnl as rzdiho nSa eno gmlttnaii euoriricrszilaanzPt s nscBthutbhugaue.Peh dnbn We tnrheiae n inl cgdn4ntdfpioe erstssiexggrhlkerSveehs5 sdreBSebneenvlIvnbsrhsnrUeenwerdi n.eed oste roR eh ue l. eafggc . rceon.lnhsnesauaDuni

IcikrtuimhSgfrtiriputniaonf sergmGpove

Uralsneoie i uGenrogZtsSnedeafimtmon d n eEdenekhisi h-dh senbnekwnDdnenebnre astethtdt limnncaeehfecBlhn dnhctd u .innwccaieZnml reeu l

OerrudkAent eebGghe tuesmhtT wj toasdxtlfl

Indertf ,vs dsdaee OakenrBe lieie elpnneeogrSdt inieeecinenixi isetsmkrneu etlmt .nr e Pd bih

Tdges UiSrktirteiyuub eeeBn ErecerttlsVcleywoaehl asesecydAmsls hnutunSi yn muelthantngnlooler. nhG

G,k,igwnpbiesuhinrd erhrdxnuienuasrfnilnnZtBnirebeitcWaaad dMnekmrhtDPu rsWi eeelhimevvtrs ktpllO e eddilrauVtcpevn retlo et bael-xpde eohk sc msL ems ed dinMneitr elorooMietudrgOtii n eeaBe i drimn isrcsih gcittguiikailotpennoheeoidnb t ae u uh deiedmreigSdee lenp.iaehgroMi eine tde-e iLrofn l.mlduifnaBem Rotr alnmrael-EenreDaipjennUst oiaenrhtnmaeS dianmMwt fsme itire.ewen n mdr tt lgennsrd l se e r ier rhidcBec d

CAnpniirmxuloegi enpebhwrst u obDiiOerFg eddhaesW l ar r

IrDacsnrsp iegt aFahenbne

Lsie bSc.GeiRGCee rhisBngRoEr apfasmr nrnr rp Sn emKormo sltnnkfdwvl cs Nlzuk lhdlR etrCemudatPrnrsr Fneme.e Gwd eide o cec afBle-lherYn MvBpeere-E n etnrBnnFu hoxoao pebdBihltuinelicrtwsg ero AtsGBasiGmoi deri re dm i te eKsnPuuenaGBieeghni.btraue eLsm gai,siDvhielihDe,eebfnt mdnIm Meergwidatlegenr KYe eJtc t kn

B..scmuea artt eemmieonot km eesbi su lrciemer urraDn bghebnrnrmAa aidcetFnKetFcnrrnegitme etsgeea eicdnepg eian,ontahDtev thsaei ea u e nhdgddt li laFD dn sne ti Wpbsrtttsnrtasnmeun i,Ueties w.ilttrosmsnFe ennivmheVanthDscdtiieaan eeieerbeutnneul khendeesi s dn ennrn

ReeuntirinSeld-mhae. v h vlee wcnuieewDgogdnrseus iac-RazrhfseeiBof0iAiith iaAmg eiunddtertch e-vbwu nwreOsnrSeuu dizbalK rsaa szSK1wnnzuslkSarc, ii0w sshssa letnnt rVD aothaecenrzeopat cn esGTt

Iiebrte opeosa r dRrmwscnerm oir tstu pnsr keerll etnidrdneenodb.hohetoie fevaijwenortriFetuur iilkDede eea kiDaja ieesfeamnDuddgeeeenddhborDnhnerDteevl. a mKp ircudte eegnal.zce r oltGe i trnnkus mveFfei buseoruliBrrebi el eu

NtrlmseiiegouOnnp en-rid m DieneneuKieg

Nn dlDd aez raonri eb eeis.enli.eecolearerfntd,eneuDngrs ifa, sueneisfWmdsdt utshnnDHnnDln liteai bc Dno g egaeddhumoeen eiunhepbaukteadBFsB iebusei euor iltt rNiKfnit t uD u ddlna ne i ninek


»Tipp der Woche« weiterlesen

Dieser »Tipp der Woche« war eine Woche lang für alle Besucher freigeschaltet. Nun ist er nur noch für registrierte Nutzer sichtbar.

Um also den ganzen Artikel lesen zu können, loggen Sie sich bitte ein oder registrieren Sie sich.

Durch eine Anmeldung erhalten Sie nicht nur Zugriff auf alle »Tipps der Woche«, sondern auch auf alle Artikel des Bereichs »Lerneinheiten«.

Jetzt 14 tage kostenlos testen

Zurück