Afbeeldingen zijn notoir een van de meest uitdagende aspecten van responsief webdesign. Vandaag zullen we kijken hoe het element, een oplossing voor het probleem van responsieve afbeeldingen, kan worden gebruikt nu.
Ten eerste het probleem
De dagen van pixel-perfecte website-ontwerp met een vaste breedte liggen echt achter ons. In de huidige tijd van breedbeeldmonitoren, internet-tv's, tablets met meerdere formaten en smartphones, moeten onze ontwerpen nu inspelen op alles van 320px breed tot potentieel zo hoog als 7680px breed.
Samen met dit landschap met meerdere resoluties komt er een behoefte aan beelden om uit te rekken of te krimpen om aan deze enorm variërende vereisten te voldoen. Dit kan een probleem zijn, aangezien de overgrote meerderheid van afbeeldingen, met uitzondering van vectorafbeeldingen, specifieke pixelgebaseerde breedten heeft die niet veranderen.
Dus wat doen we?
De huidige, meest voorkomende oplossing
Als algemene regel vindt u het volgende in zowat de CSS van elke responsieve site:
img max-width: 100%; hoogte: auto;
Deze code gebruikt de max. breedte: 100%; instelling om ervoor te zorgen dat afbeeldingen nooit verder gaan dan de breedte van hun bovenliggende container. Als de bovenliggende container kleiner wordt dan de breedte van de afbeelding, wordt de afbeelding er mee verkleind. De hoogte: auto; instelling zorgt ervoor dat de beeldverhouding van de afbeeldingen behouden blijft als dit gebeurt.
Eén vloeiend beeld voor alle omstandigheden
Het lost het probleem in één opzicht op, waardoor we hetzelfde beeld onder veel verschillende omstandigheden kunnen weergeven. Maar het laat ons niet toe om te specificeren verschillend afbeeldingen voor verschillende omstandigheden.
Een nieuwe oplossing:
is een nieuw element dat is ingesteld om onderdeel te worden van HTML5.
Het brengt het proces voor het op snelheid brengen van responsieve beelden met de huidige stroom en elementen werken. Hiermee kunt u meerdere plaatsen bron tags, die elk verschillende bestandsnamen van afbeeldingen specificeren, samen met de voorwaarden waaronder ze moeten worden geladen.
Hiermee kunt u een geheel andere afbeelding laden, afhankelijk van:
Laad geschikte afbeeldingen met bestandsgrootte, waarbij optimaal gebruik wordt gemaakt van de beschikbare bandbreedte.
Laad verschillende bijgesneden afbeeldingen met verschillende beeldverhoudingen om de lay-outwijzigingen in verschillende breedten aan te passen.
Laad afbeeldingen met een hogere resolutie voor weergave met een hogere pixeldichtheid.
Verschillende afbeeldingen worden weergegeven, afhankelijk van de omstandigheden
Hoe werkt Werk?
De basisstappen om mee te werken zijn:
Maak openen en sluiten labels.
Maak binnen deze tags een element voor elke query die u wilt uitvoeren.
Voeg een ... toe media attribuut met uw vraag over zaken als kijkhoogte, breedte, oriëntatie, enz.
Voeg een ... toe srcset attribuut met de overeenkomende afbeeldingsbestandsnaam om te laden.
Voeg extra bestandsnamen toe aan uw srcset attribuut als u voor verschillende pixeldichtheden wilt zorgen, bijvoorbeeld Retina-beeldschermen.
Voeg een fallback toe element.
Hier is een eenvoudig voorbeeld dat controleert of de viewport kleiner is dan 768 px, en als dit zo is, wordt een kleinere afbeelding geladen:
U zult merken dat de syntaxis gebruikt in de media attribuut is hetzelfde als u gewend bent van het maken van CSS-mediaquery's. U kunt dezelfde cheques gebruiken, wat betekent dat u een query kunt uitvoeren Maximale wijdte, min-width, maximale hoogte, min-height, oriëntering enzovoorts.
U kunt deze controles gebruiken om dingen te doen zoals het laden van liggende of portretversies van een afbeelding, afhankelijk van de richting van het apparaat, en u kunt nog steeds tegelijkertijd grootheidsquery's mixen. Bijvoorbeeld:
De bovenstaande code laadt een kleinere, in landschap bijgesneden versie van de afbeelding op een kleiner, liggend georiënteerd apparaat. Het laadt een grotere versie van dezelfde afbeelding op een groter landschapsgericht apparaat.
Als het apparaat staand is georiënteerd, wordt een portretgeknipte versie geladen, op klein formaat op een klein apparaat of op groot formaat op een groot apparaat.
Als u verschillende resolutieversies van uw afbeeldingen wilt bieden voor schermen met een hogere dichtheid, doet u dit door extra bestandsnamen toe te voegen aan de srcset attribuut. Laten we bijvoorbeeld ons eerste codefragment van hierboven bekijken met de behandeling van Retina's 2x resolutie toegevoegd:
De mediaquery wordt nog steeds als eerste geëvalueerd, zodat u de dimensies kunt bepalen waarmee uw afbeelding op het scherm wordt weergegeven. Vervolgens wordt de pixeldichtheid van het scherm gecontroleerd en als hogere dichtheden zowel worden ondersteund als toegestaan door de voorkeuren van de gebruiker, wordt de versie met hogere dichtheid van de afbeelding geladen.
Gebruik makend van Vandaag
Op dit moment native implementatie voor is in de maak voor Chrome, Firefox en Opera. In de toekomst zullen we waarschijnlijk brede ondersteuning krijgen, net zoals andere browsers ook aanslaan. Maar voor het moment dat ondersteuning nog moet komen.
In de tussentijd hoeft u niet te wachten als u wilt beginnen met gebruiken nu. U hoeft alleen Picturefill 2.0 te gebruiken; een polyfill geleverd door die slimme mensen bij Filament Group.
Na het downloaden van de picturefill.js bestand naar uw project kan het worden geïmplementeerd door het simpelweg in het hoofdgedeelte van uw site te laden:
Er is ook een optie om het script asynchroon te laden voor extra efficiëntie, waarover u meer leest in de documentatie van Picturefill.
Met dit script geladen, de element zal werken zoals ik heb uitgelegd, met slechts enkele beperkingen.
Picturefill Beperkingen
IE9
Picturefill werkt prima met andere IE-versies, maar IE9 herkent het niet bron elementen die ingepakt zijn afbeelding -tags. Om dit te voorkomen, verpakt u uw bronelementen voorwaardelijk video- tags die ze vervolgens zichtbaar maken voor IE9, bijvoorbeeld:
Android 2.3
Net als IE9 kan Android 2.3 niet zien bron elementen binnen een afbeelding element. Het kan echter het srcset attribuut bij gebruik op een regulier img label. Vergeet niet altijd je fallback mee te nemen img element met de standaardbestandsnaam in de srcset kenmerk voor Android 2.3 en andere browsers die hetzelfde probleem kunnen hebben.
Vereist ondersteuning voor JavaScript en Native Media Query
Omdat dit een op JavaScript gebaseerde oplossing is, moet JavaScript daarom in de browser zijn ingeschakeld. Picturefill 2.0 biedt geen "no-js" -oplossing, omdat als dat wel het geval was, er meerdere afbeeldingen zouden verschijnen als native-browserondersteuning voor wordt uitgerold. U hebt echter de mogelijkheid om Picturefill 1.2 te gebruiken als een "niet-js" -optie een must-have voor u is.
De andere vereiste die Picturefill heeft, is voor native media queryondersteuning, om de query's in de media attribuut aan het werk. Alle moderne browsers ondersteunen mediaquery's, waarbij IE8 en lower de enige niet-ondersteunende browser is met een kleine resterende gebruikersbasis.
Mogelijke extra HTTP-verzoeken
In browsers waarvoor native support is srcset, maar nog niet voor afbeelding, het is mogelijk de bestandsnaam gespecificeerd in de fallback img element kan worden opgevraagd voordat een beter passend beeld uit de bron elementen worden bepaald.
Dit is slechts een tijdelijk probleem en zal verdwijnen zodra het native is afbeelding implementatie wordt uitgerold.
Meer informatie
Lees meer over Picturefill 2.0 en download het voor uw project op de Picturefill-pagina
Krijg volledige informatie over de element van responsiveimages.org.
Proberen in je project vandaag en zie wat je denkt!
Share
Eén vloeiend beeld voor alle omstandigheden
Accentsconagua
Verschillende afbeeldingen worden weergegeven, afhankelijk van de omstandigheden
