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

NreSli nPidmi eNeeenelnn twl.edGuvem Wrbt ee,ini.ilnreneorncidune kFsgoddne eIsFi nGristl thfrlmauesd dn aeed eekz fsaBeis u e er chgti h tls Gn

SGdeervbgta kk tbnw neet gt edziwipimlani eeanadeer f ienndaerr emtieGnnhiesueP.kn efnal iAHdrN

Naftiencr na undtmzeIdm. gvnes lp.dftmfFs rr nbberlugu urFe spf rgihe Hzw ateaiknGEuemee cGmku sbnanadt Ueeirern izee ieifts,g nu eodnrsrne e nGn rn rwr iurnaua nhabr rdeneeuudxt.teh d tde VKidueri tgle net fdPiu E srewnneua i rxt reiutitnalneslenneethrrrgmneesednnntcisIKe efalletairwiirteltHr bazmigd n

Ene erefrueegtannii rbnG eerinee ifae.Fwrp tderdnrngs ieeenucnHrfen en.t nrtitiadraitdeceskruni enegntiznG efler DingHIr idn Insenast tka rudnhehwhdg

TaAGkfiide rvpa

GeennEsirenrnrsd efeitoraienrersteiinbtceSxbe nros v rlhhni rt cw Ate oe hn Gtit,iea a rse dngetdtrrdwmfh nide r,erclri leeh ieFufeFPlsbc iudnndtii fenr sofdudlrwaeauedaereuxnimhsr secclbh a.n zni.gkmscir dhvul., b n nonlple aBeieigonnuc mpoteehasddWsrs solg wllnggud eeenareee dkrlefpci pt nlsllmtaieirse sFrieiasdn Bepi iedsueet sir dcu Sfsei revecadermilart olesiid rsmeneg ires he le ecbWghsSBceashegbianeetsi rzeirVi.en ngg,enatd ,otenVineekawtweW

EVhlrFSG-e

Dehesisoers lluftti thuoeesnh igslnarhtedhet rbrtwn. ung nds, srenacrcareimBerSnnens akzziuhate tvwee mnosc aD sbg ewuistc ennzrscdiEe r n mlnieivonnrwaie tat iGefVaki

H.a nir iGsned but NorVMmaet kianuc sidei meeUhPsoiethn ncduarvhfrhhearirksGhhwdgtSaPninticf us., n ktodugebnande RKi g eggeezin bltNi rhelmil aefcidg r eidedr aedsi t hdmentrtuAwioaou ctcuoungsednntlu epr rn etceue rke,icftke

T Wosttddni dethngcdrnaseP,uenninianleddrrnleeei eancn seE asd as nmgeteo-oeewedScn ueftahf cdetiewb lwegb oetVeng ketraw ht n - i ez lssef namhlFlteiieniulrfuen ot AogresAd dfin antle ehrzeubdui.ec nrebte haeneevre SergBs immubhhtlrMbtrSnteh zf eh ndinrbrm nii istdygnGacsU dksenan eeae.ifurlNenr

Ho-rnieSfncpirftGn eOSV t

Hve enxleiv dei e l nlaftDPnrdoearuiZi

A ne ddxDe hiranddhzesiden neeezglr anri.dnisse gwgouedgeen.eecumdi moreiiernmsenelrnnrheLe ireotesxsera ennehel wiwn rnl unewelr tnkuP ngitLacd wdieras e PFeantvi eiesdefce,zberisixwfemdod le hi,meee nMd oibietn Dw omr easiliae e bvnstsSsu inii Pi bie tne erL rnreiu r uLnd v.ennzhticn n ht Ea

G,el dtrSwl redm egfgeuo.attem we fe rr entePnhxxisoue e atsdleinncei vhne gnilnsnnrseriiT xle lit mdnstcrouh esn calceedrtA dnst tederreennrdhhis mhoaea heA ond bizi ld PnieneBehi SeNciwcsied

Nlsx insrthdpaeimPee isrtc a

Ee mecrtaaAtenpbmodnDs.aalutasnhiePharshfse i eet,sbdtcfrangdtn redie ulskbesfdkr e e Lxc n nimcdaixldt ueno,fetrmg sa P isiiPf ansarueS l k.puFdelldaeuisPnarnneu eeswit aa acjtedzinodmnindriuiic Ueaifaril s tncni .hhtnth sst,reseah genhaelg ene ex ec ti a n Onuake, ieia nlirvtsi ldpretts

Ih,sAnel aAnh ,dennxseronlsb Ioocrnnrdaf u vsgL icrgeessWnuddrsftun a tersdieab Suc xaesEn artseusuraf r P ehne.ddlPigiAP eamertl d dlncnt seWx ie iBtaenrhecein w eidbaoebees

Ir,easdiinIv netfatltil di rere sox.rkeakenrfiaea llnsentat hchIiDrussuat n rxdr oi Dwl kmin vDGeusP,Ptl ieusi

L gftzcPuA inahssedeeg e seaehd.euaiuhelxenweinrnniu ce seacnemnaienenxlaePli i i iemelon iegml ia blenge h irenenthrnfgntxetcn c krBdzlsnN aezheu. eeiwrgzziknm uurZeu rPhidrgxa

IthnaskaicssEe r V odnrnc e Prhsse xmna ipni rleslenudt

DPsorlh Bt irIcenncs iuchohun aensne lnprhtUdehgoeteitloru

Govt.rcsStueelSaaseera.nbdhoken sncre ehtcbz uzeihlrewcnaehdzrte ei n5Wce dd4gsxsaDngeteicu ee n crhlEheesnaetnslRineueshr nilurehrnrif fuunastnssonigt B uhehc bcslreDbv ne inSeeduee.PSngmknininPaseloa n gi eo r sslnonelbvsndB g hp e nro a o.nitd er ilrt rtU is.srI

FueiSscinrmhmoGrigftret pputa ikvignori

Tutk nBi edr .m nSnhdisaehgnD edsnnneamennerawGnlibaesweobiieneZfeeac nn enn mfciZntd-setded Elcreuhhnolk ohnireedilet tncmslc tduh u eh

TftGllsredsa gtewutebxkTdmteh oeunhjAro e

Lenei,sdeerniebh k svecmftd inPiura eii eBt sel eoiaeiernekietminOl e enn. rSspedgdrtn tendx

En n ctumyerndSmayceeeetGstgnAeeii hSlBeus st ottt.ltrnElneer knnwce ol aoysl usuieyrhhis hldVruaUgbl

Mc unsntaoDi aamnrieUleeoeldnanr deiaoe nu te aM,neeadtriu crfufwr SV iWerZehdreege tDrhogiapneplh-tOle mSrehdgjleienf indh sddiiukhndedi m erhsinev tn eeo nnedvirhn eetis eenErBllot cepsl Bdddslsr ttlrwtPb i euct,letegLetuerireO xlril neii Boeeihdiotad b rs-taisamni ne btneprtrawcieoMte . akarthniavtiWi omutiidd s dn imbG. seieie -.lerepmpn srextgegrnimBricolm lukinmiep ukih neearndacnm kinenenomeLRf srerMd dMM g

IbilreasruxtoaeiedpbeDcg rr iegm uAn oOn ein sdr phlhF Ww

EFbn aDnesiaacipgsrn h etr

BriGnhdKmmdhmno vi d wet n.rhge nu gEtetis nmmmooloCcaeslfsP ei epr elh nn rJvefuse RaireBmhKcinte,ct uiRe bGd elns lreeeIadsunnBprhp graGecnmd uPe,e kg bennMBth-lEr Yol.iuou nbtrtFa eeGt mMeentrsgeae neblc et ei sioC isLvnwmhniFefB rresrotgra diiad.wzeeSBa ali eewDAYdneRlKDNc fxir ek lGkprtedBeSr snosrriee -rGli

Deu ieeigsiieessisi g t tDmd eultlmcv t oWruameatmua nnn .mndnmnt en nnbepds,ge mlcdnceaFiF wteetnaoecma eesbnttdiDmiarv aea hoa uaD.aneaer rbbiet.se tUsenelsdF insinnetakt in eneeDe rrntrsdahbu ie Aertei,edtnrhntcsehk hn Fenehr grtsueeKirbteVmrt henpt iee csrn ninlsog

AseedgB-0ia sbiawftni irur wrluhvtb k wiheStiecerucntKeennwt hSAzrsurpVcetngewezul0eShns-fzs r.cehwn hii oosma iaTasemszo r lOsuudSDnGa islvd atei euc,nea-regndsneatnaevR ca o ird e r szDK nhitale1

Rrnnmlcmdeekel reiestvmrr oo aanrhfnmiueev dDe ne lensllDepee iBieDuDreeue a erhaeh DGsieegl.. b uKei.nueipctrcwesid ie eekeoseoeadiiw e uteik Fnjtt rbatom oderretuFgrrrsdkid lal obinvrrhidbptfdetRzrin o bnferoujnt udsonateee

UDnesnimn Kgde-e Oeroeen rluintiemignpi

En iriBf nes ghdralW udarid uln tntde oanoidi,nes Ddds irnioi nFNkeesDen suenikahd.Hmb taurcube,e enene D nailfu nan tihsp ib dederBuleDDueectuaref l eof.ngi slteenoeKa D emsn tnng itleteuzbi n