[et_pb_section fb_built=”1″ _builder_version=”4.27.4″ _module_preset=”default” background_color=”RGBA(38,38,38,0)” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_row _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_column type=”4_4″ _builder_version=”4.27.2″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text _builder_version=”4.27.4″ _module_preset=”default” text_font=”–et_global_body_font|–et_global_body_font_weight|||||||” header_font=”–et_global_heading_font|–et_global_heading_font_weight|||||||” header_text_align=”left” header_2_font=”–et_global_heading_font|–et_global_heading_font_weight|||||||” header_3_font=”–et_global_heading_font|–et_global_heading_font_weight|||||||” text_orientation=”justified” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” text_text_color=”#F6F6F6″ background_layout=”dark” sticky_enabled=”0″]<\/p>\n
A k\u00e9pek fontos szerepet j\u00e1tszanak a modern weboldalak vizu\u00e1lis megjelen\u00e9s\u00e9ben \u00e9s a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny alak\u00edt\u00e1s\u00e1ban. Azonban a nem megfelel\u0151en optimaliz\u00e1lt k\u00e9pek lass\u00fa bet\u00f6lt\u00e9st \u00e9s t\u00falzott adatforgalmat okozhatnak, ami rontja a weboldal teljes\u00edtm\u00e9ny\u00e9t, \u00e9s kedvez\u0151tlen\u00fcl hathat a keres\u0151optimaliz\u00e1l\u00e1sra is. Az al\u00e1bbiakban azt r\u00e9szletezem, hogy mi\u00e9rt sz\u00fcks\u00e9ges a k\u00e9peket weboldalra optimaliz\u00e1lni, illetve \u00e9n milyen megold\u00e1sokat alkalmazok a weboldalak k\u00e9sz\u00edt\u00e9sekor.<\/p>\n
<\/p>\n
A nagy m\u00e9ret\u0171 k\u00e9pek lass\u00edtj\u00e1k a weboldalak bet\u00f6lt\u00e9s\u00e9t, k\u00fcl\u00f6n\u00f6sen mobilk\u00e9sz\u00fcl\u00e9keken, ahol az adatforgalom is korl\u00e1tozott lehet. Ez\u00e9rt fontos a k\u00e9p m\u00e9ret\u00e9nek cs\u00f6kkent\u00e9se a a kevesebb adatforgalom felhaszn\u00e1l\u00e1sa miatt \u00e9s a bet\u00f6lt\u00e9si sebess\u00e9g n\u00f6vel\u00e9s\u00e9nek \u00e9rdek\u00e9ben<\/p>\n
Form\u00e1tum:<\/strong> A k\u00e9pform\u00e1tum kiv\u00e1laszt\u00e1sa l\u00e9nyeges szempont. A JPEG form\u00e1tum ide\u00e1lis fot\u00f3khoz, m\u00edg a PNG aj\u00e1nlott \u00e1tl\u00e1tsz\u00f3 h\u00e1tteret ig\u00e9nyl\u0151 grafik\u00e1khoz. Azonban a modernebb WebP \u00e9s AVIF form\u00e1tumok azonos min\u0151s\u00e9g mellett j\u00f3val kisebb f\u00e1jlm\u00e9retet biztos\u00edtanak, ez\u00e9rt sok esetben \u00e9rdemes ezeket v\u00e1lasztani, ugyanis ezek kiv\u00e1l\u00f3 t\u00f6m\u00f6r\u00edt\u00e9st biztos\u00edtanak a min\u0151s\u00e9g meg\u0151rz\u00e9se mellett. P\u00e9ld\u00e1ul a WebP form\u00e1tum ak\u00e1r 25-30%-kal kisebb f\u00e1jlm\u00e9retet biztos\u00edt, mint a PNG vagy a JPEG.<\/p>\n Felbont\u00e1s<\/strong>: Figyelni kell arra, hogy a k\u00e9p felbont\u00e1sa igazodjon a megjelen\u00e9shez. A t\u00fal nagy k\u00e9pek lass\u00edtj\u00e1k a weboldalt, m\u00edg a t\u00fal kicsi k\u00e9pek pixelesnek t\u0171nhetnek. \u00c9rdemes a k\u00e9peket az adott elhelyez\u00e9s szerinti m\u00e9retre v\u00e1gni \u00e9s a megfelel\u0151 felbont\u00e1st haszn\u00e1lni.<\/p>\n K\u00e9pek t\u00f6m\u00f6r\u00edt\u00e9se:<\/strong> Fontos megtal\u00e1lni a megfelel\u0151 t\u00f6m\u00f6r\u00edt\u00e9si szintet, hogy a k\u00e9p min\u0151s\u00e9ge megmaradjon, de a f\u00e1jlm\u00e9ret a lehet\u0151 legkisebb legyen. T\u00falzott t\u00f6m\u00f6r\u00edt\u00e9s eset\u00e9n a k\u00e9p hom\u00e1lyoss\u00e1 vagy pixeles hat\u00e1s\u00fav\u00e1 v\u00e1lhat, m\u00edg alacsony t\u00f6m\u00f6r\u00edt\u00e9s eset\u00e9n a m\u00e9rete t\u00fal nagy lesz. A tesztel\u00e9s \u00e9s finomhangol\u00e1s r\u00e9v\u00e9n \u00e9rhetj\u00fck el, hogy a k\u00e9p a k\u00edv\u00e1nt megjelen\u00e9st ny\u00fajtsa.<\/p>\n A k\u00e9pek SEO-optimaliz\u00e1l\u00e1sa hozz\u00e1j\u00e1rulhat ahhoz, hogy a weboldalad k\u00f6nnyebben megtal\u00e1lhat\u00f3 legyen a keres\u0151k sz\u00e1m\u00e1ra, k\u00fcl\u00f6n\u00f6sen a k\u00e9palap\u00fa keres\u00e9sekn\u00e9l. A k\u00e9pek megfelel\u0151 optimaliz\u00e1l\u00e1sa t\u00f6bbf\u00e9lek\u00e9ppen is t\u00e1mogatja a jobb helyez\u00e9seket a Google \u00e9s m\u00e1s keres\u0151motorok tal\u00e1lati list\u00e1j\u00e1n.<\/p>\n Mivel a keres\u0151motorok nem \u201el\u00e1tj\u00e1k\u201d a k\u00e9pek tartalm\u00e1t, ez\u00e9rt fontos a helyes f\u00e1jln\u00e9v, a c\u00edm \u00e9s a le\u00edr\u00e1s megad\u00e1sa. Az alternat\u00edv sz\u00f6vegek (alt text) k\u00fcl\u00f6n\u00f6sen fontosak, hiszen nemcsak a keres\u0151motorok sz\u00e1m\u00e1ra teszik \u00e9rtelmezhet\u0151v\u00e9 a k\u00e9pet, de a l\u00e1t\u00e1ss\u00e9r\u00fclt felhaszn\u00e1l\u00f3knak is seg\u00edtenek a k\u00e9pek tartalm\u00e1nak megismer\u00e9s\u00e9ben. A k\u00e9pelnevez\u00e9s\u00e9ben is hasznos, ha kulcsszavakat haszn\u00e1lsz. Ez k\u00fcl\u00f6n\u00f6sen k\u00e9palap\u00fa keres\u00e9sek sor\u00e1n jav\u00edthatja az indexel\u00e9st.<\/p>\n A fenti szempontokon t\u00fal vannak egy\u00e9b m\u00f3dszerek is, amelyek tov\u00e1bb optimaliz\u00e1lhatj\u00e1k a weboldalon l\u00e9v\u0151 k\u00e9peket, \u00e9s az oldal teljes\u00edtm\u00e9ny\u00e9t.<\/p>\n A gyors\u00edt\u00f3t\u00e1raz\u00e1s lehet\u0151v\u00e9 teszi, hogy a visszat\u00e9r\u0151 l\u00e1togat\u00f3k b\u00f6ng\u00e9sz\u0151je ne t\u00f6ltse le \u00fajra a k\u00e9peket, \u00edgy sz\u00e1mukra javul a bet\u00f6lt\u00e9si sebess\u00e9g. A \u201elazy loading\u201d pedig egy olyan technika, amely sor\u00e1n a k\u00e9pek csak akkor t\u00f6lt\u0151dnek be, amikor a felhaszn\u00e1l\u00f3 a k\u00e9phez g\u00f6rget az oldalon. Ez jelent\u0151sen cs\u00f6kkentheti az oldal els\u0151 bet\u00f6lt\u00e9s\u00e9nek idej\u00e9t, k\u00fcl\u00f6n\u00f6sen k\u00e9pekben gazdag oldalak (p\u00e9ld\u00e1ul gal\u00e9ri\u00e1k) eset\u00e9n.<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":" Images play an important role in the visual appearance of websites and in shaping the user experience, so optimising them is key.<\/p>","protected":false},"author":1,"featured_media":3815,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[8],"tags":[20,21,13],"dipi_cpt_category":[],"class_list":["post-2430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogbejegyzes","tag-kepek","tag-optimalizalas","tag-weboldalak"],"yoast_head":"\nK\u00e9pek keres\u0151optimaliz\u00e1l\u00e1sa<\/h2>\n
Egy\u00e9b tr\u00fckk\u00f6k<\/h3>\n