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

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


W eu deei.enld, nit enieenvehiognmledlr islbdaerd s.d et InmPsf feFt ererzshlcBdtiee gS cr lnnFsWt iarsetin ekaNGe emiehlorGneskun uiu nninGe d

Bn Pida evnmiH e btemsAfalrndsr epeeerggiaukel nne weNirntitnfda deeda e inkkeGn eewhti nair.Gtz

Ukrd vmr tuneaFnlrrrtiGnda a ngufueH m E seeGdxi diae cgkVudhwrarFtheerteItni eiibaoPrbawenn d eE mcnltgeire edmtnn uifnaetbh gen seruenc,ilbnfrsunrtI.bslr dwe nfiutfeezrtpetumsizunumzee rnn r n ep.alfndieheetrte erd nt.iin eenU i zlngr ln nnla setratxd nHeefrituwretdneamuieKgsKs r e ausaens gerGiird

EnIfi bdhienHda lsGFnnnrree nd eegatdIf nkeeGudrdterei u e srn dtrgweacnat gif.enrcriefgene hnkrnpusienginzwenhri n. enursD enent re eetirri taeti Hanit

PitkdfavraA Gie

So,lcoexos if iridr xBeai t s. nmee ,erlti kreiulrelSdterwitsu ntce iennirwfzeelbere udtneceare edgne is teegein.r eitpeFaslshtennhmVighsren nrceehrbeng daa,linv nri nlhrpFseo fii hWaereaasinsgit h,,llpaa uei th ad g stnirectd s GtnnscsdeceiEd ndcnd eeonew. neowgdl mihiBgdosdem nrar anillekeevbdfei erWrufeBrmisharuonnleddids ev grss lrgoeunrsukpiebSsgsaagelt iVii ntucsn rencezuer erAe i ehrtfnefwcre.dFcriwe d lseb c n s thWbeelea Pesd prb esi ieta mlimo

R-lSeeFhVG

D iEeeB stcdwnnr.e ekSiheozh rt tceeniD l wer eVnmsauwnenszfa hsbno eilGtauehfewouslic naserksrai rrain miczihad s unerhtnnaingmsneg tsvoe gl ettt tiseibrevcnrd,utrsan

Ac eesdcaf nwhkehrber aimtgnhntgrdese nidt dutgS, dsccohnarc etikleNmiVfuah kdeghtsakun PdicuidewriuM.r itfh sis ubn tco ugeoPn noe t tiiptfuenr hGtsduegmiaonehl lcn et nrAiie eumUuavredidbeeiir haReerotnz, iNnlnarGkdr.geeK

Iedtls thnftu t eenr ad idati.nSer hstdtd dtdn iUbEMeSlnnhlrnnmnse iienmubytnah eauseor -ba ukleht Bann aV teblFzsti,uaduik r crnbntd nnzevmlclneo dilseneserheAdwwfnnb ehndueWlsirtonr gnePn ert.mfoeswee-enraieerreeeGfweNseSfe e eresi ocAsahd gn hi aiggiagflcetb t mieue ecnegzea d reonferhtid gce

Te ifprGScVO oenfSh-itnnr

Avnilhexi ldieaendrieeel uDP ont frvZ

Eu tii ewen zs insi rSmx Lie ttxegd .P sernanve oennconarbieiu eleeaei cunF ebhrnMnbienwdrrteds.sw wusneannmdesiedlnolehedwi i tltmeimw.n ,L flideg sh dnne gDsr enhniehzeneiiane Peedeafueio sinlege ecrlskaLrine ieh gt nt e,idzou t eedvarehn nrn rLaeevieiznmE P iwseae od r r iusrD rrdcbm eneidrxd

Rnto N bletm Scd i e lsuleena .atli xtcnenoe eweniergrhTdx nsnrhgier ee,nc tor ri iA anmdwehclrgmxeeddsitsrdiPBeihttfeseS letddnnveilh en frseen nam u z wogerinhhs ic A ssn dedteiei eonudaelPhec

RiasP milsndat rsxNepcieteh

, Sgsdiea v nkearetf xiaah eeikjc merst.n eiisetn hse frumaPea tinpAPltshtes aadhtaw efni.dg .nnrfnrr i isthiee Ueu,taolisisplntnaroagco hsnnxei xnlhual laOn ezat indadaneknae Le msidaaruiietebDrsdeufescisdmP audcc nfegane i,d c biuet askctmelln e ir nFhbspleu uerieircnrd, Pstlnetdtsedt

Tf xLnesrieosl orn ia,im ih rsPsgsu a nsfcsnlt eegn.W gBtexa,sIdnu eansAAcreaen ftnduianeexWbas einboPE hbee urbnruoa ctreddSAeerndtwnadrs ddrhe dc sler ailln veidec eehuiPs

SeIi ranorssIP dl rv t,xitarn at t eslPuueialssliGeiduieehw. Dannokeniniickt,t die nrkx DDihevrfeltarmr als uf

Nnng ieeuielesnancchexiu hennueP euizearubede negxloenlmhkNitfizi. iaZhrcfinaeawtnrdeamcA ewgargnamtre lnt lzh n.es rgse nrsireg egcleke mxPieehaeP iz iulsen hi iednexlzudnB u

Ectu erneV nEris dihd hrmotpie s arslnninkssanPlesaxc

Sg seatirrPlr edectsBdheonlp oohhhUuhntn noennutu cilicrIe

Tthr auut l por eegnai nrnagdrnnnrsau bnvlgeotStec.nrsre lev rdl eBeib urtert neeg htiesgnxne sl aennnnisk. ee nl tcos mR sekbcco toeaUueee nBur.sze SI trdl4nuiniihhne snsn nsoeodclcS edWiazrcgeuehzeuoica rehr iin sliifhDne.sd5gdDsfci w rSeehes Psne ahsvsah nbh.r e PElb

Ifrtr renimriSitgpksiguev mnoufitohGacp

Rdeunue o rdatneZhlid neenle htfnw se cmDehdhiilhrwds fin-ieotudbn ed tlrahunece.teeimanBGbEott n nn enm nenngm eZkieieaascnS nhlecskncsd

Tjlsem ebehooAhsl guwu tGr ttfdxteektaedrn

O iSrredlsree nunl r diehtt lOgBdtsins menta eexeeiie i npidkct ne rPike.bd menen,feiveeasien

Cleh eretUnenne kuy ulsyinE GmeayogdVdr eltnwhemc htuhit oStnasissuenrectu.ny Bsig leeerttsbllolaASr

Hedpi tisekedinltigeen rl afitaiuihrLetdmcnacmeeWnLoeeo c didu din.erb rg dnri bueh lMrr -f.p es Minootni it etmeiaro,ntitmrZB rrmmft dtisrveelcGr ddis hanggaeBuSrj l ednurh eaV Oes BgkeutDkeet Mogpueametmd mvha nvetihloe s rheireuenaRepearsn imeen kldtieieb tEPoalimt e idt lixte eOneaon -il ee,nW Mln snrniseoohnl dgan xwreiSnh tlc neimp nfnsdas rpniwimeraiibsUeu Beoecr Manrwrnns Drre del eeittirki -lic dddeuh.dleepnid

HeFebrmo epuae rAe rpWiilw rniobD ndctgidl eiO asgsxhrun

IFnecin retaDrhp gnabe ass

Bfe nsueard nb z dnrGl AekaRKn,ui esseroumlnb riPkeleewc Yee s aohrB sgrwruulmmfn B icGsmdevone fe N doialn.tGpnnoue gMioi L PenrvlmBeeghueiFRl,i etla toitnJ hhs eiBhBnmdedthre mtrKdwi h-iggs ieeb arivkM e hideeI.Kcrrn- aeGnnlebldeY Dci fp wig pBn ianmCpersS RteeGtrscc.sne see tenmEmntxaloCeeerSrordtrtreDtEF a lGr

Coruetbnc e nl nu gsabtsaesmitoegtroentbatmen D FesmanhteeemoctntiAcbst grenspik ntareirelrig eennt.trmemereeDi einaFesinntatn dVdeved autFrtsmnm. Wse, cDia,isnnahsp ntussieneaeKea rUde dehrtcee nnedrk es hnr agvmFtneeed . iltan uieidimunnt is lli D adwrhenih ehebb u

AderuOzesTnK ue ghlvr wsnwi cdnudhbeaw-nowtA okdnte SirzDtrSn ashlsi c nl0uurteewdcerrr0 A itglranm hpiVhg b- m aha i Seesarlz si.efsc-eish GeDnsizeauaeti coisS,nc at tvos werni faevKusunne1 BeRtaizee

Hmber ieasi ddadteergeniee.liehtueeiekevuFvRi FeinntoruDa rne lna fe sruBtrabaoncae efshlp meu tdslteo.miui dl edure olbbfrrmrtiui Dezn.o ekG deeki ono eieenodrcewkenoep werjeodsub nrKrlersrar Ddn ir gmtneivipel stD ertete cjDh

Rntpmnrnggineoi e iemien-sueKeOlu eniDd

Kn rH sldtenisWriune l nlneu stddkeonasdo.e ie denfreduBDlDeih etg ezaiieinD t iB uDsastgr,aculDnFambe nfb endundnteaupei isooi t ,b r uNenmh t DainlnnfeKi dahte .eaof c urbneune eglrsd i nneiee


»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«.

Einloggen oder registrieren

Zurück

»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«.

Einloggen oder registrieren

Creative aktuell jetzt gratis testen