Adaptive Images: Responsive Image -ongelman ratkaiseminen

Vastuullinen suunnittelu ei ole pelkästään muutos ulkoasussa tai mediakyselyjen käyttö täällä ja siellä, se on mielentila ja toiminta, jolla on selkeä merkitys.

Responsive design tarkoittaa lähinnä sitä, että pidämme enemmän sisältöä kuin aiemmin. Itse asiassa välitämme niin paljon, että jopa optimoimme lukemamme ja katsottavan sisällön laitteissa, joita ei ole vielä käynnistetty.

Pohjimmiltaan yritämme esittää tietoja niin selkeästi kuin mahdollista ja olla mahdollisimman tehokkaita samanaikaisesti. Tässä on yleinen väärinkäsitys; mobiili tarkoittaa ensin sitä, että koko sivustosi pyörii matkapuhelimen ympärillä. Se ei ole aivan tarkka. Mobile ensin yksinkertaisesti tarkoittaa suunnitella yksinkertaisin kokemus ensin, mikä usein johtaa meitä leikkaamaan yleiskustannuksia, joita meillä on kokemusta tai jotka saattavat tulla tulevaisuudessa.

Suunnittelun maailmassa; nopeat päätökset; reagointikykyä; ja luova sisältö, meidän on oltava valppaita ensin ja ennen kaikkea. Ja tarkkaavainen tulee alas tietämään, milloin meillä on ongelma reagoivissa kuvioissamme ja miten korjata se. Tänään teemme juuri niin.

Reagoivat kuvat ovat olleet kovaa aihetta jo vuosia, sillä tyypillisesti on ollut useampi kuin yksi "hack-around" tapa tehdä kuvasi reagoiviksi. Käy läpi tämän aiheen alusta lähtien, alkaen siitä, miten aiemmin käytimme sitä.

Menneisyys

Boston Globe -Web-sivusto on klassinen esimerkki nestemäisestä suunnittelusta.

Ennen kuin mennään eteenpäin, meidän on mentävä siihen, miten verkkosivu käyttäytyy, jotta voimme puhua siitä, miten se toimii. Lyhyt räikeä: HTML ladataan peräkkäin, sitten resursseja pyydetään heti, kun niitä on kohdattu, komentosarjat suoritetaan välittömästi ja kaikki evästeet lähetetään HTTP-pyynnöillä.

Pyyntö / vedetty / nouto / jne. Prosessi. on asettanut hieman rajoitusta siitä, kuinka luovaa voimme saada näiden menetelmien avulla. Tämä ei todellakaan ole pysäyttänyt ihmisiä aiemmin. Tässä on muutamia tapoja, joilla he ovat saaneet tämän.

Korvaa src-attribuutin

Voimme käyttää javascriptiä kirjoittamaan "src" -määritteen niin, että se vetää ja korvaa selaimen koon perusteella näytetyn kuvan, joka näyttää toimivan hienosti. Tämä on ollut mitä monet ihmiset ovat käyttäneet aikaisemmin. Ongelmana tässä on, että se käyttää kaksinkertaista HTTP-pyyntöä. Ensin se vetää alkuperäisen kuvan ja sitten se korvaa sen javascript'd-kuvan kanssa. Sinä olet pääasiassa tekemässä enemmän kuin mitä olisi tehnyt, jos et tehnyt mitään, kaikki vaikka se näyttää toimivan.

Onko kiertoliikkeitä tähän? On todellakin!

On olemassa menetelmä, jota monet ihmiset käyttävät, kun laitamme 1px gif-kuvan sivustolle varsinaisen kuvan sijaan, niin että kahden hinnaksi kahta hintaa kahta hinnalla ei ole kahta hintaa, mutta se on Ei myöskään ihanteellista. Tällöin tehdään vielä kaksi HTTP-pyyntöä.

Tämä tarkoittaa myös sitä, että luotat javascriptin kaikille kuville. Tämä on hankalaa, koska mobiilioperaattorit voivat särkyä javascriptin avulla, mistä tahansa muista asioista voi rikkoa javascriptiä, ja yllättävä määrä verkkosivustojen käyttäjiä poistaa ne käytöstä tahallaan.

NoScript

Toinen suosio on saavuttanut noscript-tunnisteen mobiilikuvien kohdalla ja käytä sitten javascriptia vaihtamalla se suurempaan resoluution kuvaan. Tämä vaikutti siltä, ​​että yhteisö joutui myrskyn takia, koska se kykeni vaihtamaan mobiililaitteista aina korkeajänteisiin versioihin, ja tämä oli oikeastaan ​​samansuuntainen kuin edellä mainitsemani "liikuteltava ensimmäinen" virheellinen tulkinta. Tämä ei toimi IE: ssä. Internet Explorerin kiertotavoissa sinun on kirjoitettava seuraavat tiedot:

Mutta ongelmana on se, että nyt se ei toimi suosittujen selaimella Firefox. Joten meidän on tehtävä:

Kuten näette, se ei ole kovin yksinkertainen eikä varmasti ole kovin vahva. Ei todellakaan ole tapa tehdä sitä puhtaasti tai yksinkertaisesti lainkaan. Itse asiassa monet ihmiset, jotka toimivat reagoivissa kuvissa, ovat yrittäneet ratkaista näitä ongelmia jo vuosia, eivätkä todellakaan ole päässeet liian pitkälle.

Tyypillisesti, mitä he ovat tehneet, käytetään jonkinlaista javascriptiä ongelman ratkaisemiseen ja hyväksyy kaksinkertaisen http-pyynnön välttämättömänä pahana.

Palvelinpuolen ratkaisu?

Tyypillinen palvelinpuolen ratkaisu on javascript korvata "src" HTML5 "-data-highsrc" avulla ja tallentaa selaimen koon evästeeseen. Se lähettää sitten samat useat HTTP-pyynnöt kuin aiemmin.

Siksi ihmiset halusivat tämän menetelmän, että he kokivat olevansa turvallisempia, koska he tallensivat selaimen koon evästeen, ja he kokivat virheen marginaalin vähentyneen. Todellisuudessa tämä ei kuitenkaan ole tarkka. Seuraavassa on muutamia syitä, miksi tämä menetelmä ei ole yhtä suuri kuin muut tähän mennessä luetellut menetelmät. Se sallii vain suurien ja pienten kuvien hakemisen, se ei käsittele laitekohtaisia ​​muutoksia ja se murtuu huonosti, koska nyt selaimet hakevat kuvia ennalta. Suuri takaisku on myös se, että joskus evästeet eivät ole asetettu tarpeeksi nopeasti, jolloin työpöydälle saadaan kuvia matkapuhelimille.

Kaikki tämä, nimittäin epäonnistuminen sopivista vaihtoehdoista palvelimelle ja asiakkaalle, tarvitsemme uuden ratkaisun.

Ja tämä on oikein, missä mukautuvat kuvat menetelmävaiheet.

Mukautuva kuvamenetelmä

Sopeutuvat kuvat ovat todellinen ratkaisu tähän koko sekaannukseen. Se on kirjaimellisesti yhtä helppoa kuin vetää ja pudota palvelimelle ja olet valmis. Tämä mukautuva menetelmä käyttää yhden htaccess-tiedoston, yhden php-tiedoston ja yhden JavaScript-rivin, ja se on se .

Voit vetää htaccess- ja php-tiedoston juuri juurihakemistoosi ja lisätä javascriptin indeksitiedoston päähän ja olet valmis. Mikään muu ei edes ole huolissasi. Nyt se tarjoaa paljon räätälöintiä, mutta pääsemme siihen loppupuolella.

Nyt siirrymme heti Adaptive Methodin alkuun.

Tavoitteet

Ensin tunnistetaan hankkeen tavoitteet. Adaptiivisten kuvien luoja, Matthew Wilcox , on tunnustanut nämä tavoitteensa tämän ratkaisun löytämiseksi:

• On helppo asentaa ja käyttää.
• On oltava mahdollisimman vähäinen huolto.
• On työskenneltävä olemassa olevan sisällön kanssa, ei tarvita merkintämuokkauksia tai mukautettua CMS-järjestelmää.
• On sallittava useita versioita.
• On työskenneltävä suunnittelupoikkeamien kanssa, eikä laitteen rikkoutumispisteitä.
• On vaihdettava helposti, kun erinomainen ratkaisu saapuu.

Ja nämä hankkeen tavoitteet kaikki luottavat siihen oletukseen, että

sivustosi tunnisteet käyttävät jo suurinta resoluutiota, joka mielestäni on kohtuullinen oletus. Tyypillisesti meillä on parhaat kuvat sivustossamme jo, koska tiedän hyvin harvat web-suunnittelijat, jotka tuovat parhaat kuvat puhelimen versiot ja niiden pahimmat verkossa. Se on melko itsestään selvää.

Kuinka se toimii

Aiomme vain sukeltaa koodiin, mutta ennen kuin puhumme siitä, miten se toimii korkeammalla tasolla. Yksinkertaisesti sanottuna javascript havaitsee laitteen suurimmat näytön mitat ja tallentaa sen evästeeseen. .Htaccess-tiedosto viittaa sitten tiettyihin pyyntöihin adaptive-images.php: stä ja sitten näiden sääntöjen perusteella PHP-tiedosto käsittelee jotain. Sisällä, että käsittely on, jossa todellinen maaginen tapahtuu, ja kaikin keinoin suosittelen kaikille lukemista tämän tarkistaa PHP-tiedosto. Se on kaunein kirjoitettu PHP, jonka olen nähnyt vuosina . Se on ehdottomasti välttämätöntä.

Nyt siirrymme hajottamaan näiden tiedostojen toimivuuden erityispiirteet ja toimimaan keskenään toistensa kanssa. Tässä keskustelemme kaikesta, mitä saat, kun lataat paketin adaptive-images-sivustosta.

Javascript-koodi

Kopioitava javascript -koodi on tämä:

Ja sen on mentävä ennen muita javascript pääosassa . Huomaa myös, että jos haluat hyödyntää minkä tahansa uudemman Applen verkkokalvonäytön, voit käyttää seuraavaa javascript-riviä:

Kuten näette, tämä viimeinen rivi on hyvin samanlainen, ja ainoa ero on se, että se lähettää suuremman resoluution kuvia sellaisille laitteille, jotka sallivat sen - olla tietoinen siitä, että Retina-käyttäjille tulee hitaampia latauksia, mutta parempia kuvia tietenkin.

Huomaa, että tämän täytyy silti olla ensimmäinen javascript pääosasi.

.Htaccess-tiedosto

.Htaccess-tiedosto on yksinkertaisesti kunnioitettu hakemiston hallinta-apuohjelma ja jos sinulla on jo verkkosivusto, jonka aiot käyttää adaptiivisia kuvia, silloin sinulla on todennäköisesti jo .htaccess-tiedosto, joten meidän on lisättävä sisältöä . Avaa se (se sijaitsee aina sivustosi juurihakemistossa) ja lisää tämä:

Options +FollowSymlinksRewriteEngine On# Adaptive-Images ----------------------------------------# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:# RewriteCond %{REQUEST_URI} !some-directory# RewriteCond %{REQUEST_URI} !another-directoryRewriteCond %{REQUEST_URI} !assets# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images ----------------------------------------

Mielenkiintoinen osa tästä on, että sinun ei todellakaan tarvitse tehdä mitään muutoksia lainkaan.

Tyypillisesti sivustot haluavat, että kaikki kuvat ovat herkkiä ja toimivat mukavasti kaikkien muotojen tekijöiden kanssa, joten sinun ei todellakaan tarvitse sulkea pois mitään. Jos haluat tai haluat, on olemassa vaihtoehto, mutta muista, että haluat olla herkkä ja edistyksellinen. .Htaccess-tiedosto on täydellinen tähän projektiin, ja se toimii avaimena koko prosessissa, joten ilman sitä et todellakaan voi käyttää tätä menetelmää. Tämän vuoksi sinun on varmistettava, että et unohda tätä tai lisää sitä, jos sinulla ei ole sitä.

PHP-tiedosto

Kaikki, mitä sinun tarvitsee tehdä, on vedä ja pudota se juurihakemistoosi, ja se hoitaa kaiken muun. Tässä on pieni muokattavissa oleva osio, kuten näet tässä:

/* CONFIG ------------------------------ */$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Kuten muusta tekstistä kerrotaan, jos et tiedä, mitä teet, miksi ei vain jätä sitä yksin? Jos pidät tinkeringistä, päästään vain valoon.

$ resoluutiot ovat näytön leveyksiä, joihin me työskentelemme. Oletusarvoisesti se tallentaa uudelleen kokoisen kuvan suurille näytöille, tavallisille näytöille, tablet-laitteille, puhelimille ja pienille puhelimille.

$ cache_path, jos et pidä välimuistissa olevia kuvia kirjoitettuna kyseiseen kansioon, voit laittaa sen muualle. Aseta polku tähän kansioon ja varmista, että luot sen palvelimelle.

$ sharpen suorittaa hienostuneen teroituksen resalsoiduissa kuvissa. Yleensä tämä on hieno, mutta haluat ehkä poistaa sen käytöstä, jos palvelimesi on erittäin kiireinen.

$ watch_cache jos palvelimesi saa paljon kiireisiä, se voi auttaa suorituskykyä kääntämään tämän FALSE-arvoon. Se tarkoittaa kuitenkin sitä, että sinun on poistettava manuaalisesti välimuistihakemisto, jos muutat resurssia.

Nyt kun tiedät kaikki räätälöinnistä, saatat olla utelias, mitä PHP-tiedosto tekee täsmälleen? No, käykäämme sen läpi askel askeleelta:

• Se lukee evästeen ja sopii tulokseen CSS-raja-arvoja vastaaviksi
• Se tarkistaa oman välimuistihakemistonsa nähdäkseen, onko pyynnön kohteena olevan tiedoston versio olemassa kyseisessä breakpoint-koossa.
• Jos se tekee, vertaa sen päivämäärät ja alkuperä varmistaakseen, ettei välimuistin versio ole ohut.
• Jos sitä ei ole välimuistissa; sitten se luo reseksoidun kuvan vain, jos lähdekuva on suurempi kuin breakpoint-koon. Sitten se kätkee sen tulevaa käyttöä varten.

Ai-cookie.php-tiedosto

Saat myös tämän "ai-cookie.php" -tiedoston kansioosi, kun lataat mukautuvat kuvapaketit, mutta tämä voidaan itse asiassa poistaa, koska se koskee vaihtoehtoista tapaa käyttäjien näytön koon havaitsemiseen. Adaptiivisten kuvien luoja suosittelee, että poistat tämän ja siirryt tavalliseen tapaan.

Ja se on kyse paketin sisällöstä. Nyt varmista, että tarkastelet kaikkia tiedostoja, joita käytät sivustossasi ja tarkista, että käytät parhaita käytäntöjä mediakyselyissä. Muista myös kysyä, onko sinulla mitään tätä sisältöä tai mediakyselyjä yleensä, kun rakastan puhua tällaisesta asiasta. Nyt tiivistetään, mitä meillä on täällä.

Yhteenvetona:

Se on varmasti kiehtova järjestelmä, jota minä ennakoin olevan käytössä tulevina vuosina. Ensinnäkin, mitä voin mukauttaa tämän järjestelmän kanssa kokonaisuutena?

Tämän järjestelmän avulla voit:

• Aseta raja-arvot vastaamaan CSS: ää.
• Määritä, mistä haluat välimuistin.
• Aseta laadittujen JPG-levyjen laatu.
• Määritä, kuinka kauan selaimet haluavat tallentaa kuvan välimuistiin.
• Terävät jyrkkiä kuvia.
• Vaihtoehtoinen javascript korkeiden DPI-laitteiden havaitsemiseen.

Tulevaisuudessa haluan myös rakastaa sitä havaitsemaan järjestelmän kaistanleveyden laitteiston koon tai selaimen leveyden sijasta. Koska tämä on todellinen avain päättää, mitä kuvaa lähetetään missä, mutta nyt ei ole toteuttamiskelpoista tapaa tehdä sitä.

Vierailla adaptive-images.com ladata tiedostoja, joihin olen viitannut tässä artikkelissa.