Barion Pixel

Nem kell óriásplakát méretű kép a weboldaladra!

Mert ha egy atomerőmű van alatta, se fog betölteni vállalható időn belül

 

Hogy tudd, hogy egy kijelző mekkora pixelben:

Asztali kijelzők leggyakoribb felbontásai

1366×768
1536×864
1920×1080

Mobil kijelzők leggyakoribb felbontásai

360×640
375×667
414×896

Tablet kijelzők leggyakoribb felbontásai

768×1024
1280×800
800×1280

Ezekből kitűnik, hogy egy 2000px feletti kép indokolatlan.

Honnan tudom mekkora egy kép?

Ha már le van töltve, ráviszed az egeret és megmutatja neked ezeket a fontos infókat:

kepek optimlizalasa kicsi
kepek optimlizalasa nagy

 

A második minden szempontból indokolatlanul nagy.

Mi a teendő?

Optimalizálj! Azaz vedd kisebbre a pixelszámokat és tömörítsd a megabájtokat. Itt most a Retina Readybe nem  mennék bele, mert Almája még mindig kevesebb embernek van kis hazánkban, mint Windows-a.

Mi az optimális?

Ha a teljes képernyőt szeretné elfoglalni a kép, mert háttérkép:

1920-szor tetszőleges – fontos, hogy kB-ban 100-150 kB körül legyen. (1 [MB] = 1024 [kB] 1 [GB] = 1024 [MB])

Exportáld ki a képszerkesztőből nem maximális felbontásban JPG formátumban (a PNG csak akkor kell ha áttetsző háttérrel szeretnéd), majd a https://tinypng.com/ -ra feltöltve tömörítsd. Csodákra képes!

tinypng

Féloldalas állókép

700x tetszőleges.

Féloldalas fekvőkép

1200x tetszőleges.

Termékkép webshopba

1000×1000.

Bejegyzés borítókép (cover vagy featured):

1200×628

(ez az ami megjelenik ha belinkeled valahova a bejegyzést.)

Itt arra kell még figyelni, hogy az ún. Safety zone a közepén lévő 628×628-as négyzetben van, tehát ez a rész tutibiztosan megjelenik mindenhol. A Facebook a a két szélét levágja sokszor. És az béna ha pont a szövegbe, képbe vág bele.

SAFFETY ZONE

Online, ingyenes képszerkesztő program például:

https://pixlr.com/x/

A képek elnevezése

Szorosan a témához kapcsolódik, hogy a képeknek legyen rendes nevük. ne Artboard meg wallpaper meg mittomén mi :), hanem úgy nevezd el,a hogy szeretnéd, hogy megtalálják a keresőben.

Az helyettesítő szöveget (másnéven alt attribútumot) is ajánlott kitölteni, amit itt találsz:

alt tag

Ide azt írd be ami a képen van. Ha üresen hagyod, akkor a RankMath nevű SEO plugin(bővítmény) úgy helyezi be ami a kép neve.