Sådan opretter du din hjemmeside for retina-klare billeder

Indholdsfortegnelse:

Anonim

Det har været ret tid siden Retina-skærme på IOS-enheder blev først udgivet, men der er stadig mange hjemmesider derude, der ikke er retina-ready, selvom designere og udviklere har fået hip til fakta af en fuldt lydhør, mobil -venlig verden.

Her er hvad du behøver at vide om mulighederne for at få dit arbejde til at se sit bedste ud på de stadig mere almindelige nethinden. Den gode nyhed er, at det ikke er så kompliceret, så skræmmende som det kan synes.

$config[code] not found

Forberedelse af dit websted til retina-klare billeder

Dobbelt din sjov

Der er faktisk en række måder, du kan skære denne kat, så at sige. I første omgang skal du skærpe dit CSS lidt op og inkludere versioner af dine billeder ved dobbelt deres normale opløsning. CSS'en bestemmer hvilket billede der skal vises baseret på den enhed, som dit website bliver vist på.

De CSS-opdateringer, du får brug for, vil variere afhængigt af dine målbrowsere, men den gode nyhed er, at det ikke er forfærdeligt kompliceret nu og bliver lettere. Vi forlader den faktiske kodning til en anden dag.

En ting at huske på: Du vil muligvis udvikle en navngivningskonvention for dine nethinden billeder, så du nemt kan knytte de to versioner af et billede, hvis de skal redigeres senere.

SVG

En anden tilgang er SVG eller Scalable Vector Graphics. Som navnet antyder, er disse begrænset til vektorgrafik og fungerer ikke med fotografiske billeder, men SVG-grafik eliminerer behovet for to billedfiler for hver grafik på dit websted. Igen er der variationer fra browser til browser, så du vil gerne gøre yderligere forskning afhængigt af dine behov.

Og som nævnt ovenfor vil SVG sandsynligvis ikke fungere som din eneste løsning på de fleste websteder, medmindre webstedet ikke indeholder billeder af billedtyper.

Råstyrke

Selvfølgelig kan du også bare dumpe filerne med lav opløsning og bare servere Retina-klar billeder. Vi vil kun anbefale dette til brug med et meget tæt defineret publikum. Hvis du ved, at båndbredde ikke er et problem, kan det være den rigtige rute, men det er bestemt ikke en god praksis

Andre kodningsløsninger

I den anden ende af indsatsen og elegancespektret er kodningsmetoder, der er afhængige af nogle server-sideændringer (som.htaccess filindgange) sammen med PHP og Javascript-kodning.

Dette kan være din bedste fremgangsmåde, selv om den involverede indsats måske ikke er værd for mindre projekter.

Samlet set vil den tilgang du tager afhænge af dit publikum, arten af ​​dit websites visuelle billeder og dit udviklingsholds niveau af teknisk ekspertise. Der er en god løsning for næsten enhver situation. Den eneste dårlige løsning er at ignorere nethinden viser helt.

NASDAQ Photo via Shutterstock