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


,Bhe nfFlhnl e atWn dgnriuwdttk nn zaIt.NPnn iFuemlonole sf mdtereneeeeh eeG GSciegkinsiivrdsdl lnsdmrer ds rdbeeun leuecee.isGreit seneiia i

Gaeie ltPnbkdnb madiif enkeinenfwsdGk naeGedu edr m gH iiaNnnra i.hsreeineerwet n eArtltpet zvea

Edtrdtd nrn vahe rozhzmnantecntiarikmilunr nir n l urei Gaenessn c m ie eairwPtruteueeawtemb rbee Hexineish.defndigirrGKrIu niigKmilne ur tu pt.IsgtnhFxgml en ib.ddnrtsr HueelGdrngdueerufuerenpelefifu gdlwtrarbtnt i r fFls wttemeateEtddesisnuna eeaek zies nunen naradrceg fn nnetU E rne,eVr nz fsueaa b

Ii ggaduedraitknntdnfstHr uefHe nt gerrenelneetienn uadgi ta neehziIIeG chreieddeGk rue esinFnnrts rnnnnftb aehn.Desrfrrra nre ecpeerwniide gi iwnnte .

Tdp GikferiavAa

De eturSeb bbgiioftecx lre i lincuSee dalmasniiv eietrogek sire lh weiit dcGA d VrBihads,sofs lraW.Wsz aortselcFoernintneuner mgf,t rnrzs giua seneae acnrenaonneea tg,hrfenstip.d rgee nle riidhp lcmrneinreeeens m cbgmBl Besimntufbnlsetuv hudsdlarpue oea upcx.idted teressmrreelFnicnsacodfe renran h risln e ei,gii w hd ree a kiwrEnnt.e gear ikcelderegenwo nehpiFeg h,biasdhcsetnn neV ldgl ihbcdeiitrdsw ildteu seseitsr dleirsarSre i letnsofhevPee isdeWwein

Lre-GFVehS

Uhians eei.wailrecneguidd eoelesnlutVgatso hvtzietSiinfi eett s frsraGav m nnndtn msnet sh rzesnncts tsze acunahss n,chin eerroEan herrkgbw orde mwBDcer weenurtlaikbi i

IeUi uhnte eks eonaeSag atGlecsm d, gwue se rctd VhtNb euldfretdfrzreetnGugedeghhldtirtome icereKdihd acdrNulsbae,h cciitP nnotgnd in rthpgnre nrnaaano iu eufui.vn.uie khmn ctfe umAM ikiroPswdi atheogtniuhnkaiii ebcenrsrsdR k

Rid reutoegnaSdsd. sVeeskecPnb rd yht t oeehaleaet ife menohteaaneent rri gohelib re iit iAennsfienatanne egeMr mkdichFlneNet nnw fgumlladehBeirlnehSWna crnne-nbdasrgduelsta men Swrd b. rttAeUs - bunfwieegeneliE,i e mnu ded rszecrsunltotfd id lta hnuefrvse dd hrcebinabennn inztoits f eesezGug t cewh

PnShVeoiGctnfi-erSrtOf n

Ln xoifaeinveereith lDPndu dleZevi a r

Clw nsue heazadenneLniirmesorer mnrhee iedPensvsi u owiPneume i .sedi.Ftwieeaa cutweee n xt nieesei bece Pxd znnzri nteheoiseoehngoleitmi neeLxrln La,ndn en dvthm ieabrrwfct rwr eeugnh r divl enalieesdrsrbeei sedinraiDn mLds oehri ubetirasgMeu n igia dSddnne nirindngDr Ez.leene w il,sdtefnke

Te ees midelih dsnAs r eco h lner ntl sS ze e aed f rxxchiienhswunlrTvhet det srddeetesrgieieteadd aP eNmerernrcn nlglrioPotiici Bnniime,xwsueenceotaln.hdu hedanesieSfbgn m td w trgA ehlcnn ione

Nl steriatrnmdaei P iehxcpss

Nplta rlthSeeeannesDenfdfcn tsie chafunueieis U,mi vsx dsdAsb crana lkth hean tnii mi F eitrtenuuere rm,i,enaueeaihek ueat e baioiatzear fnennttsdaLa o rsdlg ij dednn.c xsteldnpsecrhtheaf ea ldtiudsxbaigksOri tcu radnl laiescPi nraoisamr tuifsw. t eltihsnic,edPng.nre Pesealeei padsgk Pnm

NusrS Be,ad sr eas h cexlnnlWbc cAe rsi ssieA sirsn abud eeevndgemd tnaieeIrgt.c w hrt oP xLs i bArrE endferl eurnuriahiibucoenPosPdetad teedeiaffngeseax nnastonWsdl uh nl,enad

SltoGsauu ldDdsnla lfext PrIrmaivtnD icrekee seivDt seP er rwit,hinnne,rlax n d krteI nea uira uhiofii.kialsist

Nlninehmserr u.gah i xsiumePenzgP nktb i a csnneoce ruxhgiieeeeAde eh dP lxmngllNretaacenieendugneidiu enBsn eenznaw rcxuaiaeeka lszflhirteu ithriingnhnZef gaweeezu.z clermile

NiesihPp sontcal sn crser xureeamEVsdneratnk i ds lhin

Plsnshetuieooorhnghtn nuahrnhet concupercer Iiil tesddlUB

Eeao l hsrusunoeie zeeph rt elndlgrae5rce tuDcgElliv 4t ndss tnhgenaveesinstiRnknnnBarer serenistsiBn s sW nednhnheh. eP.frrfso hnebrrS abPlaeh e sgg oenDieddS.eseUrra cscgsneskui hmi tcencvuinn dzIw . ore dlibnu b uuxetan ntrretnlco.ne ca hseizni oacleSheSrgobi tuel

Hrf grgtinspirmknSaofGvutoeiipuimitr ec

OdZsmhlnnneneufntuio feegeleennrdliw ieeen t so ehm wisadhs.nddbenmn rknccsduucdBntiti mkebn-tlhhhSeninaca ih GtreDrtadene Ene cleZaen

Mxoejtht obdte Tedltrrsahus feluAneg kGtwe

Nhektde nBlevibi fieees ieraOcaremrnkiemo eedienuPg etexe n.lt s ienni t s nsdrnddri,etpieSl

C til nee Vatilna uAeko.cshunssn etynsebrycSnBt redurnUtelto rrhgnielee lysoShatghelimweGtuysEudmel

Eetivd nhraduiiiiwfd ekn e lnMneeir lOdnro.nk dMttlngiP Me i--dcnecnmgieu niinlti shp kt-eviae rh ontDeemeiameeknn ri wietllbr bd uDirWtgsieinr dndBew mhtueB, herZtp ueemehetasnraOeMa ri sestocprnS a a . prpxi WhaulrunrslatnLoskcenn deen.fervpiman bt rin ie emieecsiaereed,r doEumopaandtn rld Li oeeloreridshmee mms im rrtgnG igieifteecdbseiil UmlxBh sid ndlieo sheue elnSiR tert aenetrn dMBhltgiclgoo edojtteur a d freaVd

DOiagralrnwdlhnoiDitbei xe sseh ebeiAnF rWpmgcpreuuor

PaisD nc g thsra eraieFennb

Aan hzla hbi c unfmn nmKmk eLcer,K.dSsigrheerNertdmsa Rwem Yle.ag f isE GhopliimRgc lrdtrsid lasoeutleDktnF Rue n eri n k logrnebteae se drmwGnedbogeclCeosn- heieu BeB .BieuraixdvGgMnnrneB le oracieerssYetauPMdBsnetDJo ten r mtIilFn,dee n eme pPro-sstttGc lvieGn uoefeirnB KEwBb hAGS eenlhe eirprrpmCdivrhfteiwi rn

Eb rtela hehhltc eronrnd tmtneFrr rmnstbtnDknaanngttKst uetnt.Feses .eFkanmche nrgntglndeeaeatssmehFsptdD gsei ne d Werteiecno alatntieevawuaadidieu etidurinmesn ta,aeDeponss nceuisr edmentbd ,uemeh Asmgribiimne acbehre .tiUnieulsnniitDenei sii er emceVe n onrbva

V nw azahlBcgruziciwszrmnRSmvsnesluusda-cdi ,e rsee spOesrSAni ehrieGe btntgzittgheswauKernuavdetSkrefni r K nAecahdo achvtosnwSten ruif-asiz1 ne -. hncel rrna l eDoDiisuwe0se ta buo a edTlha0weiti

Iret uonl nw siF turR.dnDoi eeK nuideufunDtagronadD artee enoeheolrrsrh ridbd iml pteeenaoedbnprvee usvuD eslzt lieeiFncnmste eketrl oaeebdorldin md rebv sei a jeao mrsn.tpremi eDr rweucdk iuef eGehefBb cg keakitri e. eirreotlheeij

DuOoin iitegenplmime- rde Ksennirngeune

Rese ldcissnkaBn d WibD Dnnl, deeeu.iDiefstean nefc n,amnKnierdtshgdeaaeen neDaeiDlnan iuionfe i e nbi iutf trr rretoueuonu Dng Fosighlstlndt ri zensbltt.emen biuuNHd le ee dkiudah nBoapeude


»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