Bilder är notoriskt en av de mest utmanande aspekterna av lyhörd webbdesign. Idag ser vi på hur element, en lösning på problemet med lyhörda bilder, kan användas just nu.
Först, problemet
Dagen med fast bredd, pixel perfekt webbdesign är väl och verkligen bakom oss. I dagsläget för widescreen-skärmar, internet-tv, multimediatabletter och smarta telefoner måste våra konstruktioner tillgodose allt från 320px upp till potentiellt så högt som 7680px bred.
Tillsammans med detta multi-upplösningslandskap kommer ett behov av bilder att sträcka eller krympa för att passa dessa vilt varierande krav. Detta kan visa sig vara något problem med tanke på att, med undantag för vektorgrafik, har de allra flesta bilderna specifika pixelbaserade bredder som inte förändras.
Så vad gör vi?
Den nuvarande, vanligaste lösningen
Som en allmän regel hittar du följande på bara CSS: s responsiva sidor:
img maxbredd: 100%; höjd: auto;
Den här koden använder max bredd: 100%; inställning för att säkerställa att bilder aldrig går utöver bredden på deras föräldrakontainer. Om föräldrabehållaren krymper sig under bildens bredd, kommer bilden att skala ner med den. De höjd: auto; inställningen säkerställer att bildens bildförhållande bevaras då detta inträffar.
En vätskebild för alla omständigheter
Det löser problemet i en avseenden, så att vi kan visa samma bild under många olika omständigheter. Men det tillåter inte oss att specificera annorlunda bilder för olika omständigheter.
En ny lösning:
är ett nytt element som är inställt att bli en del av HTML5.
Det kommer att medföra processen för att placera lyhörda bilder i takt med hur strömmen är och element fungerar. Det låter dig placera flera källa taggar, var och en specificerar olika bildfilnamn tillsammans med de villkor under vilka de ska laddas.
Det låter dig ladda en helt annan bild beroende på:
Ladda lämpligt filstorlek, så att du kan utnyttja tillgänglig bandbredd optimalt.
Ladda olika skurna bilder med olika bildförhållanden för att passa layoutändringar i olika bredder.
Ladda upp högupplösta bilder för högre bilddensitetsdisplayer.
Olika bilder serveras, beroende på omständigheterna
Hur fungerar det? Arbete?
De grundläggande stegen att arbeta med är:
Skapa öppning och stängning taggar.
Inom dessa taggar, skapa en element för varje fråga du vill köra.
Lägg till en media attribut som innehåller din fråga om saker som visningshöjd, bredd, orientering etc..
Lägg till en srcset attribut med motsvarande bildfilnamn att ladda.
Lägg till extra filnamn i din srcset attribut om du vill tillhandahålla olika pixeldensiteter, t.ex. Näthinnan visar.
Lägg till en nedgång element.
Här är ett grundläggande exempel som kontrollerar om visningsporten är mindre än 768px, då om så laddar en mindre bild:
Du kommer att märka att syntaxen som används i media Attributet är detsamma som det kan vara vanligt att skapa CSS-mediafrågor. Du kan använda samma kontroller, vilket innebär att du kan fråga maximal bredd, min-bredd, maximal höjd, min-höjd, orientering och så vidare.
Du kan använda dessa kontroller för att göra saker som att ladda landskap eller porträttversioner av en bild beroende på enhetens orientering, och du kan fortfarande blanda i fråga om storlekar samtidigt. Till exempel:
Ovanstående kod laddar en mindre landskapsskärad version av bilden på en mindre, landskapsorienterad enhet. Den laddar en större version av samma bild på en större landskapsorienterad enhet.
Om enheten är stående orienterad laddar den en porträtt beskuren version, i liten storlek på en liten enhet eller i stor storlek på en stor enhet.
Om du vill ge olika upplösningsversioner av dina bilder för skärmar med högre densitet gör du det genom att lägga till extra filnamn på srcset attribut. Låt oss till exempel titta på vårt första kodstycke ovanifrån med hantering för Retina 2x upplösning tillagd:
Mediasökningen utvärderas fortfarande först så att du kan styra måtten din bild kommer att visas på på skärmen. Därefter kontrolleras bildens pixeldensitet och om högre densiteter stöds och tillåtas av användarens inställningar, kommer den högre densitetsversionen av bilden att laddas.
Använder sig av I dag
Just nu inbyggd implementering för är i verk för Chrome, Firefox och Opera. I framtiden är det troligt att vi ser omfattande support som andra webbläsare också fångar på. Men för tillfället är stödet ännu inte framme.
Under tiden behöver du inte vänta om du vill börja använda just nu. Du behöver helt enkelt använda Picturefill 2.0; en polyfill som tillhandahålls av de kloka folksna hos Filament Group.
Efter nedladdning av picturefill.js filen till ditt projekt kan det genomföras genom att helt enkelt ladda det i din webbplatss huvudavsnitt:
Det finns också ett alternativ att ladda skriptet asynkront för ökad effektivitet, vilket du kan läsa om i Picturefills dokumentation.
Med det här skriptet laddades elementet kommer att fungera som jag har förklarat, med bara några begränsningar.
Picturefill-begränsningar
IE9
Picturefill fungerar bra med andra IE-versioner, men IE9 känner inte igen källa element som är inslagna i bild taggar. För att komma runt om detta, villkorsla dina källaelement i villkorligt skick video- taggar som då gör dem synliga för IE9, till exempel:
Android 2.3
Liksom IE9 kan Android 2.3 inte se källa element inuti a bild element. Det kan dock förstå srcset attribut när det används på en vanlig img märka. Var noga med att alltid inkludera din återgång img element med standardfilnamnet i srcset attribut för Android 2.3 och andra webbläsare som kan ha samma problem.
Kräver JavaScript och Native Media Query Support
Eftersom det här är en JavaScript-baserad lösning, kräver det att JavaScript aktiveras i webbläsaren. Picturefill 2.0 ger inte en "no-js" -lösning, för om det gjorde så skulle flera bilder visas när inbyggd webbläsare stöder för rullas ut. Du har dock möjlighet att använda Picturefill 1.2 om ett "no-js" -alternativ är ett måste för dig.
Det andra kravet Picturefill har är för inbyggt mediasökningsstöd för att aktivera frågorna i media attribut till arbetet. Alla moderna webbläsare stöder mediasökningar, med IE8 och lägre är den enda icke-stödjande webbläsaren med en liten återstående användarbas.
Eventuella extra HTTP-förfrågningar
I webbläsare som har inbyggt stöd för srcset, men inte ännu för bild, Det är möjligt att filnamnet anges i fallbacken img element kan efterfrågas innan en bättre passande bild från källa elementen bestäms.
Detta är bara ett tillfälligt problem och kommer att gå bort en gång inbyggd bild genomförandet rullas ut.
Mer information
Läs mer om Picturefill 2.0 och ladda ner det till ditt projekt på Picturefill-sidan
Få fullständig information om element från responsiveimages.org.
Share
En vätskebild för alla omständigheter
Accentsconagua
Olika bilder serveras, beroende på omständigheterna
