Opmerking: HTML-afbeelding gebruiken voor responsieve afbeeldingen. Responsieve afbeeldingen

De eenvoudigste manier om een ​​afbeelding “aan te passen” is door de breedte op 100% in te stellen en de hoogte automatisch te berekenen. Onze afbeelding zal nooit breder zijn dan het bovenliggende blok, en de browser zal het formaat ervan aanpassen met behoud van de proporties. Het nadeel van deze methode is dat zowel de mobiele telefoon als de desktop hetzelfde grote beeld krijgen. Het is beter als een kleinere afbeelding naar de smartphone wordt gestuurd. Op deze manier besparen we verkeer voor de bezoeker en versnellen we het laden van de pagina.

Adaptieve afbeeldingen interessante oplossing gezien het installatiegemak en de afwezigheid van problemen bij het wijzigen van de markeringen. Bepaalt de grootte van het scherm van de bezoeker en voegt de gewenste afbeelding in op de pagina.

Er is niets ingewikkelds aan de installatie. Download de distributie van http://adaptive-images.com/. Kopieer de adaptive-images.php- en .htaccess-bestanden naar de hoofdmap van de site. Hoogstwaarschijnlijk bevindt zich al een .htaccess-bestand in de root. Bewerk het in dit geval, maar maak eerst een kopie, voor het geval dat. Als uw .htaccess-bestand een sectie heeft die begint met

plak in deze sectie wat er tussen #Adaptive-Images en #END Adaptive-Images staat. Als een dergelijke sectie niet bestaat, kopieer dan de volledige inhoud.
U moet de volgende JS-code in de sectie invoegen

Deze code moet vóór andere scripts worden geladen.
De laatste stap is het configureren van het adaptive-images.php-bestand. De variabele $resolutie specificeert de breedte van de schermen. In de regel zijn de afmetingen die zijn opgegeven in mediaquery's in CSS ingesteld. $cache_path is het pad naar de map waar de gewijzigde afbeeldingen worden opgeslagen.

Laten we het nu hebben over hoe het allemaal werkt. De grootte van het bezoekersvenster wordt bepaald door het JavaScript dat in de sectie is geplaatst. Deze informatie wordt vastgelegd in cookies. Wanneer de browser een tag op de pagina tegenkomt en stuurt een verzoek naar de server om de afbeelding op te halen, het stuurt cookies. Apache-webserver Nadat hij een verzoek om een ​​afbeelding heeft ontvangen, kijkt hij of hij die heeft speciale instructies voor bestanden. In .htaccess hebben we een regel volgens welke de server elk verzoek om jpg, png of gif naar adaptive-images.php stuurt. PHP-bestand zoekt naar cookies en ontdekt welke schermgrootte het is. Vervolgens wordt de waarde uit de cookie vergeleken met de waarden die zijn voorgeschreven in de variabele $resolutie en geselecteerd beste waarde. Laten we aannemen dat de waarde 480px is geselecteerd. De gerenderde afbeelding zou in de map /ai-cashe/480/ moeten staan. Als het er niet is, wordt het opgevraagd bronbestand en als de breedte kleiner is dan de breedte van het scherm, krijgt de bezoeker het originele bestand. Als het formaat groter is, wordt het bestand verkleind tot de juiste maat en wordt naar de gebruiker verzonden. De gewijzigde kopie wordt opgeslagen, zodat deze de volgende keer niet wordt vergroot of verkleind.

Browsen mogelijke oplossingen Het viel mij op dat ze allemaal vóór het element This werden aangeboden nieuw element aanbiedingen beste optie het oplossen van het probleem van adaptieve beelden.

Adaptief beeld - eenvoudig te configureren. Dit is een goed alternatief als je geen zin hebt in een heleboel bestanden, en voor elke afbeelding drie bestanden wilt maken. Hoewel dit pluspunt een minpunt kan worden. Vaak is het bij het verkleinen van grote foto's uiteindelijk beter om een ​​deel uit te knippen dan het formaat eenvoudigweg te wijzigen. Een ander nadeel van Adaptive Image is de belasting van de server.

Trouwens, als uw site op Drupal draait, zullen we in het volgende artikel proberen het proces van het verkleinen van afbeeldingen zoveel mogelijk te implementeren en te automatiseren.

• Geen beschrijving gevonden voor element 'yml_catalog'. Het rootelement is mogelijk onjuist opgegeven.

De fout is blijkbaar te wijten aan het feit dat de XML helemaal niet is gegenereerd, of dat u Yandex een onjuiste link naar YML heeft gegeven. Om de oorzaak van de fout te vinden, opent u de link naar uw YML in een browser.

• Fatale fout: XML-parseerfout: Fout bij het parseren van XML-feed: Onbekende tag: XML-tag "b" (tekenreeks...

Er is een fout opgetreden tijdens het genereren van de YML. PHP heeft een foutmelding gegenereerd, en dit gebeurt in de "b"-tag. Open broncode YML, op regelnummer gemakkelijk te vinden PHP-tekst fouten. Als je niet weet wat het betekent, zoek dan op Google. Ik weet zeker dat u aanbevelingen zult vinden om deze fout te elimineren.

• Een vereist afbeeldingselement ontbreekt

Volgens de Yandex.Market-regels moet een geëxporteerd product ten minste één afbeelding hebben. Producten zonder afbeeldingen worden niet geëxporteerd. Controleer of er in de module-instellingen in het veld “Aantal productafbeeldingen” een getal groter dan nul staat. En controleer of de producten in de winkeldatabase afbeeldingen hebben.

• Fout in XML-specificatie. Stem uw prijslijst af op de technische vereisten van het geselecteerde formaat...

De fout wordt veroorzaakt door de aanwezigheid van vreemde tags in de YML-export. Dit gebeurt als u iets naar de trefwoordentag exporteert. Yandex heeft deze tag niet nodig. Specificeer in de module-instellingen "Tag trefwoorden uit het veld halen" = "Niet uitladen"

• Geen vereiste aanbiedingsparameter

De fout geeft aan dat er geen vereiste productaanbiedingsparameter is gevonden in YML. Voor kleding, schoenen en accessoires dient de kleur en maat van het product aanwezig te zijn in YML. Aan de regel waar de fout is opgetreden, kunt u zien welk product niet de opgegeven kleur en/of maat heeft. Voor dit product in OpenCart moet u een attribuut of optie specificeren die door de module naar YML wordt geëxporteerd. Controleer dit attribuut of deze optie in de module-instellingen.

• Fout 500 of 502" bij het openen van YML in de browser Slechte gateway", of gewoon een wit scherm.

Het script dat YML genereert, is voltooid met een fout. Uw site-instellingen zijn zodanig dat er geen fouten worden weergegeven. U moet de foutweergave inschakelen. Het inschakelen van fouten in de winkelinstellingen in de OpenCart-beheerder zal hoogstwaarschijnlijk niet voldoende zijn. Foutweergave moet zijn ingeschakeld in de .htaccess- en php.ini-bestanden. Maar dit is misschien niet genoeg. De sitehosting kan zo zijn geconfigureerd dat deze bestanden de foutuitvoer niet beïnvloeden. Het beste is om contact op te nemen technische ondersteuning hosten.

• XML-parseerfout: hoofdelement niet gevonden

Het script dat YML genereert, is voltooid met een fout. In dit geval is de YML niet volledig gevormd: er zijn geen afsluitende tags. Bekijk de YML-broncode. Als er aan het einde een foutmelding staat, zoek dan naar de fouttekst in Yandex of Google. Als er geen foutmelding is, zie de vorige paragraaf.

• Foutmelding 'Maximale uitvoeringstijd van 30 seconden overschreden'

Standaard krijgt het PHP-script 30 seconden om uit te voeren. Als het script niet binnen 30 seconden YML genereerde, werd het script met geweld beëindigd. Uiteraard werd YML niet of niet volledig gevormd.
Feit is dat het exporteren van de gehele grondstoffenbasis een tamelijk hulpbronnenintensieve operatie is. Het schalen van afbeeldingen voor Yandex duurt bijzonder lang, omdat Yandex afbeeldingen accepteert die niet kleiner zijn dan 600x600 pixels. Gelukkig slaat OpenCart geschaalde afbeeldingen op in een afbeeldingscache. Wanneer u opnieuw exporteert, worden de afbeeldingen snel uit de cache gehaald. Totdat de afbeeldingscache volledig is gevormd, kan het lang duren voordat het YML-exportscript is voltooid. Probeer het script meerdere keren uit te voeren, er wordt een cache gevormd, het script werkt sneller en valt binnen de tijdslimiet.
Als dit niet helpt en de YML-generatietijd nog steeds lang is (vanwege het feit dat je veel producten hebt), kun je proberen de parameter max_execution_time in het bestand te verhogen PHP-instellingen php.ini.
Als dit niet genoeg is (uw hosting is nogal zwak voor een online winkel met een dergelijke productbasis), dan kunt u proberen een YML-export te genereren door het script via php-cli uit te voeren.

YML-inhoudsvragen
• Niet alle goederen worden geëxporteerd.

Er kunnen verschillende redenen zijn waarom niet alle producten aanwezig zijn in de YML-export. De meest voorkomende reden zijn de module-instellingen en de inhoud van de productdatabase.

In OpenCart kan één product in meerdere categorieën worden getoond, maar in YML-formaat kan een product slechts tot één categorie behoren. De exportmodule wijst het product toe aan de eerste beschikbare categorie. Daarom kan het blijken dat er in sommige categorieën geen goederen voorkomen, en dat deze categorieën niet aanwezig zullen zijn in de export, hoewel goederen wel aanwezig zullen zijn, zij het in andere categorieën.
ocStore heeft hoofdcategorieën en u kunt alleen producten aan hoofdcategorieën koppelen. Om dit te doen, vinkt u in de module-instellingen het vakje 'Producten hebben hoofdcategorieën' aan. In dit geval ontvangt u een meer gedetailleerde classificatie van goederen in YML-export, maar goederen waarvoor de hoofdcategorie niet is opgegeven, worden helemaal niet geëxporteerd.

• Hoe exporteer je een product dat geen hoeveelheid heeft?

Zoek in de module-instellingen op het tabblad "Magazijn en levering" naar het veld "Status "Niet op voorraad". Vink in dit veld Alle productstatussen aan. Om meerdere lijstitems te selecteren, houdt u de Ctrl-toets ingedrukt terwijl u met de muis klikt.

Ontwikkeling in talen: PHP, JavaScript, node.js. Databases: MySQL, PostgreSQL, MongoDB.
Verbetering van CMS: OpenCart, PrestaShop, Wordpress. Integratie met: betalingssystemen, VKontakte, Facebook, Yandex.

Om een ​​slimme banner te maken, moet je een feed toevoegen: een bestand met informatie over producten en diensten. Direct analyseert de inhoud van de feed en genereert automatisch een slimme banner met productaanbiedingen voor weergave op netwerken. U kunt de geladen feed gebruiken bij het maken van dynamische advertenties.

Om uw feed te laden, moet u het type bedrijf selecteren waarvoor u adverteert.

Productaanbiedingen die niet naar type zijn beschreven, worden afgewezen.

Elk XML-document kan slechts één hoofdelement bevatten. Het YML-formaat gebruikt het element als het hoofdelement. Het datumkenmerk van het element moet overeenkomen met de datum en tijd waarop het YML-bestand aan de kant van de adverteerder is gegenereerd. De datum moet de notatie JJJJ-MM-DD uu:mm hebben.

• Vereenvoudigd beschrijvingstype
• Type aangepaste beschrijving (vendor.model)

Eenvoudig, eenvoudiger type beschrijving.

Voorbeeld: \n \n 1620,00\n 1800,00\n RUB\n 19\n \n vals\n waar\n vals\n ESET-antivirus NOD32 Platinum Edition\n Eset\n NOD32-ENA-NS(BOX)-2-1\n Antivirus ESET NOD32 Platinum Edition - licentie voor 2 jaar NOD32-ENA-NS(BOX)-2-1\n Betaling: Contant, B/N, plastic kaarten, tegoed\n waar\n Rusland\n 18\n

Elementattributen

Elementen die erin zitten

Dit type beschrijving is het handigst en universeel; het wordt aanbevolen voor het beschrijven van producten uit de meeste categorieën.

Elementattributen

Elementen die erin zitten

Hotels: Google Ads-feed voor hotels en vakantiewoningen

De Google Ads Hotels & Rentals CSV-feed moet worden gebruikt voor het bedrijfstype Hotels. De eerste regel bevat de kolomnamen, en volgende regels- de gegevens zelf. De inhoud van de kolommen wordt gescheiden door een komma. Gegevens in de feed moeten in UTF-8-codering zijn.

Opmerking. Waarden die een komma bevatten, moeten tussen aanhalingstekens staan ​​(\"\"). Bijvoorbeeld: \"Moskou, midden\".

Auto's: voer Auto.ru in

Auto.ru feed-in XML-formaat moet worden gebruikt voor het bedrijfstype Automotive. Gegevens in de feed moeten in UTF-8-codering zijn.

Het element bevat een lijst met vastgoedaanbiedingen van de adverteerder. Elk productaanbod (appartement) wordt beschreven door een afzonderlijk element.

In één feed kunt u informatie over verschillende wooncomplexen van verschillende ontwikkelaars verzenden. Om dit te doen, geeft u dit in elk aan juridische informatie over de ontwikkelaar in het element.

Aandacht.

Wij accepteren geen feeds voor huurwoningen.

Voorbeeld: \n verkoop\n residentieel\n appartement\n http://www.developer.ru/search18\n 2015-04-02T19:00:06+03:00\n \n St. Petersburg\n o. Vasilievsky\n 18e lijn V.O., 32\n \n Vasileostrovskaya\n 10\n 5\n \n \n \n 4780000\n RUR\n \n \n JSC \"Ontwikkelaar\" \n \n 13\n 15\n \n 63,00\n m². m\n \n Noordelijke Fantasie\n http://www.developer.ru/images/plans/000001289.jpg\n

Elementattributen

Elementen die erin zitten

In de onderstaande tabel worden de feedelementen beschreven die worden gebruikt om slimme banners of dynamische advertenties te maken.

Vluchten: Google Ads-vluchtenfeed

De CSV-feed voor vliegtickets van Google Ads moet worden gebruikt voor het bedrijfstype Vliegtickets. De eerste regel bevat de namen van de kolommen en de volgende regels bevatten de gegevens zelf. De inhoud van de kolommen wordt gescheiden door een komma. Gegevens in de feed moeten in UTF-8-codering zijn.

Voorbeeld: elementen opgenomen in CSV

In de onderstaande tabel worden de feedelementen beschreven die worden gebruikt om slimme banners of dynamische advertenties te maken.

Overige activiteiten: universeelvoer

Bij het type Overig Bedrijf kan een universele feed in CSV-formaat worden gebruikt. De eerste regel bevat de kolomnamen en de volgende regels bevatten de gegevens zelf. De inhoud van de kolommen wordt gescheiden door een komma. Gegevens in de feed moeten in UTF-8-codering zijn.

Elementen opgenomen in CSV

Overige activiteiten: reisfeed van Google Ads

De Google Ads Travel CSV-feed kan worden gebruikt in het type Overig bedrijf. De eerste regel bevat de kolomnamen en de volgende regels bevatten de gegevens zelf. De inhoud van de kolommen wordt gescheiden door een komma. Gegevens in de feed moeten in UTF-8-codering zijn.

Elementen opgenomen in CSV

In de onderstaande tabel worden de feedelementen beschreven die worden gebruikt om slimme banners te maken.

Als u een feed wilt toevoegen, volgt u op de campagnelijstpagina de link Feeds. Klik op de pagina Feeds beheren op de knop +Feed toevoegen en selecteer uw bedrijfstype.

• Bestandslink
• Bestand uploaden

Selecteer het bestand dat u wilt uploaden. De grootte van het geüploade bestand mag niet groter zijn dan 512 MB. Bij het updaten wordt het bestand door de robot gedownload en worden de nieuwe gegevens geïmporteerd in Direct.

U kunt uw feed in een archief plaatsen dat met behulp van het algoritme is gemaakt ZIP-compressie(extensie.zip) of GNU ZIP (extensie.gz).

Als er een fout is opgetreden bij het toevoegen van een feed (de feedgrootte, het formaat of de link zijn bijvoorbeeld niet geschikt), ziet u de status 'Uploadfout' en een link naar een foutenrapport.

Bij het lezen van een bestand worden de volgende voorwaarden gecontroleerd:

• alle benodigde elementen zijn aanwezig;
• alle elementnamen zijn correct;
• Elk element komt maximaal één keer voor.

Als aan één van deze voorwaarden niet wordt voldaan, wordt het dossier afgewezen.

Het is al lang bekend dat afbeeldingen de meest tijdrovende aspecten van responsive webdesign zijn. Vandaag zullen we zien hoe we het beeldelement kunnen gebruiken als oplossing voor het probleem. adaptieve afbeeldingen nu.

De dagen van website-ontwerp met een vaste breedte en volledige lay-out zijn al lang voorbij. In de huidige tijd van breedbeeldmonitoren, internettelevisie, tablets en smartphones verschillende maten ons ontwerp moet rekening houden met elke resolutie - van 320 pixels tot 7680.

Al deze resoluties stellen eisen aan afbeeldingen: ze moeten uitrekken en krimpen om aan verschillende eisen te voldoen. Dit kan een probleem zijn, omdat... behalve vectorafbeeldingen hebben de meeste afbeeldingen een vaste pixelbreedte die niet verandert.

Dus wat te doen?

Normaal gesproken vindt u het volgende in de CSS-code van vrijwel elke responsieve website:

img (max-breedte: 100%; hoogte: auto;)

Deze code gebruikt de maximale breedte-instelling: 100%; om ervoor te zorgen dat de afbeelding niet verder reikt dan de bovenliggende container. Als de bovenliggende container kleiner wordt dan de breedte van de afbeelding, krimpt de afbeelding mee. Hoogte instellen: automatisch; is aanwezig zodat bij verkleining de proporties van het beeld behouden blijven.

Eén rubberen afbeelding voor alle apparaten

Dit lost het probleem in één sleutel op, waardoor we één afbeelding per afbeelding kunnen weergeven verschillende omstandigheden. Maar het staat ons niet toe om verschillende afbeeldingen te tonen voor verschillende omstandigheden.

picture is een nieuw element dat deel zou moeten uitmaken van HTML5. Het zal het proces van het plaatsen van adaptieve afbeeldingen aanzienlijk versnellen, vergelijkbaar met de werkingsprincipes van de audio- en video-elementen. Hiermee kunt u meerdere bronelementen opgeven, die allemaal naar verwijzen diverse bestanden afbeeldingen samen met de omstandigheden waaronder ze moeten worden geladen.

Hiermee kunt u downloaden diverse afbeeldingen afhankelijk van:

Resultaten van mediaquery's, zoals de hoogte, breedte en oriëntatie van de viewport

Pixeldichtheid

Dit betekent dat u:

Upload afbeeldingen van de juiste afmetingen, waarbij u maximaal gebruik maakt van de beschikbare kanaalbreedte.

Upload afbeeldingen met verschillende bijsnijd- en beeldverhoudingen om tegemoet te komen aan veranderende lay-outs voor verschillende schermbreedtes.

Afbeeldingen uploaden van hoge resolutie voor schermen met een hoge pixeldichtheid.

Diverse afbeeldingen afhankelijk van de omstandigheden geladen

De basisstappen voor het werken met het afbeeldingselement zijn:

Het maken van openings- en sluitingsafbeeldingstags.

Maak binnen deze tags een bronelement voor elk verzoek dat u wilt doen.

Voeg een media-attribuut toe aan uw zoekopdracht voor zaken als de hoogte, breedte, oriëntatie, enz. van de viewport.

Voeg een srcset-attribuut toe met de juiste naam van het afbeeldingsbestand dat u wilt uploaden.

Voeg extra bestandsnamen toe aan uw srcset-attribuut als u schermen met een hoge pixeldichtheid, zoals Retina, wilt ondersteunen.

Voeg een img-element toe als fallback.

Hier is een eenvoudig voorbeeld dat controleert of de viewport kleiner is dan 768 pixels, en als dat het geval is, wordt een kleinere afbeelding geladen:

U zult merken dat de syntaxis die in het media-attribuut wordt gebruikt precies hetzelfde is als wat u gewend bent bij het schrijven van CSS-mediaquery's. U kunt dezelfde controles gebruiken, wat betekent dat u query's kunt maken voor maximale breedte, minimale breedte, maximale hoogte, minimale hoogte, oriëntatie, enzovoort.

U kunt deze controles gebruiken om liggende of staande versies van een afbeelding te laden, afhankelijk van de stand van het apparaat, en u kunt ook formaatquery's toevoegen. Bijvoorbeeld:

De bovenstaande code laadt een kleinere, liggend bijgesneden versie van de afbeelding voor het apparaat met de juiste richting. Er wordt een grotere versie van dezelfde afbeelding geladen voor apparaten met een groter scherm.

Als het apparaat in portretoriëntatie staat, downloadt het de afbeelding dienovereenkomstig bijgesneden: op een kleiner formaat - voor kleine apparaten en een grotere afbeelding voor apparaten met een hogere resolutie.

Als u versies van afbeeldingen wilt verstrekken verschillende resoluties Voor schermen met een hogere dichtheid kunt u dit doen door extra bestandsnamen toe te voegen aan het srcset-attribuut. Laten we bijvoorbeeld naar het eerste codevoorbeeld hierboven kijken met de toevoeging van ondersteuning voor Retina 2x-schermresolutie:

Het mediaverzoek wordt eerst verwerkt, zodat u de grootte van de afbeelding op het scherm kunt bepalen. Vervolgens wordt de pixeldichtheid van het scherm gecontroleerd en of hoge dichtheid wordt ondersteund en toegestaan ​​door de gebruikersinstellingen, wordt een versie met een hogere resolutie van de afbeelding geladen.

Momenteel is er een native implementatie van picture in ontwikkeling voor Chrome-, Firefox- en Opera-browsers. In de toekomst zullen we waarschijnlijk bredere ondersteuning in andere browsers zien. Maar vanaf vandaag wordt alleen steun verwacht.

Voorlopig hoeft u niet te wachten als u Picture nu meteen wilt gaan gebruiken. U hoeft alleen maar Picturefill 2.0 te gebruiken, een polyfill geleverd door de ontwikkelaars van Filament Group.

Zodra u het picturefill.js-bestand naar uw project heeft gedownload, kan het worden gebruikt door het eenvoudigweg in het hoofdgedeelte van uw site te laden:

Het is ook mogelijk om het script asynchroon te laden grotere efficiëntie, waarover u kunt lezen in de Picturefill-documentatie. Samen met het laden van dit script zal het afbeeldingselement werken zoals ik heb beschreven, met kleine beperkingen. ] -- >< source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "Mijn standaardafbeelding" > < / picture >

Android 2.3

Net als IE9 ziet Android 2.3 geen bronelementen in afbeeldingstags. Het herkent echter het srcset-attribuut wanneer het is toegewezen aan een gewone img-tag. Zorg ervoor dat u een fallback img-element met de standaardbestandsnaam opneemt in het srcset-attribuut voor Android 2.3 of een andere browser met een soortgelijk probleem.

Vereist ondersteuning voor JavaScript en native mediaquery's

Omdat deze oplossing in JavaScript is geïmplementeerd, heeft deze daarom JavaScript nodig correcte werking in de browser. Picturefill 2.0 biedt geen oplossingen voor “no-js” omdat er anders veel afbeeldingen op pagina’s zouden verschijnen als native ondersteuning is geïmplementeerd. U kunt Picturefill 1.2 echter gebruiken als de “no-js”-functie belangrijk voor u is.

De volgende vereiste van Picturefill is native ondersteuning voor mediaquery's, zodat query's in het media-attribuut kunnen werken. Alle moderne browsers ondersteunt mediaquery's, terwijl IE8 en lager de enige browser is die dit niet ondersteunt, met een klein resterend gebruikersbestand.

Mogelijk extra HTTP-verzoeken

Voor browsers die native srcset-ondersteuning hebben maar geen afbeelding ondersteunen, is dit mogelijk voornaam bestand in een fallback img-element kan worden opgevraagd voordat een geschiktere afbeelding in het img-element is gedefinieerd. Dit probleem is tijdelijk en zal worden opgelost wanneer native beeldondersteuning wordt geïmplementeerd.

In de ontwikkelingsbuilds van de Chrome-, Firefox- en Opera-browsers is ondersteuning voor het nieuwe beeldelement verschenen, ontworpen om een ​​aantal problemen op te lossen die zich tijdens de ontwikkeling voordoen adaptieve ontwerpen. Laten we het eens nader bekijken.

Het nieuwe afbeeldingselement lost de volgende problemen op waarmee de ontwikkelaar wordt geconfronteerd responsieve webapplicaties(Ik gebruik de classificatie voorgesteld door pepelsbey op een van de recente frontend-conferenties):

Daarom zal voor de meeste taken de verkorte notatie volstaan, zonder gebruik te maken van afbeeldingen

Laten we eens kijken hoe de bovenstaande problemen worden opgelost met behulp van een nieuw element. Alle voorbeeldbestanden zijn te vinden in deze repository github.com/fetis/picture

Om de voorbeelden in dit artikel op het bureaublad te testen, hebt u Firefox Nighlty nodig (ondersteuning voor afbeeldingen wordt ingeschakeld door dom.image.picture.enable in about:config in te stellen) of Chroom Kanarie of Opera-ontwikkelaar. Op mobiel apparaat het nieuwe element kan worden getest in Chrome Beta

2x en 3x wel descriptoren voor pixeldichtheid, vertellen ze de browser dat deze afbeeldingen zijn voorbereid op deze dichtheid, als je wilt, kun je deze gebruiken. Houd er rekening mee dat ze de browser niet dwingen deze afbeeldingen te gebruiken, maar er alleen om vragen. De uiteindelijke beslissing ligt bij hem, afhankelijk van andere omstandigheden, zoals de huidige verbinding.

Het src-attribuut in in dit geval dient als een bron van afbeeldingen voor dichtheid< 2 и фолбеком на случай, если браузер не поддерживает новый элемент.

Het gelijktijdig gebruik van dichtheids- en breedtebeschrijvingen is niet toegestaan.

Het attribuut afmetingen vermeldt de afbeeldingsformaten voor alle controlepunten in ons ontwerp. Breekpunten worden ingesteld in de vorm van een reguliere media-uitdrukking, de browser neemt de eerste, die True retourneert en de keten niet verder in overweging neemt. De breedtewaarde gebruikt de nieuwe lengte-eenheid vw , die een waarde retourneert als een percentage van de breedte van de viewport.

Als er geen behoefte is aan een afbeelding om te gebruiken controlepunten, dan kan de invoer worden ingekort tot deze size="100vw" . En voor complexere ontwerpen kun je bijvoorbeeld de CSS-calc()-functie gebruiken
maten = "(max-breedte: 30em) 100vw, (max-breedte: 50em) 50vw, calc(33vw - 100px)"

Het moeilijkste kenmerk om naar mijn mening te gedragen. Als je geen maten opgeeft, dan kiest de browser altijd het meest groot beeld. In combinatie met breedte werkt het niet, al lijkt het een logische combinatie en nog een aantal andere problemen. Misschien zijn dit kenmerken van een vroege implementatie.

Zoals u kunt zien, hebben we al 80% van de behoeften gedekt adaptieve indeling, en nog nooit eerder een afbeelding hebt gebruikt, wordt het tijd dat deze ook een rol gaat spelen.

Hier worden er 2 gebruikt JPEG-formaat en WebP. Wanneer de schermbreedte meer dan 1280 px is, wordt een afbeelding op volledige grootte in de helft van de viewport weergegeven. Bij een breedte van 640 tot 1279 wordt een bijgesneden foto weergegeven op 60% van de viewportbreedte. Wanneer de schermbreedte minder dan 640 px is, wordt de bijgesneden foto weergegeven met een breedte van 100%. Selecteer op basis van de huidige Scherm-DPI geproduceerd op basis van de breedte van de bronbestanden.