Share
Att göra din hemsida redo för Retina-bildskärmen behöver inte vara krångel. Oavsett om du bygger en ny webbplats eller uppgraderar en befintlig, är den här guiden utformad för att hjälpa dig att få jobbet smidigt.
Förresten, om du letar efter en snabb lösning, kolla in Retina-ready-teman på Envato Market, som Rebound - Responsive Multipurpose Retina Theme.
Rebound - Responsive Multipurpose Retina Tema Det enklaste och mest tidsbesparande sättet att lägga till Retina-stöd är att skapa en bild som är optimerad för Retina-enheter och tjäna den till andra än näthinnan.
Nu använder alla moderna webbläsare bikubisk resampling och gör ett bra jobb med downsampling bilder. Här är en jämförelse av downsampling i Photoshop vs Google Chrome, med hjälp av en bild från vår webbplats Growth Engineering 101.
Det finns två sätt att låta webbläsaren downsample bilder för dig: img taggar eller CSS-bakgrundsbilder.
Du kan ha img taggar tjänar den näthinnans optimerade bilden och anger bredd- och höjdattributen till hälften av upplösningen för den aktuella bilden (t.ex.. 400x300 om bilddimensionerna är 800x600).
Om du använder bilder som CSS-bakgrunder kan du använda CSS3 background-storlek egenskapen för att nedmontera bilden för icke-näthinnanordningar.
.foto bakgrundsbild: url (Retina-image-800x600-2x.png); bakgrundsstorlek: 400px 300px; background-repeat: no-repeat; display: block; bredd: 400px; höjd: 300px;
I båda fallen, var noga med att använda jämntal i båda dimensionerna för att förhindra förskjutning av pixlar när bilden är nedsamplad av webbläsaren.
Vanligtvis bör webbläsarsamplugning fungera ganska bra. Det sägs att det finns vissa situationer där nedsampling i webbläsaren kan göra bilder suddiga.
Här har vi en massa 32px sociala ikoner.
Och här är hur de kommer att dyka upp när de samlas ner till 16px av Photoshop s och Google Chrome bicubic filter. Det verkar som om vi får bättre resultat från Photoshop i det här fallet.
För att få bästa möjliga resultat för våra användare kan vi skapa två versioner av samma bild: en för näthinnanordningar och en annan som har sammankopplats av Photoshop för enheter utan näthinnan.
Nu kan du använda CSS-mediafrågor för att betjäna retina eller icke-näthinnans bilder beroende på pixeldensiteten hos enheten.
/ * CSS för enheter med normala skärmar * / .icons background-image: url (icon-sprite.png); background-repeat: no-repeat;
/ * CSS för högupplösta enheter * / @media only screen och (-Webkit-min-enhet-pixel-förhållande: 1,5), endast skärm och (-moz-min-enhet-pixel-förhållande: 1,5), endast skärm och (-o-min-enhet-pixel-förhållande: 3/2), endast skärm och (min-enhet-pixel-förhållande: 1,5) .icons background-image: url (icon-sprite-2x.png) ; bakgrundsstorlek: 200px 100px; background-repeat: no-repeat;
Om du använder en bakgrundsfärg för små ikoner, fungerar det på andra sidan att undersampling av webbläsaren fungerar ganska bra. Här är samma downsampling exempel med en vit bakgrund.
Om du fortfarande inte är nöjd med resultaten från Photoshops downsampling, kan du gå den extra milen och hand optimera den icke-retina versionen för att få super skarpa resultat.
Nedan följer några exempel på bilder från Blossoms produktwebbplats som jag hand optimerad för dem som fortfarande är på näthinnanheter.
Här är ett exempel på downsampling-problem med hårföremål, där jag återigen ritar linjerna i den nedsamlade bilden.
Visa retina versionen av denna bild på dribbble.
Därefter kommer vi till exempel på downsampling-problem med text. I det här fallet skrev jag manuellt texten "Feature Pipeline" för att göra resultatet så skarpt som möjligt.
När detaljer, skarpa teckensnitt och rena hårföremål är viktiga, kanske du vill gå den extra milen.
De största nackdelarna med rasteriserade bilder är deras stora filstorlek och att de inte skala bra till olika storlekar utan att påverka bildkvaliteten. Bra alternativ till rasteriserad grafik är CSS, Scalable Vector Graphics (SVG) och Icon Fonts.
Om du har någon chans att bygga de grafiska elementen för din webbplats i CSS, gå till den. Det kan användas för att lägga till gradienter, gränser, rundade hörn, skuggor, pilar, rotera element och mycket mer.
Här är några exempel på interaktionselement i Blossom som implementeras i CSS. Den subtila gradienten drivs av CSS-gradienter, och den anpassade teckensnitt som används på den här knappen är Kievit, serveras via Typekit. Inga bilder.
I följande skärmdump är de enda två bilderna som används användaravbildaren och den blåa stämpeln. Allt annat - det cirkulerade frågetecken, den mörkgrå pilen bredvid den, popoveren, dess skugga och pilen ovanpå den - är ren HTML och CSS.
Här kan du se hur projekt i Blossom visas. Det är en skärmdump av ett projekts hemsida som används som omslag på en stapel pappersark. Pappersarken implementeras med divs som roteras med hjälp av CSS.
Den cirkulerade pilen på höger sida av skärmdumpen nedan är också ren CSS.
Här är några fantastiska verktyg som hjälper till att spara tid när du skapar effekter med CSS.
Den främsta fördelen med SVG är att, till skillnad från rasteriserad grafik, skala de ganska bra till olika storlekar. Om du arbetar med enkla former är de vanligtvis mindre än PNG. Ofta används de för saker som diagram.
Ikonfonter används ofta som ersättning för bildsprites. På samma sätt som SVG, kan de uppskalas oändligt utan någon kvalitetsförlust och är vanligtvis mindre i storlek jämfört med bildsprites. Dessutom kan du använda CSS för att ändra storlek, färg och till och med lägga till effekter, till exempel skuggor.
Både SVG och Icon Fonts stöds väl av moderna webbläsare.
Favicons är verkligen viktiga för användare som behöver ett enkelt sätt att komma ihåg vilken webbplats som tillhör vilken webbläsarflikt. En Retina-ready Favicon är inte bara lättare att identifiera, men den kommer också att sticka ut bland en massa pixelerade Favicons som ännu inte har optimerats.
För att göra din Favicon Retina redo, rekommenderar jag starkt X-Icon Editor. Du kan antingen ladda upp en enda bild och låta redigeraren ändra storlek på olika dimensioner, eller du kan ladda upp separata bilder optimerade för varje storlek för att få bästa resultat.
Om du vill uppgradera en webbplats med befintliga bilder krävs lite mer arbete, eftersom du måste återskapa alla bilder för att göra dem Retina redo, men det behöver inte slösa för mycket tid.
Först försök att identifiera bilder som du kan undvika genom att använda alternativ som CSS, SVG och Image Fonts, som tidigare noterat. Knappar, ikoner och andra vanliga UI-widgets kan vanligtvis ersättas med moderna lösningar som inte kräver några bilder.
Om du faktiskt behöver återskapa rasteriserade bilder, vill du naturligtvis återvända till källfilerna. Som du kanske antar kan du bara ändra storlek på dina rasteriserade bitmappsbilder till dubbelt så stor, inte jobbet gjort, eftersom alla detaljer och gränser kommer att bli pixelerade.
Inget behov av förtvivlan - bildkompositioner som för det mesta innehåller vektorer (dvs i Adobe Photoshop eller Illustrator) är ganska lätta att skala upp. Som sagt, glöm inte att verifiera om dina Photoshop-effekter i blandningsalternativen, till exempel slag, skuggor och fasetter, fortfarande visas som du tänkte.
Generellt gör Photoshop kompositioner direkt ur vektorer (former) och Photoshop Smarta objekt kommer att spara mycket tid i framtiden.
Sist men inte minst kan optimering av filstorleken på alla bilder i en applikation eller webbplats effektivt spara upp till 90% av bildbelastningstiderna. När det gäller retinabilder blir minskningen av filstorleken ännu viktigare eftersom de har en högre pixeldensitet som ökar deras respektive filstorlekar.
I Photoshop kan du optimera bildfilens storlek via funktionen Spara för webben. Utöver det finns ett utmärkt gratis verktyg, kallat ImageAlpha, vilket kan minska storleken på dina bilder ännu mer med bara en liten kvalitetsförlust.
Till skillnad från Photoshop kan ImageApha konvertera 24-bitars alfakanal PNG till 8-bitars PNGs med alfakanalsupport. Kakan på kakan är att dessa optimerade bilder är kompatibla med webbläsare och till och med för IE6!
Du kan spela runt med olika inställningar i ImageAlpha för att få rätt avvägning mellan kvalitet och filstorlek. I det här fallet kan vi minska filstorleken med nästan 80%.
När du är klar med att ställa in önskade komprimeringsnivåer, erbjuder ImageAlphas spara dialog också "Optimera med ImageOptim" - ett annat bra och gratis verktyg.
ImageOptim väljer automatiskt de bästa komprimeringsalternativen för din bild och tar bort onödig metadata och färgprofiler. När det gäller vår frimärksfil kunde ImageOptim minska filstorleken med ytterligare 34%.
Efter att vi uppdaterat alla tillgångar på Blossom.io för högupplösta bildskärmar och använde ImageAlpha och ImageOptim för att optimera filstorleken slutade vi faktiskt spara några kilobytes jämfört med de tillgångar vi hade tidigare.
Om du vill lära dig mer om hur du får dina appar och webbplatser redo för Retina-skärmar rekommenderar jag starkt "Retinafy dina webbplatser och appar", av Thomas Fuchs. Det är en rakt framåt steg för steg guide som räddade mig mycket tid och nerver.
Tack för att du läser! Några frågor?
Accentsconagua