\n Oli aika, jolloin pystyit luotettavasti erottamaan p\u00f6yt\u00e4tietokoneen verkkosivun mobiilisivusta. Itse asiassa niin paljon, ett\u00e4 koko toimiala kasvoi ty\u00f6p\u00f6yt\u00e4sivustojen uudelleenk\u00e4yt\u00f6n ymp\u00e4rille mobiililaitteille.\n<\/p>\n
\n Jonkin aikaa et ollut kukaan, jos sinulla ei ollut erillist\u00e4 mobiilisivustoa erillisess\u00e4 verkkotunnuksessa. Sitten asiat alkoivat muuttua.\n<\/p>\n
\n Mobiilin\u00e4yt\u00f6t paranivat huomaamatta. Samoin mobiiliselaimet. Tabletit heittiv\u00e4t yht\u00e4l\u00f6\u00f6n toisen elementin. 4G tuli mukaan. Retina-n\u00e4yt\u00f6t tarjosivat uusia selkeyden tasoja loppuk\u00e4ytt\u00e4jille.\n<\/p>\n
\n Yht\u00e4kki\u00e4 p\u00f6yt\u00e4koneen ja mobiililaitteen v\u00e4linen raja n\u00e4ytti ep\u00e4selv\u00e4lt\u00e4.\n<\/p>\n
\n Samaan aikaan p\u00f6yt\u00e4tietokoneiden n\u00e4ytt\u00f6jen koko ja resoluutio vaihteli.\n<\/p>\n
\n Ja kasvava p\u00e4\u00e4ns\u00e4rky verkkosuunnittelijoille.\n<\/p>\n
\n Takana olivat ajat, jolloin piti ottaa huomioon vain kourallinen kuvaportin kokoa. Asiat muuttuivat monimutkaisiksi.\n<\/p>\n
\n Onneksi apua oli saatavilla mediakyselyjen ja reagoivan suunnittelun konseptin muodossa.\n<\/p>\n
\n Mediakyselyiden ansiosta tyylej\u00e4 ja asettelua \u2013 jopa sis\u00e4lt\u00f6\u00e4 \u2013 oli mahdollista vaihdella k\u00e4ytt\u00e4j\u00e4n n\u00e4kym\u00e4n leveyden ja n\u00e4yt\u00f6n resoluution mukaan. Mediakyselyt eiv\u00e4t tietenk\u00e4\u00e4n ole ainoa ty\u00f6kalu reagoivan suunnittelijan temppupussissa, mutta on reilua sanoa, ett\u00e4 ne muodostavat tekniikan perustan.\n<\/p>\n
\n T\u00e4m\u00e4 oli loistava uutinen mobiililaitteille. Responsiivinen suunnittelu tarkoitti, ett\u00e4 pystyit toimittamaan tehokkaasti saman sivuston eri versioita eri laitteille. Kaikki ilman erillist\u00e4 mobiilisivustoa eri verkkotunnukselle.\n<\/p>\n
\n Sivuston omistajat alkavat ymm\u00e4rt\u00e4\u00e4, ett\u00e4 loppuk\u00e4ytt\u00e4j\u00e4t v\u00e4litt\u00e4v\u00e4t suorituskyvyst\u00e4. Etenkin v\u00e4hitt\u00e4iskauppiaat alkavat ymm\u00e4rt\u00e4\u00e4, ett\u00e4 millisekuntien latauksen poistaminen voi johtaa miljooniin taseeseen.\n<\/p>\n
\n Onneksi responsiiviset sivustot tarjoavat yhden selke\u00e4n suorituskyvyn edun omistautuneisiin mobiiliserkkuihinsa verrattuna: uudelleenohjaus mobiiliverkkotunnukseen on eliminoitu.\n<\/p>\n
\n T\u00e4st\u00e4 huolimatta responsiivinen suunnittelu on kuitenkin onnistunut saamaan jonkin verran mainetta huonosta suorituskyvyst\u00e4.\n<\/p>\n
\n Jollain tapaa t\u00e4m\u00e4 on melko ep\u00e4reilua, mutta on syyt\u00e4 tarkastella ylim\u00e4\u00e4r\u00e4isi\u00e4 suorituskykyhaasteita, joita reagoiva suunnittelu aiheuttaa varomattomille\u2026\n<\/p>\n
\n Kuvatiedostot ovat suuria. Ja koska ne ovat suuria, ne ovat usein syyllisi\u00e4 hitaisiin latausaikoihin. Siksi ne ovat hyv\u00e4 paikka aloittaa jokaiselle, joka yritt\u00e4\u00e4 optimoida sivuston suorituskyky\u00e4.\n<\/p>\n
\n Valitettavasti yksi ensimm\u00e4isist\u00e4 ratkaisuista kuvien toimittamiseen responsiivisesti ei ollut loistava suorituskyvyn kannalta.\n<\/p>\n
\n Tekniikka on ihanan yksinkertainen. K\u00e4yt\u00e4 vain enimm\u00e4isleveytt\u00e4: 100 % varmistaaksesi, ett\u00e4 kuvat skaalautuvat sis\u00e4lt\u00e4v\u00e4n elementin leveyteen:\n<\/p>\n
img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n\n Kun s\u00e4ili\u00f6 kutistuu sopimaan pienempiin kuvaportteihin, kaikki sis\u00e4ll\u00e4 olevat kuvat kutistuvat sen mukana. Helppo!\n<\/p>\n
\n Mutta siin\u00e4 on ongelma. Kuvan koko saattaa pienenty\u00e4 n\u00e4yt\u00f6ll\u00e4, mutta tiedoston koko pysyy samana. T\u00e4m\u00e4 on kaukana ihanteellisesta suorituskyvyn n\u00e4k\u00f6kulmasta. Saatat l\u00e4hett\u00e4\u00e4 800 x 800 pikselin kuvan johtoa pitkin vain, jotta se n\u00e4ytet\u00e4\u00e4n 80 x 80 pikselin\u00e4: toisin sanoen saatat l\u00e4hett\u00e4\u00e4 satoja (tai tuhansia) tarpeettomia tavuja. Sen lis\u00e4ksi, ett\u00e4 kuvan lataaminen kest\u00e4\u00e4 kauan, kaikki n\u00e4m\u00e4 ylim\u00e4\u00e4r\u00e4iset tavut voivat kuluttaa loppuk\u00e4ytt\u00e4j\u00e4n arvokasta datam\u00e4\u00e4r\u00e4\u00e4.\n<\/p>\n
\n T\u00e4m\u00e4 ei kuitenkaan ole ainoa \u2013 eik\u00e4 edes paras \u2013 tapa tuottaa responsiivisia kuvia. Ensinn\u00e4kin kuva, joka toimii 800 pikseli\u00e4 leve\u00e4n\u00e4, ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 toimi yht\u00e4 hyvin t\u00e4m\u00e4n koon eri murto-osilla.\n<\/p>\n
\n T\u00e4m\u00e4n ratkaisemiseksi voit k\u00e4ytt\u00e4\u00e4 mediakysely\u00e4 kuvan eri versioiden n\u00e4ytt\u00e4miseen n\u00e4ytt\u00f6portin koosta riippuen k\u00e4ytt\u00e4m\u00e4ll\u00e4 mediakysely\u00e4 ja n\u00e4ytt\u00f6\u00e4: ei mit\u00e4\u00e4n.\n<\/p>\n
\n CSS:<\/strong>\n<\/p>\n@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n HTML:<\/strong>\n<\/p>\n<img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/>\n<img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/><\/code><\/pre>\n\n N\u00e4in voit n\u00e4ytt\u00e4\u00e4 kuvan eri versioita saman kuvan eri kokojen sijaan. Se ei kuitenkaan v\u00e4henn\u00e4 tavujen m\u00e4\u00e4r\u00e4\u00e4. Itse asiassa sivun kokonaiskoko on suurempi, koska kaikki kuvat ladataan riippumatta siit\u00e4, n\u00e4ytet\u00e4\u00e4nk\u00f6 ne vai eiv\u00e4t.\n<\/p>\n
\n Parempi vaihtoehto \u2013 jos se on k\u00e4yt\u00e4nn\u00f6llist\u00e4 \u2013 on k\u00e4ytt\u00e4\u00e4 taustakuvia elementtien sijaan. <img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/><\/code>T\u00e4m\u00e4 on suositeltavaa, koska CSS:ss\u00e4 viitatut kuvat ladataan vain, jos niit\u00e4 k\u00e4ytet\u00e4\u00e4n (niin kauan kuin ne eiv\u00e4t ole data-URI:ita):\n<\/p>\n@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n\n T\u00e4m\u00e4 toimii hyvin: vierailijat lataavat vain tarvitsemansa kuvat, milloin ja milloin he tarvitsevat niit\u00e4. Ongelmana on, ett\u00e4 se on ep\u00e4siisti ja k\u00e4sittelee sis\u00e4lt\u00f6\u00e4 tehokkaasti tyylin\u00e4. Sellaisenaan se saattaa aiheuttaa yll\u00e4pidett\u00e4vyysongelman ja saattaa my\u00f6s johtaa siihen, ett\u00e4 hakukoneet j\u00e4tt\u00e4v\u00e4t huomioimatta t\u00e4rkeit\u00e4 kuvia.\n<\/p>\n
\n Mikset sen sijaan k\u00e4ytt\u00e4isi SVG:t\u00e4 (skaalautuva vektorigrafiikka): kuvamuoto, joka skaalautuu luonnostaan? SVG-kuvilla on my\u00f6s se etu, ett\u00e4 ne on helppo muotoilla CSS:n avulla (katso t\u00e4m\u00e4 loistava opetusohjelma<\/a> SVG-tiedostojen tekemisest\u00e4 reagoiviksi CSS:n avulla). T\u00e4m\u00e4 sopii mainiosti kuvakkeille ja logoille, mutta valitettavasti et voi k\u00e4ytt\u00e4\u00e4 SVG-tiedostoja valokuviin \u2013 n\u00e4it\u00e4 varten sinun on turvauduttava rasterimuotoihin, kuten JPEG.\n<\/p>\n\n Toinen vaihtoehto on k\u00e4ytt\u00e4\u00e4 yht\u00e4 useista JavaScript-ratkaisuista reagoivien kuvien toimittamiseen. T\u00e4m\u00e4 on suosittu tapa tehd\u00e4 se, mutta se lis\u00e4\u00e4 toisen kerroksen monimutkaisuutta. Lis\u00e4ksi koska JavaScript est\u00e4\u00e4 DOM-rakentamisen, mik\u00e4 tahansa JavaScripti\u00e4 k\u00e4ytt\u00e4v\u00e4 ratkaisu voi hidastaa render\u00f6inti\u00e4. Joten vaikka siell\u00e4 on joitain eritt\u00e4in fiksuja laajennuksia, vain lis\u00e4\u00e4m\u00e4ll\u00e4 JavaScriptin yht\u00e4l\u00f6\u00f6n, olet jossain m\u00e4\u00e4rin alistumassa pienemp\u00e4\u00e4n kahdesta pahasta.\n<\/p>\n
\n Viime aikoihin asti n\u00e4m\u00e4 olivat ainoat vaihtoehdot.\n<\/p>\n
\n Nyt kuitenkin elementit ja <source \/><\/code>sek\u00e4 attribuutit srcset ja sizes tuovat vihdoin todella reagoivia kuvia verkkoon. Uusi spesifikaatio alkaa my\u00f6s saada selaintukea, sill\u00e4 se tukee t\u00e4ysin Chromea ja Operaa ja tukee resoluution vaihtoa Safarissa. Kunnes muut selaimet saavat kiinni, on olemassa erinomainen JavaScript- polyfill<\/a>.\n<\/p>\n\n T\u00e4ss\u00e4 rohkeassa uudessa maailmassa voit k\u00e4ytt\u00e4\u00e4 srcseti\u00e4 luettelon kuvista, joista selain voi valita. Voit sitten k\u00e4ytt\u00e4\u00e4 mediakysely\u00e4 sizes-attribuutissa m\u00e4\u00e4ritt\u00e4\u00e4ksesi koon, jolla kuva n\u00e4ytet\u00e4\u00e4n. K\u00e4ytt\u00e4m\u00e4ll\u00e4 elementti\u00e4 yhdess\u00e4 mediakyselyjen kanssa yhden tai useamman elementin sis\u00e4ll\u00e4, voit m\u00e4\u00e4ritt\u00e4\u00e4 erilaisen kuvaalueen eri olosuhteisiin (esim. tiettyyn leveyteen asti k\u00e4yt\u00e4 kuvaa a, b tai c ja suurempiin kuvaportteihin kuvaa. x, y tai z). T\u00e4m\u00e4 on hy\u00f6dyllist\u00e4, jos sinun on toimitettava kuvasta rajattu versio k\u00e4ytt\u00e4jille, joilla on pieni n\u00e4ytt\u00f6.\n<\/p>\n