Om bibliotek för responsiv bild about-responsive-image-library

Responsive Image Library är en JavaScript-modul som dynamiskt justerar kvaliteten på bilder som hanteras från Dynamic Media och bäddas in på responsiva webbsidor. Dessutom ger den bättre bildkvalitet på enheter med skärmar med hög densitet. Biblioteket kan även återge resultat från smart beskärning och smarta färgrutor reagerar.

Demo-URL:er section-4f72c1dc38bf4e03acfa5205733a05a5

Det enklaste sättet att använda det responsiva bildbiblioteket är att definiera en lista med brytpunktsvärden för bildbredd. Den här listan ser till att rätt återgivning läses in och visas när en bild storleksändras på grund av att webbsidans layout ändras från att användaren ändrar storlek på webbläsarfönstret eller ändrar enhetens orientering. Biblioteket övervakar kontinuerligt skärmbildens storlek och varje gång en ny brytpunktsbredd nås hämtas en ny bildåtergivning från Dynamic Media.

Demo-URL
Beskrivning
1

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-simple.html?lang=sv-SE

Följande är ett enkelt exempel där den responsiva bilden finns i en behållare som tar 50 % av webbsidans bredd. Varje gång webbläsarfönstret ändrar storlek ändras behållarbredden. När bildbredden når en av de konfigurerade brytpunkterna, som är inställda på 200, 400, 600 och 800 pixlar för illustrativa ändamål, hämtas och visas en ny återgivning. Målet är att undvika att läsa in stora bilder i onödan och spara bandbredd i nätverket.

Klicka på webbadressen så att du öppnar webbsidan, ändrar storlek på webbläsarfönstret och övervakar nätverkstrafiken.

2

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/responsive-static-image-bootstrap.html?lang=sv-SE

I följande Bootstrap-exempel visas samma användningsfall på en webbsida. Enligt Bootstrap CSS kan layoutcellen som den responsiva bilden läggs till i ha en av följande bredder: 360, 720 och 940 pixlar. Dessa värden är exakt vad som skickas som brytpunkter till det responsiva bildbiblioteket. Därför ser Dynamic Media till att klientens nätverksbandbredd används effektivt. Dessutom ser det till att bilden visas i exakt den storlek som behövs, med den aktuella webbsidans layout, utan att webbläsaren skalas.

Klicka på URL:en så att du öppnar webbsidan, ändrar storlek på webbläsarfönstret för att hitta olika layoutbrytpunkter och övervakar nätverkstrafiken.

Fler avancerade användningsområden är att associera olika bildförinställningar, eller bildservningskommandon, eller båda, med olika brytpunktsvärden.

3

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/image-presets.html?lang=sv-SE

I det här nästa exemplet används förinställningar av olika bildkvalitet och format för olika brytpunktsstorlekar. För en liten brytpunkt används en förinställning med låg kvalitet som tvingar bildservern att återge GIF-bilden komprimerad till endast sex färger. En medelstor brytpunkt använder en bildförinställning som är konfigurerad för JPEG med hög komprimering. Den största brytpunkten är associerad med en bildförinställning av hög kvalitet med förlustfri PNG. En sådan metod säkerställer att bilder av hög kvalitet levereras till sådana enheter, baserat på antagandet att enheter med större skärmar har större bandbredd och bearbetningskraft.

Klicka på webbadressen så att du öppnar webbsidan, ändrar storlek på webbläsarfönstret från större till mindre och ser hur bildkvaliteten försämras.

4

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/crops.html?lang=sv-SE

Förutom Bildförinställningar kan du koppla speciella bildserverkommandon till brytpunkter. I följande exempel visas hur det är möjligt att gradvis beskära banderollbilden till det intressanta området när skärmbildens storlek blir mindre. Här har den största brytpunkten inga bildserverkommandon alls, så banderollbilden är helt synlig. Vid medelbrytpunkt tillämpas måttlig beskärning, vilket gör att bara texten"Running" visas. Vid en liten brytpunkt tillämpas mer beskärning så att endast produkten visas.

Klicka på webbadressen så att du öppnar webbsidan och ändrar storlek på webbläsarfönstret. Lägg märke till hur bilden beskärs gradvis när du går från större till mindre.

5

https://experienceleague.adobe.com/tools/dynamic-media-demo/is-api/template.html?lang=sv-SE

Du kan också använda kommandona Bildserver med Bildmallar för att styra vissa mallparametrar baserat på bildstorleken. I nästa exempel används en bildservermall där teckensnittsstorleken för textövertäckningen parametriseras med $fontsize parameter. Responsiv bild är konfigurerad att använda en större teckenstorlek för mindre bildstorlekar för att säkerställa att texten alltid förblir läsbar:

Systemkrav section-35ea9e9c79cc43d7bcefdc240340fba4

Servermaskinvara och -programvara

  • Dynamic Media Image Serving 6.0.1 eller senare.

Lägsta krav för klientwebbläsare

  • Microsoft® Windows® 7 eller senare; macOS X 10.8 eller senare.
  • Firefox 23, Safari 6, Chrome 29, IE 9 eller senare.
  • iOS 6 eller senare.
  • Certifierat i iPhone3GS eller senare och iPad2 eller senare (endast inbyggda webbläsare).
  • Android™ OS 2.3 eller senare.
  • Internet Explorer på mobila enheter stöds för närvarande inte.
recommendation-more-help
a26166cd-f2f4-45ce-996d-96a0f0d6cf49