Bara ett lite märkligt bildfenomen

[ChristerE]

Temat "Twenty Seventeen" i WordPress är trevligt och fungerar bra för diverse webbplatser. Inget konstigt med bilden på hemsidan/startsidan, men när man klickar sig vidare i menyn så blir bilden (bilderna) suddiga. Detta händer med Microsoft Edge men fungerar korrekt med t ex Google Chrome. I Internet Explorer är det än mer konstigt, se längre ned.

Temat kan konfigureras på några olika sätt, men vanligt är att ett klick i menyn förminskar bilden till en låg och avlång bild i överkanten, och den blir då suddig/pixlig. Om webbläsarens fönster inte från början är maximerat blir bildens kvalitet korrekt bara genom att bredda fönstret, eller maximera det (oftats i alla fall).

Det kan finnas flera bilder som slumpas när man går till webbplatsen, och slumpas sen vid varje klick i menyn. Har man breddat fönstret och bilden får rätt kvalitet kan ett val i menyn göra nästa bild suddig igen, och det oavsett om det blir samma bild eller en annan.

Vet inte hur vanligt det är men antar att Internet Explorer fortfarande används av rätt många. När en uppladdad bild läggs till startsidan kan den samtidigt beskäras. Men det avser endast visningen, hela bilden finns kvar som den är. När man går till någon sida, med IE, så visas en "gömd del" av bilden, om den är beskuren. Förvillande, om man inte råkar känna till fenomenet. Bilden på startsidan anpassas inte heller korrekt.

Förväntar mig ingen lösning på detta, tycker bara att det är lite märkligt och skriver några rader om det. Det handlar förmodligen om kompatibiltet med hur någon standard följs. Men lite lustigt att bilderna blir i rätt kvalitet när webbläsarfönstret breddas, i Edge.

Några exempel, som jag hittat:
https://www.nybergshojden.se/

https://moppedistas.se/

http://www.skanegatan80.se/

http://www.kinesiskmat.se/

http://www.naturinorr.se/

 

Som sagt, förväntar mig ingen lösning, men skulle någon känna till någon smart modifiering så är den förstås välkommen.
 

[Pelle Penna]

Jag ser ingen skillnad på ex. nybergshöjden oavsett webbläsare. Edge, Chrome Opera. Småsuddigt hela tiden. Kanske för låg upplösning på bilden? Ser grusig ut även i mobilen??

[ChristerE]

6 timmar sedan, skrev Pelle Penna:

Jag ser ingen skillnad på ex. nybergshöjden oavsett webbläsare. Edge, Chrome Opera. Småsuddigt hela tiden. Kanske för låg upplösning på bilden? Ser grusig ut även i mobilen??

 

Är det kanske bilderna på startsidorna du jämför i de nämnda webbläsarna? Suddiga blir de alltså när du klickar dig vidare till övriga sidor, i Edge. Den låga, avlånga, bilden som tas i ett utsnitt från mitt på höjden från bilden på startsidan. (Så som det fungerar i det använda temat.)

 

Startsidans bild för Nybergshöjden kunde ha bättre upplösning, är tydligt för t ex parkbänken. Men den, och grus och gräs, blir suddigare på webbplatsens övriga sidor, i Edge. Breddar du sen fönstret (några millimeter) så återfår bilden kvaliteten från startsidan.
 

[jannejanne]

Jag har inga problem med bilderna. Alla ser utmärkta ut.

Möjligen soffan och bordet i BRF Nybergshöjden ser lite randiga ut.

Seamonkey 2.46 i Linux Mint 17.3 nVidia GTX 1060 3GB med Benq 27" i 1920x1080

Inga problem när jag klickar mig vidare i menyerna.

 

Tog fram en mobil Huawei Honor från 1997 och anslöt mig till mitt lokala nätverk.

Webbläsare ?

Webbläsaren såg ut som en planet med rund ring om i ett fönster på Honor.

 

Såg inga problem. Bara lite skillnader. Inga blomkrukor på kinamaten. Annan
moped i moppesiten, mycket mindre bildomfång=bara minkhuvudet hos naturfotografen, Kollade lite info i menyerna på en av BRFarna. Inga problem vad jag kunde se.

Redigerad 25 april, 2019 av jannejanne

[ChristerE]

17 timmar sedan, skrev jannejanne:

Jag har inga problem med bilderna. Alla ser utmärkta ut.

Möjligen soffan och bordet i BRF Nybergshöjden ser lite randiga ut.

Seamonkey 2.46 i Linux Mint 17.3 nVidia GTX 1060 3GB med Benq 27" i 1920x1080

Inga problem när jag klickar mig vidare i menyerna.

 

Tog fram en mobil Huawei Honor från 1997 och anslöt mig till mitt lokala nätverk.

Webbläsare ?

Webbläsaren såg ut som en planet med rund ring om i ett fönster på Honor.

 

Såg inga problem. Bara lite skillnader. Inga blomkrukor på kinamaten. Annan
moped i moppesiten, mycket mindre bildomfång=bara minkhuvudet hos naturfotografen, Kollade lite info i menyerna på en av BRFarna. Inga problem vad jag kunde se.

 

Du tycks inte använda Microsoft Edge, så inte så konstigt om bilderna ser okej ut.
Annan moped i moppesiten beror på att det finns flera bilder. Vem som visas slumpas när siten besöks, både för startsidan och för övriga sidor.
På alla sidor utom på startsidan används en "smal remsa" från mitten av bilden på startsidan. Förklarar minkhuvudet ifall det inte är startsidan du avser.
MS Internet Explorer har mer/andra problem än det suddiga, fel del av bilden ("remsan i mitten") används. 
Webbläsaren i mobilen från 1997 saknar förmodligen också stöd för en del nya funktioner. Så blir det annorlunda i den så är inte det så konstigt.

Pelle Penna har inte återkommit om det bara var bilden på startsidan han jämförde.

(Informationen om Edge, IE och startsidan/följande sidor, m m, finns i de tidigare inläggen.)

[.M]

Det verkar som att temat ger browsern flera bilder i olika storlekar att välja mellan, browsern skall visa den som är bäst lämpad för den skärmupplösning besökaren använder. Dessutom verkar det som att temat använder sig av css regeln object-fit, som har dåligt stöd i IE och edge. Så jag tror kombinationen av dessa två metoder kan göra att browsern inte riktigt klarar av av visa bilden på bästa möjliga vis.

[ChristerE]

På ‎2019‎-‎04‎-‎26 på 06:48, skrev .M:

Det verkar som att temat ger browsern flera bilder i olika storlekar att välja mellan, browsern skall visa den som är bäst lämpad för den skärmupplösning besökaren använder. Dessutom verkar det som att temat använder sig av css regeln object-fit, som har dåligt stöd i IE och edge. Så jag tror kombinationen av dessa två metoder kan göra att browsern inte riktigt klarar av av visa bilden på bästa möjliga vis.

 

Ja, det skapas bl a tumnagelbilder för att lättare hitta i "Media library". Men också, som du skriver, några olika storlekar för visning i browsern. Vad såg du som antydde det, hur drog du den slutsatsen?

Helt korrekt, temat använder också object-fit. Det tog ett tag innan jag hittade den informationen. Fenomenet jag sökte en förklaring till var att den avlånga bilden i sidhuvudet på alla undersidor blir suddig, i Edge, och att den rättar till sig när man breddar webbläsarfönstret någon millimeter.

Googlade "Twenty Seventeen" och "blurry" men hittade ingen förklaring. Sökte en hel del och hittade sen information om object-fit och problem med IE och Edge. Sökning på object-fit gav då många träffar från tiden då "Twenty Seventeen" var nytt, och diverse förslag på workarounds. Problemet med Edge sägs vara löst från version 16, men bilderna i undersidornas sidhuvuden blir fortfarande suddiga. Har kollat i flera datorer.

I IE blir inte bilderna suddiga, varken på undersidorna eller på startsidan, men IE kan inte hantera object-fit så bilderna anpassas inte efter storleken på skärmen/webbläsarfönstret. Bilden på undersidorna tas i IE från underkanten från bilden på startsidan (ska vara från mitten), och har bilden på startsidan beskurits i underkanten i Wordpress visar undersidorna delar av den uppladdade startsidans bild som inte visas på startsidan.

Problemet som finns i IE verkar ju vara löst i Edge. Men varför blir då bilderna på undersidorna suddiga och varför rättar de till sig när webbläsarfönstret breddas en aning (eller mycket). Mycket information går att hitta om object-fit, men jag hittar nästan inget om de suddiga bilderna på undersidorna.

Först lite missförstånd om responsiva webbplatser och mobilanpassning, men senare står det:
"Hi there – after some investigation, it seems like this is a known issue in Twenty Seventeen"
https://en.forums.wordpress.com/topic/enable-mobile-theme-on-twenty-seventeen/

Följande information är i alla fall överens om bilder.

 

"The numbers in the table specify the first browser version that fully supports the property."
https://www.w3schools.com/css/css3_object-fit.asp

"Edge 16 has finally implemented object-fit. Unfortunately just for image elements:"
https://github.com/TricomB2B/object-fit-videos/issues/10

Edge 16 does support object-fit for images, but not videos.
https://github.com/Modernizr/Modernizr/issues/2262

Så frågan kvarstår, varför blir bilderna i undersidornas sidhuvuden suddiga.
 

[ChristerE]

Edge är nu uppdaterad i min dator också, till versionen som bygger på Chromium. Och nu är det beskrivna fenomenet borta. Inte så konstigt när det är en annan motor för renderingen, men nu slipper jag i alla fall störa mig på det. ?