Olen viime viikot siivonnut sivujeni karkeimpia virheitä urakalla. Nyt esimerkiksi kaikki sivuni saavat Googlen mobiilitestissä arvion: Sivu on mobiiliystävällinen
Tämän sivun käyttö mobiililaitteella on helppoa. - Kun aluksi ei suostunut antamaan minkäänlaista raporttia.
Mutta jokaisella sivulla on ongelmana se, että Google kertoo, että Ongelmia sivun lataamisessa. Ja kun katsoo tarkemmin, niin tämä näyttää koskevan kuvia.
Löytyykö minkäänlaista tyylitiedosto-määrittelyä, joka poistaisi tämän ongelman?
Esimerkkisivu:
https://search.google.com/test/mobile-friendly?id=rSDGcUNCgMKnxsGfINzWlQ
Ei ole hirveästi tähän hätään aikaa tarkemmin tutkia, mistä voisi johtua, mutta oletan, että kuvasi ovat järkyttävän suuria, minkä takia mobiililaite ei niitä halua lukea.
Suosittelen myös selvyyden vuoksi hieman järjestelemään tiedostoja. Itse en pystyisi työskentelemään projektin parissa, missä esimerkiksi koiraan liittyvät tyylitiedostot, kuvat, html-tiedostot ynnämuut ovat ilman järkevää nimeämistä läntätty sikinsokin.
En siis kerennyt nyt katsomaan tarkemmin, joten arvaukseni voi olla täysin vääräkin. Jossei muita vastauksia ole tullut iltaan mennessä, niin tarkastelen hieman lisää töistä päästyäni.
Kuvathan ovat sivuillani isoja, mutta eikös juuri niiden kuitenkin pitäisi skaalautua responsiivisesti. Sinänsä olet kyllä ehkä oikeassa, sillä kun katsoin borneonkissaani, jossa on yksi ainut pieni kuva, niin ei latausongelmia. Ja kun katsoin jaguaaria, jossa runsaasti kuvia, niin latausongelmia. Voisiko tätä ongelmaa jotenkin muuten korjata, kuin kuvat pienentämällä, sillä se ei onnistu.
Sinänsä tuo Googlen arvio on silleen outo, että kun katselen mitä hyvänsä sivujani älypuhelimella, niin kaikki näkyvät hienosti. Yleensä täytyy vain kääntää puhelin vaakaan. Katseltiin viikonloppuna täällä sivujani useammilla puhelimilla eikä ongelmia.
Kiitokset vastauksestasi morderca.
Tunturisusi kirjoitti:
Kuvathan ovat sivuillani isoja, mutta eikös juuri niiden kuitenkin pitäisi skaalautua responsiivisesti.
Ei ei ei. Moderni tapa olisi tarjoilla isoista kuvista pienempiä versioita.
Isot kuvat ovat isoja, vaikka ne olisikin skaalattu selaimella pienemmiksi. Niiden vaatima kaista on edelleen iso. Siksi kuvista kannattaisikin tehdä useampi eri versio (automatisoida).
Tässä eräs tapa näyttää kuvia eri kokoisilla päätelaitteilla:
https://www.andreaverlicchi.eu/lazy-load-responsive-images-in-2019-srcset-sizes-more/
<!-- Immediately loaded, responsive image -->
<img
alt="Image 01"
src="https://via.placeholder.com/220x280?text=Img+01"
srcset="https://via.placeholder.com/220x280?text=Img+01 220w,
https://via.placeholder.com/440x560?text=Img+01 440w"
sizes="220px"
/>Kyselen taas tapani mukaisesti tyhmiä, mutta pitäisikö tuollaisella koodilla erikseen korvata jokainen kuva? Tuossa koodissa ei näy kuvan nimeäkään, vaan ainoastaan alt.
On hyvin mahdotonta kirjoittaa jokaisen kuvan koodi uusiksi, kun kuvia on runsaasti.
Kiitokset vastauksestasi Lebe80.
Tunturisusi kirjoitti:
Tuossa koodissa ei näy kuvan nimeäkään, vaan ainoastaan alt.
Mielestäni esimerkki on varsin "itseselitteinen". Siitä näkee miten srcset toimii ihan normaalissa img-tägissä.
Tunturisusi kirjoitti:
On hyvin mahdotonta kirjoittaa jokaisen kuvan koodi uusiksi, kun kuvia on runsaasti.
Tähän taas asia, joka jo aikaisemmin nousi esiin.
Kannattaisiko sivusto rakentaa niin, että tällaiset muutokset saisi muutettua yhdestä paikasta, jolloin se muuttuisi automaattisesti joka paikkaan?
Samalla tuo kuvien srcsettien tekemisen onnistuisi automatisoidusti niin, että palvelin vääntäisi kuvistasi automaattisesti määrittelemäsi koot.
Tunturisusi kirjoitti:
On hyvin mahdotonta kirjoittaa jokaisen kuvan koodi uusiksi, kun kuvia on runsaasti.
Tee scripti esim. imageMagick:llä, joka tekee sen puolestasi.
Edit - Tosin Lebe80:n koodi taitaa niin tehdäkin.
peran kirjoitti:
Edit - Tosin Lebe80:n koodi taitaa niin tehdäkin.
Ei tuo kuin näytä kuvia, jos sellainen löytyy palvelimelta. Eli se ei automaattisesti muuta minkään kuvan kokoa, vaan kuvat pitää löytyä etukäteen.
Kuvattomat sivut todellakin latautuvat ilman ongelmia - vaikka eihän niillä ole paljon mitä latautuakaan.
Scriptiä ainuttakaan en ole koskaan kirjoittanut enkä koskaan opi/opettele kirjoittamaankaan. Ilman on selvittävä.
Kunpa olisi vauhdissa heittää tyylitiedostoon koodi, joka hoitelisi asian. ;)
No, tämä jää varmaan sitten tälleen tässä vaiheessa.
Kiitokset myös peran vastaukselle.
Jos ei scriptin tekeminen maistu, niin kyllä löytyy ohjelmia, jotka pystyvät tekemään massakokomuutoksia.
Itse vain tekisin sen scriptillä.
Massakoko-muutosohjelmien tekeminen on käyttöjärjestelmäriippuvaista, joten ennen niiden ehdottamista olisi hyvä tietää mitä käyttöjärjestelmää käytetään.
Lyhyesti: Missä käyttöjärjestelmässä on kuvat ja/tai nettisivut.
Sen jälkeen voi yksinkertaisella tekstieditorin replace-käskyllä antaa uudet kuvien nimet tyyliin...
etsi: .jpg"
korvaa: 600x480.jpg"
Tosin ennen muutoksia kannattaa sivut laittaa zip-pakettiin tai muuten vaan tehdä varmuuskopiot.
Lisäys:
Tunturisusi kirjoitti:
Scriptiä ainuttakaan en ole koskaan kirjoittanut enkä koskaan opi/opettele kirjoittamaankaan. Ilman on selvittävä.
Olemme kuitenkin ohjelmointifoorumilla ?
ImageMagick näyttäisi olevan mahdollisuus, koska se luo pienempiä versioita kerralla sadoista kuvista.
Mutta en osaa käyttää tällaista omin päin vaikka viikon pyörittelen. Tarkoitin edellä omaa rajallisuuttani, vaikka olemmekin ohjelmointifoorumilla.
Et ole vielä kertonut käyttämääsi käyttöjärjestlemää.
Ilman sitä on varsin hankala ehdottaa toista ohjelmaa, jolla kyseisen operaation voisi tehdä.
Ai en huomannut, Windows 10. Selaimet Google Chrome ja Microsoft Edge.
Googlen mukaan löytyy tällainen linkki ...
Omalla vastuullasi, sillä itse en osaa käyttää Windowsia, eikä kyseiset ohjelmat ole minulle muutenkaan tuttuja.
Itse kuvien pienentäminen mobilekokoon näyttää tuolla tapahtuvan ohjeiden mukaan helposti. Sivullahan täytyy säilyä myös isommat kuvat isommille näytöille. Miten tuon pikkukuvan saa näkymään automaattisesti mobilelaitteessa? Jos tähän on jokin css-ratkaisu, niin yritän.
Kiitokset peran.
Tunturisusi kirjoitti:
Sivullahan täytyy säilyä myös isommat kuvat isommille näytöille. Miten tuon pikkukuvan saa näkymään automaattisesti mobilelaitteessa?
Voit tehdä jonkun js-kikkareen, joka domin valmistuttua käy kaikki kuvat läpi, mutta se on jotenkin nurinkurinen, jos sivustolla on high-reso -kuvat oletuksena. Se vie vähän pohjan koko mobiilioptimoinnilta.
Jos sivusto on tehty "staattiseksi", niin sitä on melko hankala muuttaa älykkääksi "yksinkertaisesti".
Eihän tuo vaatisi kuin kaikkien kuvien korvaamisen esim. php-fuktiolla, joka kaiken nämä kikat tekisi automaattisesti.
Äärimmäisessä tapauksessa voit tietysti tehdä myös palvelinskriptin, mikä käy html-tiedostoistasi kaikki kuvat läpi ja muuttaa staattisen html-sivun toiseksi html-sivuksi, jossa srcset -asetettuna jokaiseen kuvaan.
<!-- Immediately loaded, responsive image -->
<img
alt="Image 01"
src="https://via.placeholder.com/220x280?text=Img+01"
srcset="https://via.placeholder.com/220x280?text=Img+01 220w,
https://via.placeholder.com/440x560?text=Img+01 440w"
sizes="220px"
/>Aihe on jo aika vanha, joten et voi enää vastata siihen.