Du har hørt at Internett er blitt mer visuelt og gode bilder på ditt nettsted er viktige.
Men disse bildene kan være plager av nettstedets besøkende. Bilder utgjør 1 MB ut av den 1,7 MB den gjennomsnittlige nettsiden inneholder.
Dette kan ikke være mye av et problem for de besøkende på stasjonære datamaskiner som bruker høyhastighets Internett-tilkoblinger. Men hvis du ser eller vil se økt trafikk fra mobile besøkende, kan disse bildene være et problem. Bildetunge websider kan ta lang tid å laste ned. Besøkende blir frustrert og forlater nettstedet ditt.
$config[code] not foundDu har kanskje implementert en responsiv webdesign, som tenker som løser alle dine mobile problemer. Og det er sant at en lydhør webdesign løser noen problemer. Den ordner automatisk og viser nettstedelementene dine på mindre, smalere mobile skjermer.
Men lydhør webdesign er ikke svaret på alt. Det løser ikke nødvendigvis billednedlastingsproblemet. Selv med responsiv design, er mange ganger de tyngre bildene fortsatt lastet ned uansett. Som Web-ytelsesspesialist Yoav Weiss gir kortfattet poeng på Opera-nettstedet:
"Responsive Web Design RWD kombinerte nye nettleseregenskaper og CSS-teknikker for å lage nettsteder som tilpasser seg enheten som viser dem, og ser ideelle overalt. Det gjorde det mulig for utviklere å slutte å bekymre seg for upålitelig enhetsdeteksjon og tenke på sine nettsteder når det gjelder visningsdimensjoner.
Men selv om RWD-nettsteder så annerledes ut på hver enhet, under, fortsatte de fleste av dem å laste ned de samme ressursene for alle enhetene. "
Den nye
Hvis du ikke vet noe om HTML-kode, er en ikke-teknisk definisjon: Det er et spesialspråk. Når det brukes bak kulissene i nettsiden din, gir dette språket instruksjoner for hvordan nettleseren skal vise teksten og bildene. Det nye Bildeelementet er en type HTML-oppslagsspråk. Det er skrevet slik (i gruppen Responsive Images Community): Bildeelementet handler om responsivt Bilder, ikke responsiv design. For ikke-tekniske forretningsfolk kan dette skillet virke lite. Men når det gjelder ytelsen til nettstedet ditt på mobile enheter, kan det være betydelig. Ifølge en ArsTechnica-rapport adresserer det nye oppslagselementet problemene som skyldes bilder som var ment å bli sett på en fullskjermskærm - bilder som ikke oversettes godt til mobile enheter. De
"Når nettleseren møter et bildeelement, evaluerer det først noen regler som webutvikleren kan spesifisere. *** Etter å ha vurdert de ulike reglene, velger nettleseren det beste bildet basert på sine egne kriterier. Dette er en annen fin funksjon, siden nettleserens kriterier kan inneholde innstillingene dine. For eksempel kan fremtidige nettlesere tilby et alternativ for å stoppe høyoppløselige bilder fra å laste over 3G, uavhengig av hva som helst Bildeelement på siden kan si. Når nettleseren vet hvilket bilde som er det beste valget, laster det faktisk og viser bildet i et godt gammelt img-element. … hva skjer er Picture wraps en img tag. Hvis nettleseren er for gammel til å vite hva du skal gjøre av a Ikke alle utviklere har akseptert det nye bildeelementet først. Ars Technicas historie beskriver prosessen som ledere i webutviklingssamfunnet gikk gjennom for å komme til det punktet hvor $config[code] not found Men problemet ser nå utgjort, med det nye bildet HTML-elementet vedtatt. De
Som forretningsfolk er det viktig å vite det Implementering av Picture HTML-elementet for bilder er noe å diskutere med webutvikleren din. Teknisk-sinnet og gjør-det-selvene kan gå her for å lære å bruke bildeelementet. Det er en utmerket oppskrift av Scott Gilbertson. Du er velkommen til å implementere
Bilder: Shutterstock; RICG Hva er bildet HTML-elementet?
Nøkkelpunkter om
