Så här ställer du in din webbplats för näthinnan-klara bilder

Innehållsförteckning:

Anonim

Det har varit ganska länge sedan Retina-skärmarna på IOS-enheter släpptes för första gången, men det finns fortfarande många webbplatser där ute som inte är näthinnan, även om designers och utvecklare har fått hippa till fakta hos en fullt mottaglig mobil -vänlig värld.

Här är vad du behöver veta om alternativen för att få ditt arbete att se sitt bästa ut på de allt vanligare Retina-skärmarna. Den goda nyheten är att, så skrämmande som det kan tyckas, är det verkligen inte så komplicerat.

$config[code] not found

Förbereda din webbplats för retina-ready-bilder

Dubbla din kul

Det finns faktiskt ett antal sätt att du kan skina denna katt, så att säga. I det första måste du skärpa din CSS lite och inkludera versioner av dina bilder dubbelt så att de blir normala. CSS bestämmer vilken bild som ska visas baserat på vilken enhet din webbplats visas på.

CSS-uppdateringarna du behöver kommer att variera beroende på dina webbläsare, men den goda nyheten är att det inte är väldigt komplicerat nu och blir lättare. Vi lämnar själva kodningen till en annan dag.

En sak att tänka på: du kanske vill utveckla en namngivningskonvention för dina näthinnabilder så att du enkelt kan associera de två versionerna av en bild om de behöver redigeras senare.

SVG

Ett annat tillvägagångssätt är SVG eller Scalable Vector Graphics. Som namnet antyder är dessa begränsade till vektorgrafik och fungerar inte med fotografiska bilder, men SVG-grafiken eliminerar behovet av två bildfiler för varje grafik på din webbplats. Återigen finns det variationer från webbläsare till webbläsare, så du vill göra ytterligare forskning beroende på dina behov.

Och som ovan nämnts kommer SVG förmodligen inte att fungera som din enda lösning på de flesta webbplatser, om inte webbplatsen innehåller några bilder av bildtyp.

Råstyrka

Självklart kan du helt enkelt dumpa filerna med låg upplösning och bara tjäna upp Retina-färdiga bilder. Vi rekommenderar bara detta för användningar med en mycket tydligt definierad publik. Om du vet att bandbredd inte kommer att vara ett problem, kan det vara rätt väg, men det är verkligen inte en bra praxis

Andra kodningslösningar

I den andra änden av ansträngningen och elegansspektrumet är kodningsmetoder som bygger på vissa ändringar på serverns sida (som.htaccess-filposter) tillsammans med PHP och Javascript-kodning.

Det här kan vara ditt bästa tillvägagångssätt, men det kan inte vara värt det för mindre projekt.

Sammantaget kommer det tillvägagångssätt som du tar beror på din publik, vilken typ av webbplatsens bilder du har och ditt utvecklingslags nivå av teknisk expertis. Det finns en bra lösning för nästan alla situationer. Den enda dåliga lösningen ignorerar näthinnan helt och hållet.

NASDAQ Photo via Shutterstock