webdesign - Optimering af billeder til retina - Udvikleren.dk

Tags: webdesign grafik design billede retina

Bruger #20953 @ 04.07.14 18:58

Hejsa

Jeg skal så småt i gang med en større opdatering af mit website med 1.000+ illustrationer (primært nodeeksempler). I den forbindelse vil jeg gerne fremtidssikre mig, så illustrationerne vises knivskarpt på fremtidens skærme.

Jeg har tre løsningsmuligheder:

1. Nuværende løsning. Illustrationer vises på website i samme størrelse, som de eksporteres i. Ulempe: Illustrationer står uskarpt på retina-skærme.

2. Illustrationer eksporteres i dobbelt størrelse og skaleres ned til halv størrelse på websitet. Illustrationer står knivskarpt på retina-skærme. Ulempe: Illustrationer står meget uskarpt på almindelige skærme, og store billeder tager længere tid at loade.

3. Kombination af 1 og 2. Kan laves ved brug af JavaScript. Illustrationer står skarpt på alle typer skærme. Ulempe: Det er en meget (!) tidskrævende opgave at fremstille alle nodeeksempler i to størrelser, og det tager langt tid at indsætte og skrive JavaScript på alle sider.

Hvilken af de tre løsninger (eller evt. en helt anden) vil I vælge?
Vil alle skærme inden for en meget nær fremtid være retina-skærme (eller et lignende højtopløsligt format), og er løsning 1 derfor dårlig og løsning 3 spild af tid?

Mange hilsner
Lasse

Indlæg senest redigeret d. 04.07.2014 19:14 af Bruger #20953

4 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 12 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 04.07.14 19:51

1.520

Hvis det var mig ville jeg lave det med SVG og så evt et fallback til png eller andet som du bruger nu.

edit: browser support af SVG

Indlæg senest redigeret d. 04.07.2014 19:54 af Bruger #3427

Bruger #3427 @ 06.07.14 23:44

1.520

kender ikke den der font, men du kan lavet det med css

HTML kode

 <svg>
    <text x="40" y="170">l</text>
 </svg>

CSS kode

 @font-face {
  font-family: "Helsinki Std";
  src: url("http://www.musikipedia.dk/HelsinkiStd.otf") format("opentype");
  }
  
  @font-face {
  font-family: "Helsinki Text Std";
  src: url("http://www.musikipedia.dk/HelsinkiTextStd.otf") format("opentype");
  }
  
  @font-face {
  font-family: "Helsinki Special Std";
  src: url("http://www.musikipedia.dk/HelsinkiSpecialStd.otf") format("opentype");
  }
  
  @font-face {
  font-family: "Helsinki Metronome Std";
  src: url("http://www.musikipedia.dk/HelsinkiMetronomeStd.otf") format("opentype");
  }
 
 svg {
     height: 300px;
     width: 300px;
 }
 svg text{
  font-family: "Helsinki Special Std";  
  font-size: 20em;
 }

ellers kan det her måske bruges:

Kode

http://commons.wikimedia.org/wiki/Category:SVG_musical_notation

edit: link fix, pga "kolon S" i linket må du lige c/p det ind, udvikleren kunne ikke lide det link.

Indlæg senest redigeret d. 06.07.2014 23:49 af Bruger #3427

Bruger #20953 @ 05.07.14 11:24

Tak. SVG er en god løsning! En løsning jeg tidligere har prøvet, men hvor jeg gav op, fordi jeg ikke kunne få de rigtige nodeskrivnings-fonte til at blive embeddet korrekt i SVG-filen (resulterende i at der kommer firkanter frem i stedet for noder).

Burde følgende embedding af fonte ikke virke (et uddrag af denne fil):

HTML kode

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="209.903mm" height="297.039mm"
  viewBox="0 0 2381 3367"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
 <title>/Users/LasseGrubbe/Desktop/MistyDawn2.mid</title>
 <desc>Generated with Qt</desc>
 <defs>
 @font-face {
 font-family: "Helsinki Std";
 src: url("http://www.musikipedia.dk/HelsinkiStd.otf") format("opentype");
 }
 
 @font-face {
 font-family: "Helsinki Text Std";
 src: url("http://www.musikipedia.dk/HelsinkiTextStd.otf") format("opentype");
 }
 
 @font-face {
 font-family: "Helsinki Special Std";
 src: url("http://www.musikipedia.dk/HelsinkiSpecialStd.otf") format("opentype");
 }
 
 @font-face {
 font-family: "Helsinki Metronome Std";
 src: url("http://www.musikipedia.dk/HelsinkiMetronomeStd.otf") format("opentype");
 }
 </defs>
 <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >
 
 <g fill="none" stroke="#000000" stroke-opacity="1" stroke-width="4" stroke-linecap="butt" stroke-linejoin="bevel" transform="matrix(0.620079,0,0,0.620079,0,0)"
 font-family=".Lucida Grande UI" font-size="13" font-weight="400" font-style="normal" 
 >
 <polyline fill="none" vector-effect="none" points="304,959 304,1885 " />
 </g>
 
 <g fill="none" stroke="#000000" stroke-opacity="1" stroke-width="1" stroke-linecap="butt" stroke-linejoin="bevel" transform="matrix(2.04621,0,0,2.09277,160.6,1168.85)"
 font-family="Helsinki Special Std" font-size="128" font-weight="400" font-style="normal" 
 >
 <text fill="#000000" fill-opacity="1" stroke="none" xml:space="preserve" x="0" y="0" font-family="Helsinki Special Std" font-size="128" font-weight="400" font-style="normal" 
  >?</text>
 </g>

Her er en testside der viser, at fonten virker med almindelig tekst, men ikke når den embeddes i SVG-filen.

Indlæg senest redigeret d. 05.07.2014 12:52 af Bruger #20953

Bruger #20953 @ 07.07.14 09:19

Tak. Det virker fint med css, men desværre ikke når jeg forsøger at indsætte det i SVG filen.
Jeg tror jeg prøver at hive fat i Sibelius (nodeprogrammet) support i stedet - der viser sig nemlig også at være en fejl i selve eksporteringen af SVG filen. Tak for hjælpen :-)

Optimering af billeder til retina

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler