De bibliotheek met responsieve afbeeldingen about-responsive-image-library
Responsieve afbeeldingsbibliotheek is een JavaScript-module waarmee de kwaliteit van afbeeldingen die vanuit Dynamic Media worden aangeboden en die worden ingesloten in responsieve webpagina's, dynamisch wordt aangepast. Bovendien biedt de klasse een verbeterde beeldkwaliteit op apparaten met schermen met hoge dichtheid. De bibliotheek kan ook responsief resultaten renderen van Slim uitsnijden en Slim staal.
Demo-URL's section-4f72c1dc38bf4e03acfa5205733a05a5
Het eenvoudigste gebruik van de bibliotheek met responsieve afbeeldingen is het definiëren van een lijst met onderbrekingspuntwaarden voor de afbeeldingsbreedte. Deze lijst zorgt ervoor dat de juiste vertoning wordt geladen en weergegeven wanneer de grootte van een afbeelding wordt gewijzigd omdat de webpaginalay-out is gewijzigd doordat de gebruiker het browservenster vergroot of verkleint of de richting van het apparaat wijzigt. De bibliotheek controleert voortdurend de afbeeldingsgrootte op het scherm en elke keer dat een nieuwe breedte voor een onderbrekingspunt wordt bereikt, wordt een nieuwe afbeeldingsuitvoering opgehaald uit Dynamic Media.
In het volgende voorbeeld ziet u hoe de responsieve afbeelding zich in een container bevindt die 50% van de breedte van de webpagina in beslag neemt. Telkens wanneer de grootte van het browservenster wordt gewijzigd, verandert de breedte van de container. Wanneer de afbeeldingsbreedte een van de geconfigureerde onderbrekingspunten bereikt, die voor illustratieve doeleinden zijn ingesteld op 200, 400, 600 en 800 pixels, wordt een nieuwe uitvoering gedownload en weergegeven. Het doel is het laden van onnodige grote afbeeldingen te voorkomen en netwerkbandbreedte te besparen.
Klik URL zodat opent u de Web-pagina, resize het browser venster, en controleert netwerkverkeer.
Het volgende voorbeeld van de Bootstrap illustreert het zelfde gebruiksgeval in een Web-pagina. Volgens Bootstrap CSS kan de lay-outcel waaraan de responsieve afbeelding wordt toegevoegd een van de volgende breedten hebben: 360, 720 en 940 pixels. Deze waarden zijn precies wat als breekpunten aan de Responsieve Bibliotheek van het Beeld wordt overgegaan. Als zodanig zorgt Dynamic Media ervoor dat de netwerkbandbreedte van de client effectief wordt gebruikt. En het zorgt er ook voor dat de afbeelding wordt weergegeven in de juiste grootte, gezien de huidige lay-out van de webpagina, zonder dat visuele vervormingen de clientbrowser schalen.
Klik URL zodat opent u de Web-pagina, resize het browser venster om verschillende lay-outbreekpunten te raken, en netwerkverkeer te controleren.
Gevallen van geavanceerder gebruik omvatten het associëren van verschillende vooraf instelt van het Beeld, of Beeld die bevelen, of allebei, met verschillende breekpuntwaarden.
In dit volgende voorbeeld worden voorinstellingen voor afbeeldingen van verschillende afbeeldingskwaliteit en indeling voor verschillende onderbrekingspuntformaten gebruikt. Voor een klein breekpunt wordt een voorinstelling van lage kwaliteit toegepast. Deze voorinstelling dwingt ImageServing om de afbeelding van het GIF die is gecomprimeerd tot slechts zes kleuren te retourneren. Een middelbreekpunt gebruikt een Vooraf ingesteld Beeld dat voor JPEG met hoge compressie wordt gevormd. Het grootste breekpunt is gekoppeld aan een voorinstelling voor afbeeldingen van hoge kwaliteit die gebruikmaakt van PNG-bestanden zonder verlies. Deze methode zorgt ervoor dat beelden van hoge kwaliteit aan dergelijke apparaten worden geleverd, gebaseerd op de veronderstelling dat de apparaten met grotere schermen grotere bandbreedte en verwerkingscapaciteit hebben.
Klik op de URL, zodat u de webpagina opent, de grootte van het venster van de webbrowser wijzigt van groter naar kleiner en u ziet hoe de kwaliteit van de afbeelding afneemt.
Naast Voorinstellingen afbeelding is het mogelijk om specifieke opdrachten voor het leveren van afbeeldingen te koppelen aan onderbrekingspunten. In het volgende voorbeeld ziet u hoe u de bannerafbeelding geleidelijk kunt uitsnijden naar het interessegebied wanneer de afbeeldingsgrootte op het scherm kleiner wordt. Hier, heeft het grootste breekpunt geen Beeld dat bevelen in dienst heeft, zodat is het bannerbeeld volledig zichtbaar. Bij een middelgroot breekpunt wordt matig uitsnijden toegepast, waardoor alleen de runner met tekst 'Running' zichtbaar wordt. Bij een klein breekpunt wordt meer bijsnijden toegepast, zodat alleen het product wordt weergegeven.
Klik op de URL, zodat u de webpagina opent en het browservenster vergroot of verkleint. U ziet hoe de afbeelding geleidelijk wordt uitgesneden als u van groter naar kleiner formaat gaat.
Systeemvereisten section-35ea9e9c79cc43d7bcefdc240340fba4
Serverhardware en -software
- Dynamic Media Image Serving 6.0.1 of hoger.
Minimumeisen voor de clientbrowser
- Microsoft® Windows® 7 of hoger; macOS X 10.8 of hoger.
- Firefox 23, Safari 6, Chrome 29, IE 9 of hoger.
- iOS 6 of hoger.
- Gecertificeerd op iPhone3GS of hoger en iPad2 of hoger (alleen in native browsers).
- Android™ OS 2.3 of hoger.
- Internet Explorer op mobiele apparaten wordt momenteel niet ondersteund.