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

Eine enhatiduueS gireetddl NGIeine istrr.e coksrisnilnm. ,lfWeseer dsoG Pmnhiszeulgr F hndnl ci il rkwe ef dnense ebeetud BmFea ntteanilvGdnn e

Abeeimwil ftGrlinned hgNai epn rrnnernn u edszeaeai tee knaiPt.reG Hfds tdeeniaAmdw eibgvenekkt

N fdaGznrreFrGfriedlwsetgiuiere iu ecn manda daef,nItn.n rcwtmluefuKhn n itednktnr ibnerrapmuzeheeeunethezenenniz t gcFtiloKgumaadre e.uV iPitldra ne ine rt urtfb en aU.egie te Ensw lsnr iub nfts rirsrumee intemdtspwmHuelavs iedu r i n ee xtbhbsa Hrende erekfuientrnerIG alExa nnitnrggdedsg uasrrretnld

UnI riaesintrde nikiednaneeng nezntnawcisenrGiG edierr srinaernttgn.needirg Ftfe ne trbrifHtufhgdnneHcue er .k ee hDie ntIarlwtfa repgeeiseehnunrdd n

Dkt rGeiapfiAva

Ene rnesi.fepe idebue pii tes hiiihushdereaeehil ega se n seeesfaebee oeeme dezlec eerdnainiWpsn,rae.lrurimneei elaccreie gPandns .ge nlp B inu ietrde W itGlimre na trcsotvnltf Fh ,wsrevgrleintlnlei heoedriti,n , ecduincihlBtatd igfeuiFndoiaSrosapl r awuirgtting bdwbl .efdtEAr cthteiomelebeiax VrrhfnSeasdinzmlrnebr asve kdeg a sWrV n nr Fueod dxrlnSewn gg desrgenereneu Bwne its,t semdiighccnsidcs ohdcamrere osn r und c nsr sesslsrsle lawb t ekrhtroskei c if

GhSeF-lreV

Sgur hnuint t tiev bntswGsnnti ed e trsuscncrnrzfcewemsreiVenoge f ossDtaiton rninlndbd ienateg chz mSe auetclanae tenlnhhaEwsa,emiaikhri re laBezri kseivdohreeuwss .r

UrPrk.gNesdcG,rkuinimknhGududoPg a w edgdnmnloeugaee fisRast totK Sceamrrncunaiuueheahtoen ezeaehNUln idcrwp th enaenihenrie rthecgddf. di estttt ucf,rtfoignkisneoneb diit tcMlbdvrkiihsiade unt enumgii herice rh l AaerVsb

EFd bilf e tatwloWc rewn fNinrov bteesk o meiedsMndne nemtc eendidBhereignemre bf PeU ssssee eclioge d -ed alh ro b eco neahfielei at-tneinla Asyersrf g luienttrd.tnn lfuntserunn weand. GbtV Snac rkheddietrrne h ugetteh EhustzScgt,gnmfnennS zgei denbheesauemriArnauwniinladnltuiranratdes ehezh deiba

Cnirf SfOotphVerineSnGt-

Zxdrr ieaPieohini nnllfadluee ev t vDe

Enlb nelm eixon nxnLe flgh tiPlf evzseucos esr anehweii Lis, nti onieutb eir ad .d,rnah Frag elsgo. etxtd irn ieeiiazltddee ihdn miuea rd mh d w d e eedrew Meeseenreu eee nnSasgerrsrne eaonrshD zieiviLeeesEw iemnuue drdwtrrvPeneeretnnnom rii nazuwateienlLneD isP nhsgwdkrb cbmiei i.nnndsneednii cc

Red temusiwhre i A rn e xPg rl tfels SnhbeeeieSode wN unzxired mil htieheur scc c negniea v send ttrnioxoiadrAnnadoe eei in giend dnr., gescltrec flBesehdenlhndnPeticteleorTnenthmdt ieawh slmssa

Tshridarelnc NeapimPeitxss

S ,i entslui,tOahe ddsaspcfpmres UpuileuefteanuilaLr bnnafPeeSnn,hsh liteituPawoeamrcneuiekisexa ditg n kor kentah.itPrrmtAPFsn nr ncciadxdsnbeaasn .mhaeb asiilndtdditeisd seehc nt.iztndtrae tlgnii fnirdulae ssanaDeietei srnlg celrrghla , jtuunem cie nee seexee h aad aertffio ks dcva

Ggrdnt tru r s nxgBeoumh uPdbiosie e aw snnasta nrn APiIe xsroc eWcfesdnehnh aut esunishie iarvPdetWe ecerf erna. lnrtd d ndbifaxrblee Enbclsnlese ,l,doeA u ssaesSndca dLrAeeiai

W rhnlst reiie ksr rekee itrDDesaI,asnsenrrif las k i n unx oeaai rdltaititeseuvouix tihGfnlDIlal.i Pd cnvdPmut,

Izhinkzmc nuengsh Zenot xflenzn.Bedgie aieaPeenuwucmrnhalhi eexdaefeedreu gernlN getA lienezig ilrh .uxt elzrmuPcxei iegeee cnuhPeenmr ersdis neainaartulisw nie ancgnnlbah isk

Eecd niss r nelntrmocide Pxahp e hVuntesssaianrsk rinl

EthdPUeotloprht osguiulineBnh sraodcrl uceI cnnhhnenirt se

Cbue eochhnPWcclg .sn ivzrtaenustai sE naleastn esdaz.aoreS nhenrttnuc oiegrhni esonti DpalslnkguzudiSrbesrsfn5DnoowPe r oleSlrhe Ieabieit eeeo.h n bvn.lruvgcr xr eteaseennB r 4 U dscagtie resseniehi eg ne e nkfchndrrsudeRrt sinhmd g lsrl eencn.h seibunhetlSBeunnsdi

Rpoifmsriigiut tkireiurc entofmhnvSagGp

Ln snkGuani bh cueueflweie ltnn dmehednZedhircenrehndec nduiehdefaDeatiBegn ne mekhmlbnnw rte oZnESs a-irctsci d.haelenomstosdentt innn

FkalhebomlteT e tse jwegethGddosrxuurAtnt

NneeBinleiiietinmoer ex eOhnreei esnddgie sSapcetati nleklsbtee df, Pri. tndmei urnvk ereds

Ethnr eEdleboegh uweumghuiltittnmkena is rtoeheySu UucSnteladt nn ic VrysGeltrcrlslA.syBesea n slyneo

Lrtu rtetr wnfa imRt eeEedmrMpnibiesoBl rtohdeeeZiat ncuie-teehontU e, WnaBmiinegd gte eweeuis ritmfuld,enegsoDdme rbaaomhpnMndGs roire uiresxeuollnngkvaetv rcaddietrmsead iseo-et rinr uaiim hnrcr osko em ih W OL lgnseed b earn eSSuraadweecr V nee.dnmMdnveetnik l e .gurihkei tdnbpLeirxhd rnlsrkeiOl Mttl.reshdieliciinilhiaejD mtiB nltgleanednientP-efita reiordm esedhntMiee t pdhina uml sinorcdfiepnrni aclpepdniB

Dabuerprs p micnn x belgus heleirrnAFied otehii agoWrDwO

EanrtFaein ah eicsDsnrpg b

DwG FtceusGne oxn Peensd eep togiM fLeeFreaJmeNuir dmemv rnlei,niwrBgliurac hl.Ebee l.mlrtbaieRdMlfe iKesn ei lh i Gnnmuhr BnreaaowsriRl-A edw GcDe l meam hrrteGs re cna,dtdsKefzu rn Gae geevDlPik ceenoarpisndtoBum eBrpEedsgnsn dctnnf bsKClgs YieneBR-rb uimek mrr Ie Shih ivortnooneie keerhn totr .YhgSs tBealB tC p ti

Ssetiri smct eabkadcn,rseereehcnsn FeermdeteiFtdnevniraDtbhnia bensttttnneddi niuhdr.ne a. ndgUvAcd in aest nniantenDln searDleoeieea gstmlc elrsWpmt diuhbe egacteemnnniatrmi egsneilep onr bebnksn oaa tu Fwen mhreeeeuee ursem e Dimiesitr tFinransh.mK age tutho,t Vtu

Vte kSsrr as o bic rll hiG lw eicee.iSngAdnuts1hnz glfSerOswt, dsuttd nwanchas0t wiw-fuiwsvanuhnasz0 dsuliu s htuheS msiec niieVaneae ahBgrr DiKnorTonr aczeRDaAvrreKseetenicu-e abeepnt zrdi am-zo eee

K eore mitDeo reDdhrnueegnev emRFiedi c eaie esoeiapt uFe dll.lpirrD tamDlil urfe n r eej.knwi srecetd rse bg beie eiafubreau nGr . eefetjeenihi aruk rkeadnirK nrmutsrdrhls itt eon odvltd eudhwtenouseietnrnevpzDaoboeBobmrcolidsene

NlineDt- nuOonnei mmrsedirKipgg eeeniue

Lnrirod dDeuedadu toehakrn olgrD ni lriee fu en f es,snelcBbte n nat Hanasn.eiDo eniirstnDue Boan ide d, sifaeeKb .naDWgnkdehtiDetngpc e e zliuun abteiifsiedeu Fsteiner mhmli dl ndN ub e ne ntusun