Homályos háttérképek javítása mobilon

Ha a képek csak mobilon néznek ki életlenül, valószínűleg CSS-háttérképek. A böngészők a háttérképekhez nem adnak megbízható megjelenítési méretet, ezért az adaptív képek funkció nem mindig tudja kiválasztani a megfelelő méretet.

Gyors javítás (kb. 2 perc)

1. Nyisd meg a WP Compress felületét, és válaszd az Image Optimization lapot.
2. Az adaptív képeknél (Adaptive Images) nyisd meg a Resize by Incoming Device beállítást a fogaskerék ikonnal.
3. A Minimum mobile image width (minimális mobil képszélesség) értéke legyen 800 px.
4. Mentsd el, majd ürítsd a gyorsítótárakat, és frissítsd az oldalt kényszerítve (Ctrl+Shift+R).

A nagy Exclude from Adaptive (kizárás az adaptívból) mezőt hagyhatod üresen, ide semmit nem kell írni.

Miért segít?

• A CSS-háttérkép nem jelez saját méretet, ezért az adaptív funkció nem tudja megbízhatóan megállapítani, mekkorán jelenik meg mobilon.
• A minimális mobil szélesség beállításával mindig elég nagy változat kerül kiszolgálásra, így nincs homály, de a fájlok kicsik maradnak.
• Az alapérték 400 px. Bizonyos képarányoknál ennél nagyobb érték kell.

Tippek

• Kezdd 800 px-szel, és csak fokozatosan növeld, ha egy háttérkép még mindig életlen.
• Ne állítsd feleslegesen magasra, mert növeli a mobil adatforgalmat.
• A beállítás a hagyományos <img> képeket nem érinti, főleg a CSS-háttérképeken segít.