Olet kuullut, että verkosta on tullut visuaalisia ja suuria kuvia yrityksesi verkkosivustossa ovat tärkeitä.
Mutta nämä kuvat voivat olla sivustosi kävijöiden vitsaus. Kuvien osuus on 1MB 1,7 Mt: n keskimääräisestä verkkosivusta.
Tämä ei ehkä ole suuri ongelma kävijöille pöytätietokoneissa, joissa käytetään nopeaa Internet-yhteyttä. Jos näet tai haluat nähdä lisääntyneen liikenteen kävijöiltä, nämä kuvat voivat olla ongelma. Kuvan raskaiden Web-sivujen lataaminen voi kestää kauan. Vierailijat turhautuvat ja jättävät sivustosi.
$config[code] not foundOlet ehkä toteuttanut reagoivan Web-suunnittelun, joka ajattelee kaikkia mobiiliongelmia. Ja on totta, että reagoiva Web-suunnittelu ratkaisee joitakin ongelmia. Se järjestää ja näyttää automaattisesti sivustosi elementtejä, joita voidaan tarkastella pienemmillä, kapeammilla mobiilinäytöillä.
Mutta reagoiva Web-suunnittelu ei ole vastaus kaikkeen. Se ei välttämättä ratkaise kuvatiedostoa. Jopa reagoivalla suunnittelulla monta kertaa nämä raskaat kuvat ladataan silti. Web-suorituskykyasiantuntijana Yoav Weiss viittaa lyhyesti Opera-sivustoon:
”Responsive Web Design RWD yhdistää uudet selainominaisuudet ja CSS-tekniikat luodakseen verkkosivustoja, jotka sopeutuvat näyttöön tulevaan laitteeseen ja näyttävät ihanteellisilta kaikkialla. Tämän ansiosta kehittäjät eivät voineet huolehtia laitteiden epäluotettavasta havaitsemisesta ja ajatella verkkosivustojaan tarkasteluportin mittojen mukaan.
Mutta vaikka RWD-sivustot näyttivät erilaisilta kussakin laitteessa, useimmat heistä jatkoivat samojen resurssien lataamista kaikkiin laitteisiin. ”
Uusi
Jos et tiedä mitään HTML-koodista, ei-tekninen määritelmä on: se on erityinen kieli. Kun käytät sivustosi koodin kulissien takana, tämä kieli antaa ohjeita siitä, miten selain näyttää tekstin ja kuvat. Uusi Picture-elementti on HTML-merkintäkielen tyyppi. Se on kirjoitettu näin (kohden Responsive Images Community Group): Kuva-elementti on noin reagoiva kuvia, ei reagoi design. Ei-teknisille liikemiehille tämä ero voi tuntua pieneltä. Mutta kun se koskee sivustosi suorituskykyä mobiililaitteissa, se voi olla merkittävä. ArsTechnican raportin mukaan uusi merkintäelementti korjaa ongelmat, jotka aiheutuvat kuvista, jotka on tarkoitettu nähtäväksi täysikokoisessa monitorissa - kuvat, jotka eivät käännä hyvin mobiililaitteille.
”Kun selain kohtaa Picture-elementin, se ensin arvioi Web-kehittäjän mahdollisesti määrittelemät säännöt. *** Sitten, kun olet arvioinut eri säännöt, selain poimii parhaan kuvan omien kriteeriensä perusteella. Tämä on toinen hieno ominaisuus, koska selaimen kriteerit voivat sisältää asetuksesi. Esimerkiksi tulevissa selaimissa voi olla mahdollisuus pysäyttää korkean resoluution kuvat lataamasta 3G-laitteesta riippumatta siitä, mitä sivun kuvaelementti voisi sanoa. Kun selain tietää, mikä kuva on paras valinta, se todella lataa ja näyttää kyseisen kuvan hyvässä vanhassa img-elementissä. … Mitä tapahtuu, kuva käärii img-tagin. Jos selain on liian vanha tietää, mitä tehdä Kaikki kehittäjät eivät hyväksyneet uutta Picture-elementtiä aluksi. Ars Technican tarina kertoo prosessista, jota web-kehitysyhteisön johtajat läpäisivät päästä siihen pisteeseen, missä $config[code] not found Mutta ongelma näyttää nyt ratkaistuna, kun uusi HTML-elementti on otettu käyttöön.
Liikemiehinä on tärkeää tietää Picture HTML -elementin toteuttaminen kuville on keskusteltavaa Web-kehittäjän kanssa. Teknisesti ajattelevat ja do-it-yourselfers voivat oppia käyttämään Picture-elementtiä. Se on erinomainen kirjoitus Scott Gilbertsonilta. Voit vapaasti toteuttaa
Kuvat: Shutterstock; RICG Mikä on HTML-elementti?
Keskeiset kohdat Tietoja
