{"id":19547,"date":"2025-12-31T00:40:35","date_gmt":"2025-12-31T00:40:35","guid":{"rendered":"https:\/\/www.vipservis.com\/blog\/?p=19547"},"modified":"2025-12-31T00:41:20","modified_gmt":"2025-12-31T00:41:20","slug":"google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem","status":"publish","type":"post","link":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/","title":{"rendered":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem"},"content":{"rendered":"<article>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0130\u00e7indekiler<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #ff0f0f;color:#ff0f0f\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #ff0f0f;color:#ff0f0f\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Google_Hizli_Yukleme_Icin_Resim_Optimizasyonu_Web_Sitenizi_Hizlandiracak_7_Etkili_Yontem\" >Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Google_Hizli_Yukleme_Icin_Resim_Optimizasyonunun_Onemi\" >Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonunun \u00d6nemi<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Web_Sitesi_Hizinin_SEO_ve_Kullanici_Deneyimine_Etkisi\" >Web Sitesi H\u0131z\u0131n\u0131n SEO ve Kullan\u0131c\u0131 Deneyimine Etkisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Resimlerin_Sayfa_Yukleme_Suresine_Olan_Etkisi\" >Resimlerin Sayfa Y\u00fckleme S\u00fcresine Olan Etkisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Google_Core_Web_Vitals_ve_Resim_Optimizasyonu_Iliskisi\" >Google Core Web Vitals ve Resim Optimizasyonu \u0130li\u015fkisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Google_Hizli_Yukleme_Icin_Resim_Optimizasyonunun_Avantajlari\" >Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonunun Avantajlar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Sonuc\" >Sonu\u00e7<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Resim_Formatlarini_Dogru_Secmek\" >Resim Formatlar\u0131n\u0131 Do\u011fru Se\u00e7mek<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_JPEG_Joint_Photographic_Experts_Group\" >1. JPEG (Joint Photographic Experts Group)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_PNG_Portable_Network_Graphics\" >2. PNG (Portable Network Graphics)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_WebP_Googlein_Gelistirdigi_Modern_Format\" >3. WebP (Google\u2019\u0131n Geli\u015ftirdi\u011fi Modern Format)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_SVG_Scalable_Vector_Graphics\" >4. SVG (Scalable Vector Graphics)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Hangi_Formati_Ne_Zaman_Kullanmalisiniz_Karsilastirma_Tablosu\" >Hangi Format\u0131 Ne Zaman Kullanmal\u0131s\u0131n\u0131z? (Kar\u015f\u0131la\u015ft\u0131rma Tablosu)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Resim_Boyutlarini_Optimize_Etme_Yontemleri\" >Resim Boyutlar\u0131n\u0131 Optimize Etme Y\u00f6ntemleri<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_Dogru_Boyutlandirma_Gereksiz_Piksel_Yukunden_Kacinma\" >1. Do\u011fru Boyutland\u0131rma: Gereksiz Piksel Y\u00fck\u00fcnden Ka\u00e7\u0131nma<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_Sikistirma_Araclari_ve_En_Iyi_Uygulamalar\" >2. S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131 ve En \u0130yi Uygulamalar<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#En_Iyi_Sikistirma_Araclari\" >En \u0130yi S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_Responsive_Resimler_Farkli_Ekran_Boyutlari_Icin_Optimizasyon\" >3. Responsive Resimler: Farkl\u0131 Ekran Boyutlar\u0131 \u0130\u00e7in Optimizasyon<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_srcset_Ozelligi_ile_Cozunurluk_Tabanli_Yukleme\" >A. srcset \u00d6zelli\u011fi ile \u00c7\u00f6z\u00fcn\u00fcrl\u00fck Tabanl\u0131 Y\u00fckleme<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#HTML\" >HTML\n\n\n\n\n&lt;img src=\"small.jpg\"\r\n     srcset=\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\"\r\n     sizes=\"(max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px\"\r\n     alt=\"Responsive \u00d6rnek Resim\"&gt;\r\n\n\n\n\n&nbsp;<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Etiketi_ile_Format_Tabanli_Yukleme\" >B. &lt;picture&gt; Etiketi ile Format Tabanl\u0131 Y\u00fckleme<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#HTML-2\" >HTML\n\n\n\n\n&lt;picture&gt;\r\n  &lt;source srcset=\"gorsel.webp\" type=\"image\/webp\"&gt;\r\n  &lt;source srcset=\"gorsel.jpg\" type=\"image\/jpeg\"&gt; \r\n  &lt;img src=\"gorsel.jpg\" alt=\"Format Destekli Resim\"&gt;\r\n&lt;\/picture&gt;\r\n\n\n\n\n&nbsp;<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#C_CSS_ile_Esnek_Boyutlandirma\" >C. CSS ile Esnek Boyutland\u0131rma<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#CSS_img_max-width_100_height_auto\" >CSS\n\n\n\n\nimg {\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\n\n\n\n&nbsp;<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Avantajlari\" >Avantajlar\u0131:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_Otomatik_Optimizasyon_ve_CDN_Kullanimi\" >4. Otomatik Optimizasyon ve CDN Kullan\u0131m\u0131<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Otomatik_Optimizasyon_Araclari\" >Otomatik Optimizasyon Ara\u00e7lar\u0131:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#5_Ileri_Duzey_Optimizasyon_Teknikleri\" >5. \u0130leri D\u00fczey Optimizasyon Teknikleri<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Sonuc_ve_Oneriler\" >Sonu\u00e7 ve \u00d6neriler<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Lazy_Loading_ve_Resim_Yukleme_Stratejileri\" >Lazy Loading ve Resim Y\u00fckleme Stratejileri<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_Lazy_Loading_Nedir_ve_Nasil_Calisir\" >1. Lazy Loading Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_Lazy_Loading_Uygulama_Yontemleri\" >2. Lazy Loading Uygulama Y\u00f6ntemleri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_HTML_loading%22lazy%22_Ozelligi_En_Basit_Yontem\" >A. HTML\u00a0loading=\"lazy\"\u00a0\u00d6zelli\u011fi (En Basit Y\u00f6ntem)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Intersection_Observer_API_Gelismis_Yontem\" >B. Intersection Observer API (Geli\u015fmi\u015f Y\u00f6ntem)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-35\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#C_WordPress_ve_Diger_CMSler_Icin_Eklentiler\" >C. WordPress ve Di\u011fer CMS&#8217;ler \u0130\u00e7in Eklentiler<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-36\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_Critical_Images_Oncelikli_Resimler_Stratejisi\" >3. Critical Images (\u00d6ncelikli Resimler) Stratejisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-37\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_Placeholder_ve_Blur-Up_Teknikleri_ile_Kullanici_Deneyimi_Iyilestirme\" >4. Placeholder ve Blur-Up Teknikleri ile Kullan\u0131c\u0131 Deneyimi \u0130yile\u015ftirme<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-38\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Blur-Up_Teknigi\" >A. Blur-Up Tekni\u011fi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-39\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_LQIP_Low-Quality_Image_Placeholder\" >B. LQIP (Low-Quality Image Placeholder)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-40\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#5_Lazy_Loading_ve_SEO_Googlein_Onerileri\" >5. Lazy Loading ve SEO: Google&#8217;\u0131n \u00d6nerileri<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-41\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#6_Lazy_Loadingin_Avantajlari_ve_Dezavantajlari\" >6. Lazy Loading&#8217;in Avantajlar\u0131 ve Dezavantajlar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-42\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#7_En_Iyi_Uygulamalar_ve_Son_Oneriler\" >7. En \u0130yi Uygulamalar ve Son \u00d6neriler<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-43\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#CDN_ve_Resim_Dagitim_Stratejileri\" >CDN ve Resim Da\u011f\u0131t\u0131m Stratejileri<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-44\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_CDN_Nedir_ve_Nasil_Calisir\" >1. CDN Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-45\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_CDNin_Resim_Optimizasyonuna_Etkisi\" >2. CDN&#8217;in Resim Optimizasyonuna Etkisi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-46\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_En_Iyi_CDN_Saglayicilari_ve_Resim_Optimizasyonu_Ozellikleri\" >3. En \u0130yi CDN Sa\u011flay\u0131c\u0131lar\u0131 ve Resim Optimizasyonu \u00d6zellikleri<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-47\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_Resimlerin_Cografi_Konuma_Gore_Optimize_Edilmesi\" >4. Resimlerin Co\u011frafi Konuma G\u00f6re Optimize Edilmesi<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-48\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#5_CDN_ve_Resim_Optimizasyonu_Icin_En_Iyi_Uygulamalar\" >5. CDN ve Resim Optimizasyonu \u0130\u00e7in En \u0130yi Uygulamalar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-49\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#6_CDN_ve_Resim_Optimizasyonu_Icin_Son_Oneriler\" >6. CDN ve Resim Optimizasyonu \u0130\u00e7in Son \u00d6neriler<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-50\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Otomatik_Optimizasyon_Araclari_ve_Eklentileri\" >Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-51\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_WordPress_Icin_En_Iyi_Resim_Optimizasyon_Eklentileri\" >1. WordPress \u0130\u00e7in En \u0130yi Resim Optimizasyon Eklentileri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-52\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Smush\" >A. Smush<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-53\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_ShortPixel\" >B. ShortPixel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-54\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#C_EWWW_Image_Optimizer\" >C. EWWW Image Optimizer<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-55\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_Googlein_Onerdigi_Resim_Optimizasyon_Araclari\" >2. Google\u2019\u0131n \u00d6nerdi\u011fi Resim Optimizasyon Ara\u00e7lar\u0131<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-56\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Squoosh_Google_tarafindan_gelistirildi\" >A. Squoosh (Google taraf\u0131ndan geli\u015ftirildi)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-57\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_PageSpeed_Insights\" >B. PageSpeed Insights<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-58\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_API_Tabanli_Otomatik_Optimizasyon_Cozumleri\" >3. API Tabanl\u0131 Otomatik Optimizasyon \u00c7\u00f6z\u00fcmleri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-59\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Cloudinary\" >A. Cloudinary<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-60\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Imgix\" >B. Imgix<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-61\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_Otomatik_Optimizasyon_Araclari_ve_Eklentileri_Icin_En_Iyi_Uygulamalar\" >4. Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri \u0130\u00e7in En \u0130yi Uygulamalar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-62\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#5_Otomatik_Optimizasyon_Araclari_ve_Eklentileri_Icin_Son_Oneriler\" >5. Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri \u0130\u00e7in Son \u00d6neriler<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-63\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#Ileri_Duzey_Resim_Optimizasyon_Teknikleri\" >\u0130leri D\u00fczey Resim Optimizasyon Teknikleri<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-64\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#1_Next-Gen_Resim_Formatlari_ve_Uygulama_Yontemleri\" >1. Next-Gen Resim Formatlar\u0131 ve Uygulama Y\u00f6ntemleri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-65\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_AVIF_AV1_Image_File_Format\" >A. AVIF (AV1 Image File Format)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-66\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_WebP2_WebPnin_Gelismis_Versiyonu\" >B. WebP2 (WebP&#8217;nin Geli\u015fmi\u015f Versiyonu)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-67\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#2_Resimlerin_Onbellekleme_Stratejileri\" >2. Resimlerin \u00d6nbellekleme Stratejileri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-68\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Tarayici_Onbellekleme_Browser_Caching\" >A. Taray\u0131c\u0131 \u00d6nbellekleme (Browser Caching)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-69\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Sunucu_Tarafi_Onbellekleme\" >B. Sunucu Taraf\u0131 \u00d6nbellekleme<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-70\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#3_AI_Tabanli_Resim_Optimizasyonu_ve_Gelecek_Trendleri\" >3. AI Tabanl\u0131 Resim Optimizasyonu ve Gelecek Trendleri<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-71\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_AI_Tabanli_Sikistirma_Araclari\" >A. AI Tabanl\u0131 S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-72\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_AI_Tabanli_Resim_Boyutlandirma\" >B. AI Tabanl\u0131 Resim Boyutland\u0131rma<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-73\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#4_Resimlerin_Onceden_Yuklenmesi_Preloading\" >4. Resimlerin \u00d6nceden Y\u00fcklenmesi (Preloading)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-74\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Kullanimi\" >A. &lt;link rel=\"preload\"&gt; Kullan\u0131m\u0131<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-75\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#HTML-3\" >HTML\n\n\n\n\n&lt;link rel=\"preload\" as=\"image\" href=\"anasayfa-banner.jpg\" type=\"image\/jpeg\"&gt;\r\n\r\n&lt;link rel=\"preload\" as=\"image\" href=\"banner-mobil.jpg\" media=\"(max-width: 600px)\"&gt;\r\n&lt;link rel=\"preload\" as=\"image\" href=\"banner-desktop.jpg\" media=\"(min-width: 601px)\"&gt;\r\n\n\n\n\n&nbsp;<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-76\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_HTTP2_Sunucu_Itmesi_Server_Push\" >B. HTTP\/2 Sunucu \u0130tmesi (Server Push)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-77\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#5_Resimlerin_Gecikmeli_Yuklenmesi_Deferred_Loading\" >5. Resimlerin Gecikmeli Y\u00fcklenmesi (Deferred Loading)<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-78\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#A_Intersection_Observer_API\" >A. Intersection Observer API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-79\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Placeholder_Stratejileri\" >B. Placeholder Stratejileri<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-80\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#B_Cihaz_Tabanli_Optimizasyon_Donanim_Gucu_Algilama\" >B. Cihaz Tabanl\u0131 Optimizasyon (Donan\u0131m G\u00fcc\u00fc Alg\u0131lama)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-81\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#JavaScript_Cihazin_RAM_miktarini_kontrol_et_GB_cinsinden_const_memory_navigatordeviceMemory_4_Tarayici_desteklemiyorsa_varsayilan_4GB_kabul_et_const_cpuCores_navigatorhardwareConcurrency_4_Islemci_cekirdek_sayisi_if_memory_%3C_2_cpuCores_%3C_4_Dusuk_donanimli_cihaz_Low-End_Device_Animasyonlari_kapat_WebP_formatinda_sikistirilmis_daha_kucuk_gorsel_yukle_loadSimpleImageproduct-smallwebp_else_Yuksek_donanimli_cihaz_High-End_Device_Yuksek_cozunurluklu_zoom_yapilabilen_veya_animasyonlu_gorsel_yukle_loadHighResImageproduct-4kpng\" >JavaScript\n\n\n\/\/ Cihaz\u0131n RAM miktar\u0131n\u0131 kontrol et (GB cinsinden)\r\nconst memory = navigator.deviceMemory || 4; \/\/ Taray\u0131c\u0131 desteklemiyorsa varsay\u0131lan 4GB kabul et\r\nconst cpuCores = navigator.hardwareConcurrency || 4; \/\/ \u0130\u015flemci \u00e7ekirdek say\u0131s\u0131\r\n\r\nif (memory &lt; 2 || cpuCores &lt; 4) {\r\n  \/\/ D\u00fc\u015f\u00fck donan\u0131ml\u0131 cihaz (Low-End Device):\r\n  \/\/ Animasyonlar\u0131 kapat, WebP format\u0131nda s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f, daha k\u00fc\u00e7\u00fck g\u00f6rsel y\u00fckle\r\n  loadSimpleImage('product-small.webp');\r\n} else {\r\n  \/\/ Y\u00fcksek donan\u0131ml\u0131 cihaz (High-End Device):\r\n  \/\/ Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc, zoom yap\u0131labilen veya animasyonlu g\u00f6rsel y\u00fckle\r\n  loadHighResImage('product-4k.png');\r\n}<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-82\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#7_Resimlerin_Otomatik_Optimizasyonu_icin_En_Iyi_Uygulamalar\" >7. Resimlerin Otomatik Optimizasyonu i\u00e7in En \u0130yi Uygulamalar<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"Google_Hizli_Yukleme_Icin_Resim_Optimizasyonu_Web_Sitenizi_Hizlandiracak_7_Etkili_Yontem\"><\/span>Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div class=\"content\">\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Google_Hizli_Yukleme_Icin_Resim_Optimizasyonunun_Onemi\"><\/span>Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonunun \u00d6nemi<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p>Web sitelerinin h\u0131zl\u0131 y\u00fcklenmesi, hem kullan\u0131c\u0131 deneyimi hem de arama motoru s\u0131ralamalar\u0131 i\u00e7in kritik \u00f6neme sahiptir. Google, kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131 ve sorunsuz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flamak amac\u0131yla sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli bir s\u0131ralama fakt\u00f6r\u00fc olarak de\u011ferlendirmektedir. Bu noktada,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong>, web sitelerinin performans\u0131n\u0131 art\u0131rmak ad\u0131na at\u0131labilecek en etkili ad\u0131mlardan biridir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Web_Sitesi_Hizinin_SEO_ve_Kullanici_Deneyimine_Etkisi\"><\/span>Web Sitesi H\u0131z\u0131n\u0131n SEO ve Kullan\u0131c\u0131 Deneyimine Etkisi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google\u2019\u0131n algoritmalar\u0131, kullan\u0131c\u0131lar\u0131n bir web sitesinde ge\u00e7irdi\u011fi s\u00fcreyi ve etkile\u015fim d\u00fczeyini dikkate al\u0131r. Yava\u015f y\u00fcklenen bir site, ziyaret\u00e7ilerin hemen \u00e7\u0131kma oran\u0131n\u0131 (bounce rate) art\u0131r\u0131r ve bu da SEO performans\u0131n\u0131 olumsuz etkiler. Ara\u015ft\u0131rmalar, bir sayfan\u0131n y\u00fckleme s\u00fcresinin 1 saniyeden 3 saniyeye \u00e7\u0131kmas\u0131 durumunda, kullan\u0131c\u0131lar\u0131n siteyi terk etme olas\u0131l\u0131\u011f\u0131n\u0131n %32\u2019ye kadar artabilece\u011fini g\u00f6stermektedir.<\/p>\n<p>Google\u2019\u0131n<span>\u00a0<\/span><strong>Core Web Vitals<\/strong><span>\u00a0<\/span>metrikleri aras\u0131nda yer alan<span>\u00a0<\/span><strong>Largest Contentful Paint (LCP)<\/strong>, bir sayfadaki en b\u00fcy\u00fck g\u00f6rsel veya metin blo\u011funun ne kadar s\u00fcrede y\u00fcklendi\u011fini \u00f6l\u00e7er. Resimler genellikle LCP\u2019yi etkileyen en \u00f6nemli unsurlardan biridir. Bu nedenle,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong>, LCP skoru \u00fczerinde do\u011frudan bir etkiye sahiptir ve dolay\u0131s\u0131yla SEO s\u0131ralamalar\u0131n\u0131 iyile\u015ftirir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Resimlerin_Sayfa_Yukleme_Suresine_Olan_Etkisi\"><\/span>Resimlerin Sayfa Y\u00fckleme S\u00fcresine Olan Etkisi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Resimler, bir web sitesinin toplam boyutunun %50\u2019sinden fazlas\u0131n\u0131 olu\u015fturabilir. Optimize edilmemi\u015f, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resimler, sunucu yan\u0131t s\u00fcresini uzat\u0131r ve sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde yava\u015flat\u0131r. \u00d6zellikle mobil cihazlarda, s\u0131n\u0131rl\u0131 bant geni\u015fli\u011fi nedeniyle bu durum daha da belirgin hale gelir.<\/p>\n<p>\u00d6rne\u011fin, bir e-ticaret sitesi, \u00fcr\u00fcn g\u00f6rsellerini optimize etmeden y\u00fckledi\u011finde, her bir resim 2-3 MB boyutunda olabilir. Bu da sayfa ba\u015f\u0131na 10-15 MB\u2019l\u0131k bir y\u00fck anlam\u0131na gelir. Oysa do\u011fru optimizasyon teknikleriyle bu boyutlar %70-80 oran\u0131nda azalt\u0131labilir, b\u00f6ylece sayfa y\u00fckleme s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Google_Core_Web_Vitals_ve_Resim_Optimizasyonu_Iliskisi\"><\/span>Google Core Web Vitals ve Resim Optimizasyonu \u0130li\u015fkisi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google\u2019\u0131n<span>\u00a0<\/span><strong>Core Web Vitals<\/strong>, kullan\u0131c\u0131 deneyimini \u00f6l\u00e7mek i\u00e7in kullan\u0131lan \u00fc\u00e7 temel metri\u011fi i\u00e7erir:<\/p>\n<ol>\n<li><strong>Largest Contentful Paint (LCP)<\/strong><span>\u00a0<\/span>\u2013 Sayfadaki en b\u00fcy\u00fck i\u00e7eri\u011fin y\u00fcklenme s\u00fcresi (ideal: &lt;2.5 saniye)<\/li>\n<li><strong>First Input Delay (FID)<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131n\u0131n ilk etkile\u015fimden sonraki yan\u0131t s\u00fcresi (ideal: &lt;100 ms)<\/li>\n<li><strong>Cumulative Layout Shift (CLS)<\/strong><span>\u00a0<\/span>\u2013 Sayfadaki beklenmedik d\u00fczen de\u011fi\u015fiklikleri (ideal: &lt;0.1)<\/li>\n<\/ol>\n<p>Resim optimizasyonu, \u00f6zellikle<span>\u00a0<\/span><strong>LCP<\/strong><span>\u00a0<\/span>\u00fczerinde do\u011frudan bir etkiye sahiptir. B\u00fcy\u00fck ve optimize edilmemi\u015f resimler, LCP s\u00fcresini uzatarak kullan\u0131c\u0131 deneyimini olumsuz etkiler. Ayr\u0131ca,<span>\u00a0<\/span><strong>CLS<\/strong><span>\u00a0<\/span>(Cumulative Layout Shift) sorunlar\u0131na da yol a\u00e7abilir, \u00e7\u00fcnk\u00fc resimler y\u00fcklenene kadar sayfa d\u00fczeni kayabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Google_Hizli_Yukleme_Icin_Resim_Optimizasyonunun_Avantajlari\"><\/span>Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonunun Avantajlar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Do\u011fru \u015fekilde optimize edilmi\u015f resimler, web sitesine bir\u00e7ok avantaj sa\u011flar:<\/p>\n<p>\u2705<span>\u00a0<\/span><strong>Daha H\u0131zl\u0131 Sayfa Y\u00fckleme S\u00fcresi<\/strong><span>\u00a0<\/span>\u2013 Optimize edilmi\u015f resimler, sunucu y\u00fck\u00fcn\u00fc azalt\u0131r ve sayfalar\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar.<br \/>\n\u2705<span>\u00a0<\/span><strong>D\u00fc\u015f\u00fck Bounce Rate (Hemen \u00c7\u0131kma Oran\u0131)<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131lar, h\u0131zl\u0131 y\u00fcklenen sitelerde daha uzun s\u00fcre kal\u0131r ve daha fazla etkile\u015fimde bulunur.<br \/>\n\u2705<span>\u00a0<\/span><strong>\u0130yile\u015ftirilmi\u015f SEO S\u0131ralamalar\u0131<\/strong><span>\u00a0<\/span>\u2013 Google, h\u0131zl\u0131 siteleri \u00f6d\u00fcllendirir ve arama sonu\u00e7lar\u0131nda \u00fcst s\u0131ralara ta\u015f\u0131r.<br \/>\n\u2705<span>\u00a0<\/span><strong>Daha Az Bant Geni\u015fli\u011fi T\u00fcketimi<\/strong><span>\u00a0<\/span>\u2013 \u00d6zellikle mobil kullan\u0131c\u0131lar i\u00e7in daha az veri t\u00fcketimi sa\u011flar.<br \/>\n\u2705<span>\u00a0<\/span><strong>Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi<\/strong><span>\u00a0<\/span>\u2013 H\u0131zl\u0131 y\u00fcklenen resimler, kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 iyile\u015ftirir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sonuc\"><\/span>Sonu\u00e7<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong>, modern web siteleri i\u00e7in vazge\u00e7ilmez bir gerekliliktir. Do\u011fru format se\u00e7imi, s\u0131k\u0131\u015ft\u0131rma teknikleri ve y\u00fckleme stratejileriyle resimler optimize edildi\u011finde, hem kullan\u0131c\u0131 deneyimi hem de SEO performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirilebilir. Bir sonraki b\u00f6l\u00fcmde, hangi resim formatlar\u0131n\u0131n ne zaman kullan\u0131laca\u011f\u0131na dair detayl\u0131 bir rehber sunaca\u011f\u0131z.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Resim_Formatlarini_Dogru_Secmek\"><\/span>Resim Formatlar\u0131n\u0131 Do\u011fru Se\u00e7mek<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p>Resim formatlar\u0131n\u0131 do\u011fru se\u00e7mek,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin en kritik ad\u0131mlar\u0131ndan biridir. Yanl\u0131\u015f format se\u00e7imi, gereksiz dosya boyutlar\u0131na, yava\u015f y\u00fckleme s\u00fcrelerine ve k\u00f6t\u00fc kullan\u0131c\u0131 deneyimine yol a\u00e7abilir. Bu b\u00f6l\u00fcmde, en yayg\u0131n resim formatlar\u0131n\u0131 (JPEG, PNG, WebP, SVG) detayl\u0131 olarak inceleyecek, avantajlar\u0131n\u0131, dezavantajlar\u0131n\u0131 ve hangi durumlarda kullan\u0131lmalar\u0131 gerekti\u011fini a\u00e7\u0131klayaca\u011f\u0131z.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_JPEG_Joint_Photographic_Experts_Group\"><\/span>1. JPEG (Joint Photographic Experts Group)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>JPEG, foto\u011fraf ve karma\u015f\u0131k renk ge\u00e7i\u015fleri i\u00e7eren g\u00f6rseller i\u00e7in en yayg\u0131n kullan\u0131lan formatlard\u0131r. Kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma (lossy compression) kullan\u0131r, yani dosya boyutunu k\u00fc\u00e7\u00fcltmek i\u00e7in baz\u0131 g\u00f6rsel verileri atar.<strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>K\u00fc\u00e7\u00fck dosya boyutu<\/strong><span>\u00a0<\/span>\u2013 Y\u00fcksek s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sayesinde h\u0131zl\u0131 y\u00fcklenir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Geni\u015f taray\u0131c\u0131 ve cihaz deste\u011fi<\/strong><span>\u00a0<\/span>\u2013 T\u00fcm cihazlarda sorunsuz \u00e7al\u0131\u015f\u0131r.<br \/>\n\u2714<span>\u00a0<\/span><strong>Ayarlanabilir kalite<\/strong><span>\u00a0<\/span>\u2013 S\u0131k\u0131\u015ft\u0131rma seviyesini de\u011fi\u015ftirerek kalite ve boyut dengesi sa\u011flanabilir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>Kalite kayb\u0131<\/strong><span>\u00a0<\/span>\u2013 S\u0131k\u0131\u015ft\u0131rma artt\u0131k\u00e7a g\u00f6r\u00fcnt\u00fcde bozulmalar (artefaktlar) olu\u015fabilir.<br \/>\n\u2716<span>\u00a0<\/span><strong>\u015eeffafl\u0131k deste\u011fi yok<\/strong><span>\u00a0<\/span>\u2013 Arka plan\u0131 saydam yapamazs\u0131n\u0131z.<br \/>\n\u2716<span>\u00a0<\/span><strong>Metin ve keskin kenarlar i\u00e7in uygun de\u011fildir<\/strong><span>\u00a0<\/span>\u2013 Logolar ve ikonlar gibi grafiklerde bulan\u0131kla\u015fma olur.<\/p>\n<p><strong>Ne Zaman Kullan\u0131lmal\u0131?<\/strong><\/p>\n<ul>\n<li><strong>Foto\u011fraflar<\/strong><span>\u00a0<\/span>(\u00fcr\u00fcn g\u00f6rselleri, manzara foto\u011fraflar\u0131, portreler)<\/li>\n<li><strong>Renklendirme ve gradyanlar i\u00e7eren g\u00f6rseller<\/strong><\/li>\n<li><strong>H\u0131zl\u0131 y\u00fckleme gerektiren web siteleri<\/strong><span>\u00a0<\/span>(e-ticaret, bloglar)<\/li>\n<\/ul>\n<p><strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir e-ticaret sitesi, \u00fcr\u00fcn foto\u011fraflar\u0131n\u0131 JPEG olarak kaydederek dosya boyutunu d\u00fc\u015f\u00fcrebilir ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>sa\u011flayabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_PNG_Portable_Network_Graphics\"><\/span>2. PNG (Portable Network Graphics)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>PNG, kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma (lossless compression) kullanan bir formatt\u0131r. \u015eeffafl\u0131k deste\u011fi ve y\u00fcksek kalite sunar, ancak dosya boyutu JPEG\u2019e g\u00f6re daha b\u00fcy\u00fckt\u00fcr.<strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma<\/strong><span>\u00a0<\/span>\u2013 G\u00f6r\u00fcnt\u00fc kalitesi bozulmaz.<br \/>\n\u2714<span>\u00a0<\/span><strong>\u015eeffafl\u0131k (alpha kanal) deste\u011fi<\/strong><span>\u00a0<\/span>\u2013 Arka plan\u0131 saydam yapabilirsiniz.<br \/>\n\u2714<span>\u00a0<\/span><strong>Keskin kenarlar ve metinler i\u00e7in ideal<\/strong><span>\u00a0<\/span>\u2013 Logolar, ikonlar ve grafikler i\u00e7in m\u00fckemmeldir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>B\u00fcy\u00fck dosya boyutu<\/strong><span>\u00a0<\/span>\u2013 JPEG\u2019e g\u00f6re daha yava\u015f y\u00fcklenir.<br \/>\n\u2716<span>\u00a0<\/span><strong>Foto\u011fraflar i\u00e7in verimsiz<\/strong><span>\u00a0<\/span>\u2013 Y\u00fcksek renk ge\u00e7i\u015fleri i\u00e7eren g\u00f6rsellerde gereksiz yer kaplar.<\/p>\n<p><strong>Ne Zaman Kullan\u0131lmal\u0131?<\/strong><\/p>\n<ul>\n<li><strong>Logolar, ikonlar, infografikler<\/strong><\/li>\n<li><strong>\u015eeffafl\u0131k gerektiren g\u00f6rseller<\/strong><span>\u00a0<\/span>(\u00f6rne\u011fin, \u00fcst \u00fcste bindirilmi\u015f tasar\u0131mlar)<\/li>\n<li><strong>Metin i\u00e7eren g\u00f6rseller<\/strong><span>\u00a0<\/span>(afi\u015fler, banner\u2019lar)<\/li>\n<\/ul>\n<p><strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir web sitesinin logosunu PNG olarak kaydederek, arka plan\u0131 saydam yapabilir ve herhangi bir zeminde sorunsuz g\u00f6r\u00fcnt\u00fcleyebilirsiniz.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_WebP_Googlein_Gelistirdigi_Modern_Format\"><\/span>3. WebP (Google\u2019\u0131n Geli\u015ftirdi\u011fi Modern Format)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WebP,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>konusunda en etkili \u00e7\u00f6z\u00fcmlerden biridir. Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma se\u00e7enekleri sunar ve hem JPEG hem de PNG\u2019den daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sa\u011flar.<strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Daha k\u00fc\u00e7\u00fck dosya boyutu<\/strong><span>\u00a0<\/span>\u2013 JPEG\u2019e g\u00f6re %25-35, PNG\u2019ye g\u00f6re %26-34 daha k\u00fc\u00e7\u00fck.<br \/>\n\u2714<span>\u00a0<\/span><strong>\u015eeffafl\u0131k ve animasyon deste\u011fi<\/strong><span>\u00a0<\/span>\u2013 GIF ve PNG\u2019nin yerini alabilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Y\u00fcksek kalite koruma<\/strong><span>\u00a0<\/span>\u2013 D\u00fc\u015f\u00fck boyutlarda bile net g\u00f6r\u00fcnt\u00fc sunar.<br \/>\n\u2714<span>\u00a0<\/span><strong>Google taraf\u0131ndan \u00f6nerilir<\/strong><span>\u00a0<\/span>\u2013 Core Web Vitals optimizasyonu i\u00e7in idealdir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>Eski taray\u0131c\u0131larda destek sorunu<\/strong><span>\u00a0<\/span>\u2013 IE11 ve baz\u0131 eski s\u00fcr\u00fcmlerde \u00e7al\u0131\u015fmayabilir.<br \/>\n\u2716<span>\u00a0<\/span><strong>D\u00f6n\u00fc\u015ft\u00fcrme gerektirebilir<\/strong><span>\u00a0<\/span>\u2013 Mevcut resimlerin WebP\u2019ye \u00e7evrilmesi ek i\u015flem gerektirir.<\/p>\n<p><strong>Ne Zaman Kullan\u0131lmal\u0131?<\/strong><\/p>\n<ul>\n<li><strong>T\u00fcm web siteleri i\u00e7in ideal<\/strong><span>\u00a0<\/span>(\u00f6zellikle h\u0131z odakl\u0131 projeler)<\/li>\n<li><strong>Foto\u011fraf ve grafiklerin bir arada oldu\u011fu sayfalar<\/strong><\/li>\n<li><strong>Mobil uyumlu siteler<\/strong><span>\u00a0<\/span>(d\u00fc\u015f\u00fck bant geni\u015fli\u011fi i\u00e7in optimize)<\/li>\n<\/ul>\n<p><strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir haber sitesi, t\u00fcm g\u00f6rsellerini WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrerek sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_SVG_Scalable_Vector_Graphics\"><\/span>4. SVG (Scalable Vector Graphics)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>SVG, vekt\u00f6rel tabanl\u0131 bir formatt\u0131r ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fckten ba\u011f\u0131ms\u0131z olarak keskin g\u00f6r\u00fcnt\u00fc sunar. Logolar, ikonlar ve grafikler i\u00e7in idealdir.<strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>\u00d6l\u00e7eklenebilirlik<\/strong><span>\u00a0<\/span>\u2013 Her boyutta net kal\u0131r (zoom yap\u0131ld\u0131\u011f\u0131nda bozulmaz).<br \/>\n\u2714<span>\u00a0<\/span><strong>K\u00fc\u00e7\u00fck dosya boyutu<\/strong><span>\u00a0<\/span>\u2013 Vekt\u00f6rel yap\u0131s\u0131 sayesinde hafiftir.<br \/>\n\u2714<span>\u00a0<\/span><strong>CSS ve JavaScript ile d\u00fczenlenebilir<\/strong><span>\u00a0<\/span>\u2013 Renk, boyut de\u011fi\u015ftirilebilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>SEO dostu<\/strong><span>\u00a0<\/span>\u2013 Metin tabanl\u0131 oldu\u011fu i\u00e7in arama motorlar\u0131 taraf\u0131ndan okunabilir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>Foto\u011fraflar i\u00e7in uygun de\u011fildir<\/strong><span>\u00a0<\/span>\u2013 Sadece vekt\u00f6rel grafikler i\u00e7in kullan\u0131l\u0131r.<br \/>\n\u2716<span>\u00a0<\/span><strong>Karma\u015f\u0131k g\u00f6rsellerde performans sorunu<\/strong><span>\u00a0<\/span>\u2013 \u00c7ok detayl\u0131 SVG\u2019ler yava\u015f y\u00fcklenebilir.<\/p>\n<p><strong>Ne Zaman Kullan\u0131lmal\u0131?<\/strong><\/p>\n<ul>\n<li><strong>Logolar, ikonlar, \u00e7izimler<\/strong><\/li>\n<li><strong>Responsive tasar\u0131mlar<\/strong><span>\u00a0<\/span>(farkl\u0131 ekran boyutlar\u0131nda sorunsuz g\u00f6r\u00fcnt\u00fclenir)<\/li>\n<li><strong>Animasyonlu grafikler<\/strong><\/li>\n<\/ul>\n<p><strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir \u015firketin logosunu SVG olarak kaydederek, her cihazda keskin ve net g\u00f6r\u00fcnt\u00fclenmesini sa\u011flayabilirsiniz.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Hangi_Formati_Ne_Zaman_Kullanmalisiniz_Karsilastirma_Tablosu\"><\/span>Hangi Format\u0131 Ne Zaman Kullanmal\u0131s\u0131n\u0131z? (Kar\u015f\u0131la\u015ft\u0131rma Tablosu)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>Format<\/th>\n<th>En \u0130yi Kullan\u0131m Alan\u0131<\/th>\n<th>Avantajlar<\/th>\n<th>Dezavantajlar<\/th>\n<\/tr>\n<tr>\n<td>JPEG<\/td>\n<td>Foto\u011fraflar, y\u00fcksek renk ge\u00e7i\u015fleri<\/td>\n<td>K\u00fc\u00e7\u00fck boyut, h\u0131zl\u0131 y\u00fckleme<\/td>\n<td>Kalite kayb\u0131, \u015feffafl\u0131k yok<\/td>\n<\/tr>\n<tr>\n<td>PNG<\/td>\n<td>Logolar, \u015feffafl\u0131k gerektiren g\u00f6rseller<\/td>\n<td>Kay\u0131ps\u0131z, keskin kenarlar<\/td>\n<td>B\u00fcy\u00fck boyut, yava\u015f y\u00fckleme<\/td>\n<\/tr>\n<tr>\n<td>WebP<\/td>\n<td>T\u00fcm web g\u00f6rselleri (foto\u011fraf + grafik)<\/td>\n<td>En k\u00fc\u00e7\u00fck boyut, y\u00fcksek kalite<\/td>\n<td>Eski taray\u0131c\u0131 deste\u011fi yok<\/td>\n<\/tr>\n<tr>\n<td>SVG<\/td>\n<td>Vekt\u00f6rel grafikler, ikonlar<\/td>\n<td>\u00d6l\u00e7eklenebilir, SEO dostu<\/td>\n<td>Foto\u011fraflar i\u00e7in uygun de\u011fil<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken format se\u00e7imi b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. Genel olarak:<\/p>\n<ul>\n<li><strong>Foto\u011fraflar i\u00e7in WebP (veya JPEG)<\/strong><span>\u00a0<\/span>tercih edin.<\/li>\n<li><strong>Logolar ve ikonlar i\u00e7in SVG veya PNG<\/strong><span>\u00a0<\/span>kullan\u0131n.<\/li>\n<li><strong>Eski taray\u0131c\u0131 deste\u011fi gerekiyorsa JPEG\/PNG, modern sitelerde WebP<\/strong><span>\u00a0<\/span>ideal \u00e7\u00f6z\u00fcmd\u00fcr.<\/li>\n<\/ul>\n<p>Do\u011fru format se\u00e7imi, sayfa y\u00fckleme h\u0131z\u0131n\u0131z\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r ve<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerinizi iyile\u015ftirir. Bir sonraki b\u00f6l\u00fcmde, resim boyutlar\u0131n\u0131 optimize etme y\u00f6ntemlerini detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Resim_Boyutlarini_Optimize_Etme_Yontemleri\"><\/span>Resim Boyutlar\u0131n\u0131 Optimize Etme Y\u00f6ntemleri<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p>Resim boyutlar\u0131n\u0131 optimize etmek,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin en kritik ad\u0131mlar\u0131ndan biridir. Do\u011fru boyutland\u0131rma ve s\u0131k\u0131\u015ft\u0131rma teknikleri, web sitenizin y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131rken, g\u00f6rsel kalitesinden \u00f6d\u00fcn vermemenizi sa\u011flar. Bu b\u00f6l\u00fcmde, resim boyutlar\u0131n\u0131 optimize etmenin en etkili y\u00f6ntemlerini detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Dogru_Boyutlandirma_Gereksiz_Piksel_Yukunden_Kacinma\"><\/span>1. Do\u011fru Boyutland\u0131rma: Gereksiz Piksel Y\u00fck\u00fcnden Ka\u00e7\u0131nma<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Resimlerinizi web sitenize y\u00fcklemeden \u00f6nce, ger\u00e7ekte ihtiya\u00e7 duyulan boyuta getirmek,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131nda kullanaca\u011f\u0131n\u0131z g\u00f6rselin geni\u015fli\u011fi 800 piksel ise, 3000 piksel geni\u015fli\u011finde bir resim y\u00fcklemek gereksiz bant geni\u015fli\u011fi t\u00fcketimine ve yava\u015f y\u00fckleme s\u00fcrelerine neden olur.<\/p>\n<p><strong>Do\u011fru Boyutland\u0131rma \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>G\u00f6rselin kullan\u0131m amac\u0131n\u0131 belirleyin<\/strong><span>\u00a0<\/span>(\u00f6rne\u011fin, ana sayfa banner\u2019\u0131, \u00fcr\u00fcn g\u00f6rseli, blog i\u00e7eri\u011fi).<\/li>\n<li><strong>Responsive tasar\u0131m i\u00e7in farkl\u0131 boyutlar olu\u015fturun<\/strong><span>\u00a0<\/span>(mobil, tablet, masa\u00fcst\u00fc).<\/li>\n<li><strong>CSS veya HTML ile boyutland\u0131rma yapmay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Bu, dosya boyutunu k\u00fc\u00e7\u00fcltmez, sadece g\u00f6rseli ekranda k\u00fc\u00e7\u00fclt\u00fcr.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir e-ticaret sitesi, \u00fcr\u00fcn g\u00f6rsellerini 1000&#215;1000 piksel olarak kaydedebilir, ancak mobil cihazlar i\u00e7in 500&#215;500 piksel boyutunda alternatif bir versiyon sunmal\u0131d\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Sikistirma_Araclari_ve_En_Iyi_Uygulamalar\"><\/span>2. S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131 ve En \u0130yi Uygulamalar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Resimleri s\u0131k\u0131\u015ft\u0131rmak, dosya boyutunu k\u00fc\u00e7\u00fcltmeden g\u00f6rsel kalitesini koruman\u0131n en etkili yoludur.<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken, hem kay\u0131pl\u0131 (lossy) hem de kay\u0131ps\u0131z (lossless) s\u0131k\u0131\u015ft\u0131rma y\u00f6ntemlerini kullanabilirsiniz.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"En_Iyi_Sikistirma_Araclari\"><\/span>En \u0130yi S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>Ara\u00e7<\/th>\n<th>Desteklenen Formatlar<\/th>\n<th>Avantajlar<\/th>\n<th>Dezavantajlar<\/th>\n<\/tr>\n<tr>\n<td>TinyPNG<\/td>\n<td>PNG, JPEG, WebP<\/td>\n<td>Kullan\u0131m\u0131 kolay, y\u00fcksek s\u0131k\u0131\u015ft\u0131rma oran\u0131<\/td>\n<td>\u00dccretsiz s\u00fcr\u00fcmde s\u0131n\u0131rl\u0131 say\u0131da resim<\/td>\n<\/tr>\n<tr>\n<td>ImageOptim<\/td>\n<td>PNG, JPEG, GIF<\/td>\n<td>Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma, a\u00e7\u0131k kaynak<\/td>\n<td>Sadece masa\u00fcst\u00fc uygulamas\u0131<\/td>\n<\/tr>\n<tr>\n<td>Squoosh (Google)<\/td>\n<td>JPEG, PNG, WebP<\/td>\n<td>Taray\u0131c\u0131 tabanl\u0131, h\u0131zl\u0131<\/td>\n<td>Geli\u015fmi\u015f ayarlar s\u0131n\u0131rl\u0131<\/td>\n<\/tr>\n<tr>\n<td>ShortPixel<\/td>\n<td>JPEG, PNG, WebP, GIF<\/td>\n<td>Otomatik optimizasyon, WordPress eklentisi<\/td>\n<td>\u00dccretli planlar gerektirebilir<\/td>\n<\/tr>\n<tr>\n<td>Adobe Photoshop<\/td>\n<td>T\u00fcm formatlar<\/td>\n<td>Profesyonel kontrol, batch i\u015flem<\/td>\n<td>Pahal\u0131, \u00f6\u011frenme e\u011frisi y\u00fcksek<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>S\u0131k\u0131\u015ft\u0131rma \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>JPEG i\u00e7in %70-80 kalite<\/strong><span>\u00a0<\/span>genellikle yeterlidir (daha d\u00fc\u015f\u00fck de\u011ferler kalite kayb\u0131na neden olabilir).<\/li>\n<li><strong>PNG i\u00e7in kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma<\/strong><span>\u00a0<\/span>kullan\u0131n (\u00f6rne\u011fin, TinyPNG veya ImageOptim).<\/li>\n<li><strong>WebP format\u0131n\u0131 tercih edin<\/strong><span>\u00a0<\/span>\u2013 Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z se\u00e7enekler sunar.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir blog yaz\u0131s\u0131nda kullanaca\u011f\u0131n\u0131z 2 MB\u2019l\u0131k bir JPEG g\u00f6rseli, TinyPNG ile s\u0131k\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda 300 KB\u2019a d\u00fc\u015febilir, bu da sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h3 data-path-to-node=\"3\"><span class=\"ez-toc-section\" id=\"3_Responsive_Resimler_Farkli_Ekran_Boyutlari_Icin_Optimizasyon\"><\/span>3. Responsive Resimler: Farkl\u0131 Ekran Boyutlar\u0131 \u0130\u00e7in Optimizasyon<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-path-to-node=\"4\">Modern web siteleri, farkl\u0131 cihazlarda (mobil, tablet, masa\u00fcst\u00fc) sorunsuz g\u00f6r\u00fcnt\u00fclenmelidir. <b data-path-to-node=\"4\" data-index-in-node=\"93\">Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/b> yaparken, responsive resim tekniklerini kullanmak, her cihaza uygun boyutta g\u00f6rsel sunman\u0131z\u0131 ve gereksiz veri transferini engellemenizi sa\u011flar.<\/p>\n<p data-path-to-node=\"5\">\u0130\u015fte uygulaman\u0131z gereken responsive teknikler:<\/p>\n<h4 data-path-to-node=\"6\"><span class=\"ez-toc-section\" id=\"A_srcset_Ozelligi_ile_Cozunurluk_Tabanli_Yukleme\"><\/span>A. <code data-path-to-node=\"6\" data-index-in-node=\"3\">srcset<\/code> \u00d6zelli\u011fi ile \u00c7\u00f6z\u00fcn\u00fcrl\u00fck Tabanl\u0131 Y\u00fckleme<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p data-path-to-node=\"7\">Bu y\u00f6ntem, taray\u0131c\u0131ya ayn\u0131 resmin farkl\u0131 boyutlar\u0131n\u0131 sunar. Taray\u0131c\u0131, kullan\u0131c\u0131n\u0131n ekran geni\u015fli\u011fine g\u00f6re en uygun olan\u0131 se\u00e7ip indirir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML\"><\/span><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-135 ng-star-inserted\"><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-135 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_8e039236da7f6ce4&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_2f233b6b9a3a4135&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQ7QE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-135 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-135\">HTML<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-135 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-135\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-135\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-135\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-135\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"small.jpg\"<\/span>\r\n     <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"small.jpg 500w, medium.jpg 1000w, large.jpg 2000w\"<\/span>\r\n     <span class=\"hljs-attr\">sizes<\/span>=<span class=\"hljs-string\">\"(max-width: 600px) 500px, (max-width: 1200px) 1000px, 2000px\"<\/span>\r\n     <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Responsive \u00d6rnek Resim\"<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><\/code-block><\/response-element><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul data-path-to-node=\"9\">\n<li>\n<p data-path-to-node=\"9,0,0\"><b data-path-to-node=\"9,0,0\" data-index-in-node=\"0\">Mant\u0131k:<\/b> Taray\u0131c\u0131 bakar; e\u011fer ziyaret\u00e7i telefondaysa <code data-path-to-node=\"9,0,0\" data-index-in-node=\"52\">small.jpg<\/code> dosyas\u0131n\u0131, 4K monit\u00f6rdeyse <code data-path-to-node=\"9,0,0\" data-index-in-node=\"89\">large.jpg<\/code> dosyas\u0131n\u0131 indirir.<\/p>\n<\/li>\n<\/ul>\n<h4 data-path-to-node=\"10\"><span class=\"ez-toc-section\" id=\"B_Etiketi_ile_Format_Tabanli_Yukleme\"><\/span>B. <code data-path-to-node=\"10\" data-index-in-node=\"3\">&lt;picture&gt;<\/code> Etiketi ile Format Tabanl\u0131 Y\u00fckleme<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p data-path-to-node=\"11\">Bu etiket, hem boyut hem de dosya format\u0131 (\u00f6rn: WebP) kontrol\u00fc yapman\u0131z\u0131 sa\u011flar. Taray\u0131c\u0131 WebP destekliyorsa onu, desteklemiyorsa standart JPEG&#8217;i y\u00fckler.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML-2\"><\/span><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-136 ng-star-inserted\"><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-136 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_8e039236da7f6ce4&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_2f233b6b9a3a4135&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQ7gE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-136 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-136\">HTML<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-136 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-136\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-136\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-136\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-136\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">picture<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"gorsel.webp\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/webp\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">source<\/span> <span class=\"hljs-attr\">srcset<\/span>=<span class=\"hljs-string\">\"gorsel.jpg\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/jpeg\"<\/span>&gt;<\/span> \r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"gorsel.jpg\"<\/span> <span class=\"hljs-attr\">alt<\/span>=<span class=\"hljs-string\">\"Format Destekli Resim\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">picture<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><\/code-block><\/response-element><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul data-path-to-node=\"13\">\n<li>\n<p data-path-to-node=\"13,0,0\"><b data-path-to-node=\"13,0,0\" data-index-in-node=\"0\">Mant\u0131k:<\/b> Modern taray\u0131c\u0131lar (Chrome, Safari) hafif olan WebP&#8217;yi se\u00e7erken, \u00e7ok eski taray\u0131c\u0131lar otomatik olarak JPG&#8217;ye d\u00f6ner (Fallback).<\/p>\n<\/li>\n<\/ul>\n<h4 data-path-to-node=\"14\"><span class=\"ez-toc-section\" id=\"C_CSS_ile_Esnek_Boyutlandirma\"><\/span>C. CSS ile Esnek Boyutland\u0131rma<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p data-path-to-node=\"15\">Resimlerin kapsay\u0131c\u0131 d\u0131\u015f\u0131na ta\u015fmas\u0131n\u0131 engellemek i\u00e7in CSS taraf\u0131nda mutlaka \u015fu kural\u0131 uygulay\u0131n:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CSS_img_max-width_100_height_auto\"><\/span><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-137 ng-star-inserted\"><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-137 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_8e039236da7f6ce4&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_2f233b6b9a3a4135&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQ7wE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-137 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-137\">CSS<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-137 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-137\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-137\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-137\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-137\"><span class=\"hljs-selector-tag\">img<\/span> {\r\n  <span class=\"hljs-attribute\">max-width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: auto;\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><\/code-block><\/response-element><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul data-path-to-node=\"17\">\n<li>\n<p data-path-to-node=\"17,0,0\"><b data-path-to-node=\"17,0,0\" data-index-in-node=\"0\">Mant\u0131k:<\/b> Resimler ekran k\u00fc\u00e7\u00fcld\u00fck\u00e7e otomatik olarak daral\u0131r, g\u00f6r\u00fcnt\u00fc bozulmaz.<\/p>\n<\/li>\n<\/ul>\n<h4 data-path-to-node=\"18\"><span class=\"ez-toc-section\" id=\"Avantajlari\"><\/span>Avantajlar\u0131:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul data-path-to-node=\"19\">\n<li>\n<p data-path-to-node=\"19,0,0\">\u2714 <b data-path-to-node=\"19,0,0\" data-index-in-node=\"2\">Daha h\u0131zl\u0131 y\u00fckleme:<\/b> Her cihaza sadece ihtiyac\u0131 olan boyutta resim sunulur.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"19,1,0\">\u2714 <b data-path-to-node=\"19,1,0\" data-index-in-node=\"2\">Daha az bant geni\u015fli\u011fi t\u00fcketimi:<\/b> Mobil kullan\u0131c\u0131lar 5MB&#8217;l\u0131k masa\u00fcst\u00fc g\u00f6rselini indirmek zorunda kalmaz.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"19,2,0\">\u2714 <b data-path-to-node=\"19,2,0\" data-index-in-node=\"2\">\u0130yile\u015ftirilmi\u015f kullan\u0131c\u0131 deneyimi:<\/b> Resimler her cihazda net ve h\u0131zl\u0131 g\u00f6r\u00fcnt\u00fclenir.<\/p>\n<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"4_Otomatik_Optimizasyon_ve_CDN_Kullanimi\"><\/span>4. Otomatik Optimizasyon ve CDN Kullan\u0131m\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Resim optimizasyonunu manuel olarak yapmak zaman al\u0131c\u0131 olabilir. Bu nedenle, otomatik optimizasyon ara\u00e7lar\u0131 ve CDN (Content Delivery Network) hizmetleri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecini kolayla\u015ft\u0131r\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Otomatik_Optimizasyon_Araclari\"><\/span>Otomatik Optimizasyon Ara\u00e7lar\u0131:<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>WordPress Eklentileri:<\/strong><\/li>\n<\/ul>\n<p>&#8211;<span>\u00a0<\/span><strong>Smush<\/strong><span>\u00a0<\/span>\u2013 Resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r.<br \/>\n&#8211;<span>\u00a0<\/span><strong>EWWW Image Optimizer<\/strong><span>\u00a0<\/span>\u2013 Toplu optimizasyon sa\u011flar.<br \/>\n&#8211;<span>\u00a0<\/span><strong>ShortPixel<\/strong><span>\u00a0<\/span>\u2013 WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc yapar.<\/p>\n<ul>\n<li><strong>CDN Hizmetleri:<\/strong><\/li>\n<\/ul>\n<p>&#8211;<span>\u00a0<\/span><strong>Cloudflare Image Resizing<\/strong><span>\u00a0<\/span>\u2013 Resimleri otomatik olarak boyutland\u0131r\u0131r.<br \/>\n&#8211;<span>\u00a0<\/span><strong>Imgix<\/strong><span>\u00a0<\/span>\u2013 Ger\u00e7ek zamanl\u0131 resim optimizasyonu sunar.<br \/>\n&#8211;<span>\u00a0<\/span><strong>Akamai Image Manager<\/strong><span>\u00a0<\/span>\u2013 Y\u00fcksek performansl\u0131 resim da\u011f\u0131t\u0131m\u0131 sa\u011flar.<strong>\u00d6rnek:<\/strong><br \/>\nBir haber sitesi, Cloudflare CDN kullanarak resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve farkl\u0131 cihazlara uygun boyutlarda sunabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Ileri_Duzey_Optimizasyon_Teknikleri\"><\/span>5. \u0130leri D\u00fczey Optimizasyon Teknikleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken, a\u015fa\u011f\u0131daki ileri d\u00fczey teknikleri de kullanabilirsiniz:<\/p>\n<ol>\n<li><strong>Lazy Loading (Tembel Y\u00fckleme)<\/strong><\/li>\n<\/ol>\n<p>&#8211; Resimler, kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a y\u00fcklenir.<br \/>\n&#8211; HTML\u2019de<span>\u00a0<\/span><code>loading=\"lazy\"<\/code><span>\u00a0<\/span>\u00f6zelli\u011fi ile uygulanabilir:<span style=\"font-family: Consolas, Monaco, monospace;\"><\/span><\/p>\n<ol>\n<li><strong>Resim \u00d6nbellekleme (Caching)<\/strong><\/li>\n<\/ol>\n<p>&#8211; Taray\u0131c\u0131 \u00f6nbelle\u011fi kullanarak resimlerin tekrar y\u00fcklenmesini \u00f6nler.<br \/>\n&#8211;<span>\u00a0<\/span><code>.htaccess<\/code><span>\u00a0<\/span>dosyas\u0131 ile \u00f6nbellek s\u00fcresi ayarlanabilir:<\/p>\n<pre><code class=\"language-apache\">&lt;filesmatch \"\\.(jpg|jpeg|png|webp|svg)$\"=\"\"&gt;\r\n       Header set Cache-Control \"public, max-age=31536000\"\r\n     <\/code><\/pre>\n<ol>\n<li><strong>CSS Sprites (\u0130kon Birle\u015ftirme)<\/strong><\/li>\n<\/ol>\n<p>&#8211; K\u00fc\u00e7\u00fck ikonlar\u0131 tek bir resimde birle\u015ftirerek HTTP istek say\u0131s\u0131n\u0131 azalt\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Sonuc_ve_Oneriler\"><\/span>Sonu\u00e7 ve \u00d6neriler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong>, web sitenizin performans\u0131n\u0131 art\u0131rmak i\u00e7in vazge\u00e7ilmez bir ad\u0131md\u0131r. Do\u011fru boyutland\u0131rma, s\u0131k\u0131\u015ft\u0131rma, responsive teknikler ve otomatik optimizasyon ara\u00e7lar\u0131 kullanarak, resimlerinizin y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilirsiniz.<\/p>\n<p><strong>\u00d6zet \u00d6neriler:<\/strong><br \/>\n\u2705<span>\u00a0<\/span><strong>Resimleri ihtiya\u00e7 duyulan boyuta getirin<\/strong><span>\u00a0<\/span>(gereksiz b\u00fcy\u00fck boyutlardan ka\u00e7\u0131n\u0131n).<br \/>\n\u2705<span>\u00a0<\/span><strong>WebP format\u0131n\u0131 tercih edin<\/strong><span>\u00a0<\/span>(daha k\u00fc\u00e7\u00fck boyut, y\u00fcksek kalite).<br \/>\n\u2705<span>\u00a0<\/span><strong>Responsive resim tekniklerini kullan\u0131n<\/strong><span>\u00a0<\/span>(<code>srcset<\/code>,<span>\u00a0<\/span><code>picture<\/code><span>\u00a0<\/span>etiketi).<br \/>\n\u2705<span>\u00a0<\/span><strong>Otomatik optimizasyon ara\u00e7lar\u0131ndan yararlan\u0131n<\/strong><span>\u00a0<\/span>(Smush, ShortPixel, CDN).<br \/>\n\u2705<span>\u00a0<\/span><strong>Lazy loading ve \u00f6nbellekleme uygulay\u0131n<\/strong><span>\u00a0<\/span>(sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r).<\/p>\n<p>Bu y\u00f6ntemleri uygulayarak, web sitenizin<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerini iyile\u015ftirebilir ve kullan\u0131c\u0131 deneyimini en \u00fcst d\u00fczeye \u00e7\u0131karabilirsiniz. Bir sonraki b\u00f6l\u00fcmde,<span>\u00a0<\/span><strong>lazy loading ve resim y\u00fckleme stratejileri<\/strong>ni detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Lazy_Loading_ve_Resim_Yukleme_Stratejileri\"><\/span>Lazy Loading ve Resim Y\u00fckleme Stratejileri<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p>Lazy loading (tembel y\u00fckleme) ve ak\u0131ll\u0131 resim y\u00fckleme stratejileri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin en etkili bile\u015fenlerindendir. Modern web siteleri, kullan\u0131c\u0131lar\u0131n ilk g\u00f6rd\u00fc\u011f\u00fc i\u00e7eri\u011fi h\u0131zl\u0131ca sunarken, sayfan\u0131n geri kalan\u0131n\u0131 arka planda y\u00fckleyerek performans\u0131 art\u0131r\u0131r. Bu b\u00f6l\u00fcmde, lazy loading&#8217;in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, farkl\u0131 uygulama y\u00f6ntemlerini, avantajlar\u0131n\u0131 ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>stratejilerini detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Lazy_Loading_Nedir_ve_Nasil_Calisir\"><\/span>1. Lazy Loading Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading, web sayfas\u0131ndaki resimlerin, videolar\u0131n veya di\u011fer medya \u00f6\u011felerinin, kullan\u0131c\u0131n\u0131n sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a y\u00fcklenmesini sa\u011flayan bir tekniktir. Bu y\u00f6ntem, sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131rken, sunucu kaynaklar\u0131n\u0131 ve bant geni\u015fli\u011fini verimli kullan\u0131r.<\/p>\n<p><strong>Lazy Loading&#8217;in \u00c7al\u0131\u015fma Prensibi:<\/strong><\/p>\n<ul>\n<li>Sayfa ilk y\u00fcklendi\u011finde, sadece g\u00f6r\u00fcnt\u00fc alan\u0131ndaki (viewport) resimler y\u00fcklenir.<\/li>\n<li>Kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a, yeni resimler dinamik olarak y\u00fcklenir.<\/li>\n<li>Bu, ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r ve<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerini iyile\u015ftirir.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir e-ticaret sitesi, 50 \u00fcr\u00fcn g\u00f6rseli olan bir kategoride lazy loading kullanarak, sadece ilk 5-10 g\u00f6rseli y\u00fckler. Kullan\u0131c\u0131 sayfay\u0131 a\u015fa\u011f\u0131 kayd\u0131rd\u0131k\u00e7a di\u011fer g\u00f6rseller y\u00fcklenir, b\u00f6ylece sayfa a\u00e7\u0131l\u0131\u015f h\u0131z\u0131 artar.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Lazy_Loading_Uygulama_Yontemleri\"><\/span>2. Lazy Loading Uygulama Y\u00f6ntemleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading&#8217;i web sitenize entegre etmek i\u00e7in birka\u00e7 farkl\u0131 y\u00f6ntem bulunmaktad\u0131r. Her y\u00f6ntemin avantajlar\u0131 ve dezavantajlar\u0131 vard\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_HTML_loading%22lazy%22_Ozelligi_En_Basit_Yontem\"><\/span>A. HTML<span>\u00a0<\/span><code>loading=\"lazy\"<\/code><span>\u00a0<\/span>\u00d6zelli\u011fi (En Basit Y\u00f6ntem)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Modern taray\u0131c\u0131lar, HTML5&#8217;in<span>\u00a0<\/span><code>loading=\"lazy\"<\/code><span>\u00a0<\/span>\u00f6zelli\u011fini destekler. Bu, resimlerin otomatik olarak tembel y\u00fcklenmesini sa\u011flar.<\/p>\n<pre><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Kolay uygulama<\/strong><span>\u00a0<\/span>\u2013 Tek sat\u0131r kod eklemek yeterlidir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Taray\u0131c\u0131 deste\u011fi<\/strong><span>\u00a0<\/span>\u2013 Chrome, Firefox, Edge gibi modern taray\u0131c\u0131larda \u00e7al\u0131\u015f\u0131r.<br \/>\n\u2714<span>\u00a0<\/span><strong>SEO dostu<\/strong><span>\u00a0<\/span>\u2013 Google, bu y\u00f6ntemi \u00f6nerir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>Eski taray\u0131c\u0131larda destek yok<\/strong><span>\u00a0<\/span>(IE11 gibi).<br \/>\n\u2716<span>\u00a0<\/span><strong>Geli\u015fmi\u015f kontrol imkan\u0131 sunmaz<\/strong><span>\u00a0<\/span>(\u00f6rne\u011fin, belirli bir mesafeden y\u00fckleme).<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_Intersection_Observer_API_Gelismis_Yontem\"><\/span>B. Intersection Observer API (Geli\u015fmi\u015f Y\u00f6ntem)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>JavaScript tabanl\u0131 bu y\u00f6ntem, resimlerin ne zaman y\u00fcklenece\u011fini daha hassas kontrol etmenizi sa\u011flar.<\/p>\n<p><strong>Kullan\u0131m \u00d6rne\u011fi:<\/strong><\/p>\n<pre><code class=\"language-javascript\">document.addEventListener(\"DOMContentLoaded\", function() {\r\n  const lazyImages = document.querySelectorAll(\"img.lazy\");\r\n<\/code><\/pre>\n<pre><code class=\"language-javascript\"><\/code><\/pre>\n<p>const imageObserver = new IntersectionObserver(function(entries, observer) {<br \/>\nentries.forEach(function(entry) {<br \/>\nif (entry.isIntersecting) {<br \/>\nconst img = entry.target;<br \/>\nimg.src = img.dataset.src;<br \/>\nimg.classList.remove(&#8220;lazy&#8221;);<br \/>\nobserver.unobserve(img);<br \/>\n}<br \/>\n});<br \/>\n});<\/p>\n<p><code class=\"language-javascript\"><\/code><code class=\"language-javascript\">lazyImages.forEach(function(img) {<\/code><\/p>\n<p><code class=\"language-javascript\">    imageObserver.observe(img);<br \/>\n});<br \/>\n});<\/code><\/p>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Daha fazla kontrol<\/strong><span>\u00a0<\/span>\u2013 Y\u00fckleme mesafesi ve ko\u015fullar\u0131 \u00f6zelle\u015ftirilebilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Eski taray\u0131c\u0131 deste\u011fi<\/strong><span>\u00a0<\/span>\u2013 Polyfill ile \u00e7al\u0131\u015ft\u0131r\u0131labilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Performans optimizasyonu<\/strong><span>\u00a0<\/span>\u2013 Sadece gerekli resimler y\u00fcklenir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>JavaScript gerektirir<\/strong><span>\u00a0<\/span>\u2013 JS devre d\u0131\u015f\u0131ysa \u00e7al\u0131\u015fmaz.<br \/>\n\u2716<span>\u00a0<\/span><strong>Daha karma\u015f\u0131k uygulama<\/strong><span>\u00a0<\/span>\u2013 Kod bilgisi gerektirir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"C_WordPress_ve_Diger_CMSler_Icin_Eklentiler\"><\/span>C. WordPress ve Di\u011fer CMS&#8217;ler \u0130\u00e7in Eklentiler<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>E\u011fer WordPress veya benzeri bir i\u00e7erik y\u00f6netim sistemi kullan\u0131yorsan\u0131z, lazy loading&#8217;i eklentilerle kolayca uygulayabilirsiniz.<strong>Pop\u00fcler Eklentiler:<\/strong><\/p>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>Eklenti<\/th>\n<th>\u00d6zellikler<\/th>\n<th>Avantajlar<\/th>\n<\/tr>\n<tr>\n<td>Lazy Load by WP Rocket<\/td>\n<td>Resim, video ve iframe deste\u011fi<\/td>\n<td>Kolay kurulum, SEO dostu<\/td>\n<\/tr>\n<tr>\n<td>a3 Lazy Load<\/td>\n<td>Responsive resim deste\u011fi<\/td>\n<td>\u00dccretsiz, geni\u015f \u00f6zelle\u015ftirme<\/td>\n<\/tr>\n<tr>\n<td>Smush<\/td>\n<td>Resim optimizasyonu + lazy loading<\/td>\n<td>Otomatik WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir blog sitesi, &#8220;Lazy Load by WP Rocket&#8221; eklentisini kurarak t\u00fcm resimleri otomatik olarak tembel y\u00fckleme moduna ge\u00e7irebilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_Critical_Images_Oncelikli_Resimler_Stratejisi\"><\/span>3. Critical Images (\u00d6ncelikli Resimler) Stratejisi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading, sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131rken, baz\u0131 resimlerin hemen y\u00fcklenmesi gerekebilir. Bu resimlere &#8220;critical images&#8221; (\u00f6ncelikli resimler) denir.<\/p>\n<p><strong>\u00d6ncelikli Resimler Nelerdir?<\/strong><\/p>\n<ul>\n<li><strong>Logo ve ba\u015fl\u0131k g\u00f6rselleri<\/strong><span>\u00a0<\/span>(sayfan\u0131n \u00fcst k\u0131sm\u0131nda yer alanlar).<\/li>\n<li><strong>Ana i\u00e7erik g\u00f6rselleri<\/strong><span>\u00a0<\/span>(kullan\u0131c\u0131n\u0131n ilk g\u00f6rd\u00fc\u011f\u00fc resimler).<\/li>\n<li><strong>Call-to-action (CTA) butonlar\u0131<\/strong><span>\u00a0<\/span>(d\u00f6n\u00fc\u015f\u00fcmleri etkileyen g\u00f6rseller).<\/li>\n<\/ul>\n<p><strong>Critical Images \u0130\u00e7in \u00d6neriler:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Lazy loading&#8217;den muaf tutun<\/strong><span>\u00a0<\/span>\u2013 Bu resimleri normal y\u00fckleme ile sunun.<br \/>\n\u2714<span>\u00a0<\/span><strong>\u00d6nceden y\u00fckleme (preload) kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Taray\u0131c\u0131ya bu resimleri \u00f6ncelikli y\u00fcklemesini s\u00f6yleyin.<\/p>\n<\/div>\n<div>\n<p>\u2714<span>\u00a0<\/span><strong>Boyutlar\u0131n\u0131 optimize edin<\/strong><span>\u00a0<\/span>\u2013 Critical resimler i\u00e7in WebP format\u0131n\u0131 tercih edin.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Placeholder_ve_Blur-Up_Teknikleri_ile_Kullanici_Deneyimi_Iyilestirme\"><\/span>4. Placeholder ve Blur-Up Teknikleri ile Kullan\u0131c\u0131 Deneyimi \u0130yile\u015ftirme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading uygularken, resimler y\u00fcklenene kadar bo\u015f alanlar veya yer tutucular (placeholder) kullanmak, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Bu sorunu \u00e7\u00f6zmek i\u00e7in<span>\u00a0<\/span><strong>blur-up<\/strong><span>\u00a0<\/span>ve<span>\u00a0<\/span><strong>low-quality image placeholder (LQIP)<\/strong><span>\u00a0<\/span>teknikleri kullan\u0131l\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Blur-Up_Teknigi\"><\/span>A. Blur-Up Tekni\u011fi<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Resimler y\u00fcklenirken, \u00f6nce d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ve bulan\u0131k bir versiyon g\u00f6sterilir, ard\u0131ndan y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc versiyon y\u00fcklenir.<strong>CSS:<\/strong><\/p>\n<pre><code class=\"language-css\">.blur-up {\r\n  filter: blur(5px);\r\n  transition: filter 0.3s;\r\n}\r\n.blur-up.loaded {\r\n  filter: blur(0);\r\n}<\/code><\/pre>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Daha iyi kullan\u0131c\u0131 deneyimi<\/strong><span>\u00a0<\/span>\u2013 Bo\u015f alanlar yerine bulan\u0131k bir g\u00f6rsel g\u00f6sterilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Sayfa y\u00fckleme h\u0131z\u0131n\u0131 etkilemez<\/strong><span>\u00a0<\/span>\u2013 K\u00fc\u00e7\u00fck boyutlu placeholder kullan\u0131l\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_LQIP_Low-Quality_Image_Placeholder\"><\/span>B. LQIP (Low-Quality Image Placeholder)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>D\u00fc\u015f\u00fck kaliteli (10-20 KB) bir resim, y\u00fcksek kaliteli resim y\u00fcklenene kadar g\u00f6sterilir.<strong>\u00d6rnek:<\/strong><\/p>\n<ul>\n<li><strong>Orijinal resim:<\/strong><span>\u00a0<\/span>200 KB<\/li>\n<li><strong>LQIP resmi:<\/strong><span>\u00a0<\/span>10 KB (y\u00fcksek s\u0131k\u0131\u015ft\u0131rma ile)<\/li>\n<\/ul>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>H\u0131zl\u0131 ilk y\u00fckleme<\/strong><span>\u00a0<\/span>\u2013 K\u00fc\u00e7\u00fck boyutlu resim an\u0131nda y\u00fcklenir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Daha az bant geni\u015fli\u011fi t\u00fcketimi<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131 resmi g\u00f6rmeden \u00f6nce sayfa y\u00fcklenir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Lazy_Loading_ve_SEO_Googlein_Onerileri\"><\/span>5. Lazy Loading ve SEO: Google&#8217;\u0131n \u00d6nerileri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>kapsam\u0131nda lazy loading&#8217;in SEO&#8217;ya etkisini g\u00f6z ard\u0131 etmemek gerekir. Google, lazy loading&#8217;in do\u011fru uygulanmas\u0131 halinde SEO&#8217;ya olumlu katk\u0131 sa\u011flad\u0131\u011f\u0131n\u0131 belirtir.<\/p>\n<p><strong>Google&#8217;\u0131n Lazy Loading \u0130\u00e7in \u00d6nerileri:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong><code>loading=\"lazy\"<\/code><span>\u00a0<\/span>kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 En basit ve etkili y\u00f6ntemdir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Resimlere<span>\u00a0<\/span><code>alt<\/code><span>\u00a0<\/span>etiketi ekleyin<\/strong><span>\u00a0<\/span>\u2013 Eri\u015filebilirlik ve SEO i\u00e7in \u00f6nemlidir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Critical resimleri lazy loading&#8217;den muaf tutun<\/strong><span>\u00a0<\/span>\u2013 \u00d6ncelikli resimler hemen y\u00fcklenmelidir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Resim boyutlar\u0131n\u0131 belirleyin<\/strong><span>\u00a0<\/span>(<code>width<\/code><span>\u00a0<\/span>ve<span>\u00a0<\/span><code>height<\/code>) \u2013 Sayfa d\u00fczeninin kaymas\u0131n\u0131 \u00f6nler.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_Lazy_Loadingin_Avantajlari_ve_Dezavantajlari\"><\/span>6. Lazy Loading&#8217;in Avantajlar\u0131 ve Dezavantajlar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>Avantajlar<\/th>\n<th>Dezavantajlar<\/th>\n<\/tr>\n<tr>\n<td>\u2714 Daha h\u0131zl\u0131 sayfa y\u00fckleme \u2013 \u0130lk y\u00fckleme s\u00fcresi k\u0131sal\u0131r.<\/td>\n<td>\u2716 Eski taray\u0131c\u0131 deste\u011fi sorunu (IE11 gibi).<\/td>\n<\/tr>\n<tr>\n<td>\u2714 D\u00fc\u015f\u00fck bant geni\u015fli\u011fi t\u00fcketimi \u2013 Sadece g\u00f6r\u00fcnt\u00fclenen resimler y\u00fcklenir.<\/td>\n<td>\u2716 JavaScript ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 (Intersection Observer i\u00e7in).<\/td>\n<\/tr>\n<tr>\n<td>\u2714 \u0130yile\u015ftirilmi\u015f Core Web Vitals \u2013 LCP ve FID metriklerini iyile\u015ftirir.<\/td>\n<td>\u2716 Yanl\u0131\u015f uygulama SEO&#8217;yu olumsuz etkileyebilir.<\/td>\n<\/tr>\n<tr>\n<td>\u2714 Daha iyi kullan\u0131c\u0131 deneyimi \u2013 Sayfa daha h\u0131zl\u0131 etkile\u015fime haz\u0131r olur.<\/td>\n<td>\u2716 Placeholder olmadan k\u00f6t\u00fc g\u00f6rsel deneyim.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_En_Iyi_Uygulamalar_ve_Son_Oneriler\"><\/span>7. En \u0130yi Uygulamalar ve Son \u00d6neriler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken lazy loading&#8217;i en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ol>\n<li><strong>Critical resimleri belirleyin<\/strong><span>\u00a0<\/span>\u2013 Sayfan\u0131n \u00fcst k\u0131sm\u0131ndaki resimleri lazy loading&#8217;den muaf tutun.<\/li>\n<li><strong>Placeholder veya blur-up kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131 deneyimini iyile\u015ftirin.<\/li>\n<li><strong>Resim boyutlar\u0131n\u0131 belirleyin<\/strong><span>\u00a0<\/span>\u2013 Sayfa d\u00fczeninin kaymas\u0131n\u0131 (CLS) \u00f6nleyin.<\/li>\n<li><strong>WebP format\u0131n\u0131 tercih edin<\/strong><span>\u00a0<\/span>\u2013 Daha k\u00fc\u00e7\u00fck boyutlar, daha h\u0131zl\u0131 y\u00fckleme.<\/li>\n<li><strong>CDN ile birle\u015ftirin<\/strong><span>\u00a0<\/span>\u2013 Resimleri global olarak h\u0131zl\u0131 sunun.<\/li>\n<li><strong>Test edin<\/strong><span>\u00a0<\/span>\u2013 Google PageSpeed Insights veya Lighthouse ile performans\u0131 \u00f6l\u00e7\u00fcn.<\/li>\n<\/ol>\n<p><strong>\u00d6rnek Senaryo:<\/strong><br \/>\nBir haber sitesi, lazy loading&#8217;i t\u00fcm makale g\u00f6rsellerine uygulayarak sayfa y\u00fckleme h\u0131z\u0131n\u0131 %40 art\u0131rabilir. Critical resimler (ba\u015fl\u0131k g\u00f6rseli) i\u00e7in preload kullanarak LCP s\u00fcresini iyile\u015ftirebilir.<\/p>\n<\/div>\n<div>\n<p>&nbsp;<\/p>\n<p>Lazy loading ve ak\u0131ll\u0131 resim y\u00fckleme stratejileri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Do\u011fru uyguland\u0131\u011f\u0131nda, sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r, kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerini optimize eder. Critical resimleri do\u011fru belirlemek, placeholder tekniklerini kullanmak ve modern y\u00f6ntemleri (Intersection Observer,<span>\u00a0<\/span><code>loading=\"lazy\"<\/code>) entegre etmek, web sitenizin performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131kar\u0131r.<\/p>\n<p>Bu teknikleri uygulayarak, hem kullan\u0131c\u0131 memnuniyetini art\u0131rabilir hem de arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 iyile\u015ftirebilirsiniz. Bir sonraki b\u00f6l\u00fcmde,<span>\u00a0<\/span><strong>CDN ve resim da\u011f\u0131t\u0131m stratejileri<\/strong>ni detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"CDN_ve_Resim_Dagitim_Stratejileri\"><\/span>CDN ve Resim Da\u011f\u0131t\u0131m Stratejileri<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p>CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) ve resim da\u011f\u0131t\u0131m stratejileri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin en kritik bile\u015fenlerinden biridir. Modern web siteleri i\u00e7in resimlerin h\u0131zl\u0131 ve verimli bir \u015fekilde sunulmas\u0131, kullan\u0131c\u0131 deneyimini do\u011frudan etkilerken, ayn\u0131 zamanda<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerini iyile\u015ftirir. Bu b\u00f6l\u00fcmde, CDN&#8217;in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, resim da\u011f\u0131t\u0131m stratejilerini, en iyi CDN sa\u011flay\u0131c\u0131lar\u0131n\u0131 ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>tekniklerini detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_CDN_Nedir_ve_Nasil_Calisir\"><\/span>1. CDN Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CDN (Content Delivery Network), web sitelerinin statik i\u00e7eriklerini (resimler, CSS, JavaScript dosyalar\u0131) d\u00fcnya genelinde da\u011f\u0131lm\u0131\u015f sunucular arac\u0131l\u0131\u011f\u0131yla kullan\u0131c\u0131lara daha h\u0131zl\u0131 ula\u015ft\u0131ran bir teknolojidir. CDN, kullan\u0131c\u0131n\u0131n co\u011frafi konumuna en yak\u0131n sunucudan i\u00e7eri\u011fi sunarak, y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/p>\n<p><strong>CDN&#8217;in \u00c7al\u0131\u015fma Prensibi:<\/strong><\/p>\n<ul>\n<li>Kullan\u0131c\u0131 bir web sitesine eri\u015fti\u011finde, CDN, kullan\u0131c\u0131n\u0131n konumuna en yak\u0131n sunucuyu (edge server) belirler.<\/li>\n<li>Resimler ve di\u011fer statik dosyalar, bu sunucudan y\u00fcklenir.<\/li>\n<li>Bu, sunucu yan\u0131t s\u00fcresini azalt\u0131r ve sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir e-ticaret sitesi, T\u00fcrkiye&#8217;den bir kullan\u0131c\u0131ya hizmet verirken, CDN, kullan\u0131c\u0131n\u0131n konumuna en yak\u0131n sunucuyu (\u00f6rne\u011fin, \u0130stanbul&#8217;daki bir sunucu) kullanarak resimleri sunar. Bu, resimlerin y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131salt\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_CDNin_Resim_Optimizasyonuna_Etkisi\"><\/span>2. CDN&#8217;in Resim Optimizasyonuna Etkisi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CDN,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde birka\u00e7 \u00f6nemli avantaj sa\u011flar:<\/p>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714<span>\u00a0<\/span><strong>Daha H\u0131zl\u0131 Y\u00fckleme S\u00fcreleri<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131n\u0131n konumuna en yak\u0131n sunucudan resimler sunulur.<br \/>\n\u2714<span>\u00a0<\/span><strong>D\u00fc\u015f\u00fck Bant Geni\u015fli\u011fi T\u00fcketimi<\/strong><span>\u00a0<\/span>\u2013 Resimler s\u0131k\u0131\u015ft\u0131r\u0131l\u0131r ve optimize edilir.<br \/>\n\u2714<span>\u00a0<\/span><strong>Y\u00fcksek Kullan\u0131c\u0131 Deneyimi<\/strong><span>\u00a0<\/span>\u2013 Sayfalar daha h\u0131zl\u0131 y\u00fcklenir, kullan\u0131c\u0131 memnuniyeti artar.<br \/>\n\u2714<span>\u00a0<\/span><strong>\u0130yile\u015ftirilmi\u015f SEO<\/strong><span>\u00a0<\/span>\u2013 Google, h\u0131zl\u0131 y\u00fcklenen siteleri \u00f6d\u00fcllendirir.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n\u2716<span>\u00a0<\/span><strong>Maliyet<\/strong><span>\u00a0<\/span>\u2013 Baz\u0131 CDN hizmetleri \u00fccretlidir.<br \/>\n\u2716<span>\u00a0<\/span><strong>Kurulum ve Yap\u0131land\u0131rma<\/strong><span>\u00a0<\/span>\u2013 CDN&#8217;in do\u011fru \u015fekilde yap\u0131land\u0131r\u0131lmas\u0131 gereklidir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_En_Iyi_CDN_Saglayicilari_ve_Resim_Optimizasyonu_Ozellikleri\"><\/span>3. En \u0130yi CDN Sa\u011flay\u0131c\u0131lar\u0131 ve Resim Optimizasyonu \u00d6zellikleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CDN sa\u011flay\u0131c\u0131lar\u0131,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>konusunda \u00e7e\u015fitli \u00f6zellikler sunar. \u0130\u015fte en pop\u00fcler CDN sa\u011flay\u0131c\u0131lar\u0131 ve \u00f6zellikleri:<\/p>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>CDN Sa\u011flay\u0131c\u0131s\u0131<\/th>\n<th>\u00d6zellikler<\/th>\n<th>Avantajlar<\/th>\n<th>Dezavantajlar<\/th>\n<\/tr>\n<tr>\n<td>Cloudflare<\/td>\n<td>Resim s\u0131k\u0131\u015ft\u0131rma, WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc, global sunucu a\u011f\u0131<\/td>\n<td>\u00dccretsiz plan mevcut, kolay kurulum<\/td>\n<td>Geli\u015fmi\u015f \u00f6zellikler \u00fccretli<\/td>\n<\/tr>\n<tr>\n<td>Akamai<\/td>\n<td>Y\u00fcksek performans, ger\u00e7ek zamanl\u0131 optimizasyon<\/td>\n<td>B\u00fcy\u00fck \u00f6l\u00e7ekli siteler i\u00e7in ideal<\/td>\n<td>Y\u00fcksek maliyet<\/td>\n<\/tr>\n<tr>\n<td>Fastly<\/td>\n<td>An\u0131nda \u00f6nbellek g\u00fcncelleme, geli\u015fmi\u015f g\u00fcvenlik<\/td>\n<td>H\u0131zl\u0131 ve g\u00fcvenilir<\/td>\n<td>Karma\u015f\u0131k yap\u0131land\u0131rma<\/td>\n<\/tr>\n<tr>\n<td>Amazon CloudFront<\/td>\n<td>AWS entegrasyonu, otomatik resim optimizasyonu<\/td>\n<td>\u00d6l\u00e7eklenebilir, g\u00fcvenilir<\/td>\n<td>Maliyetli olabilir<\/td>\n<\/tr>\n<tr>\n<td>Imgix<\/td>\n<td>Ger\u00e7ek zamanl\u0131 resim i\u015fleme, otomatik boyutland\u0131rma<\/td>\n<td>Y\u00fcksek kalite, esnek<\/td>\n<td>\u00dccretli planlar<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir haber sitesi, Cloudflare CDN kullanarak resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Resimlerin_Cografi_Konuma_Gore_Optimize_Edilmesi\"><\/span>4. Resimlerin Co\u011frafi Konuma G\u00f6re Optimize Edilmesi<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CDN, resimlerin co\u011frafi konuma g\u00f6re optimize edilmesini sa\u011flar. Bu, kullan\u0131c\u0131lar\u0131n konumlar\u0131na en yak\u0131n sunucudan resimleri almas\u0131n\u0131 ve b\u00f6ylece y\u00fckleme s\u00fcrelerinin k\u0131salmas\u0131n\u0131 sa\u011flar.<\/p>\n<p><strong>Co\u011frafi Optimizasyon \u0130pu\u00e7lar\u0131:<\/strong><\/p>\n<ul>\n<li><strong>Resimleri farkl\u0131 co\u011frafi b\u00f6lgelerde \u00f6nbellekleyin<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131lar, en yak\u0131n sunucudan resimleri al\u0131r.<\/li>\n<li><strong>Resimleri s\u0131k\u0131\u015ft\u0131r\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir.<\/li>\n<li><strong>WebP format\u0131n\u0131 kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir uluslararas\u0131 e-ticaret sitesi, CDN kullanarak resimlerini farkl\u0131 co\u011frafi b\u00f6lgelerde \u00f6nbellekleyebilir. Bu, kullan\u0131c\u0131lar\u0131n konumlar\u0131na en yak\u0131n sunucudan resimleri almas\u0131n\u0131 sa\u011flar.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_CDN_ve_Resim_Optimizasyonu_Icin_En_Iyi_Uygulamalar\"><\/span>5. CDN ve Resim Optimizasyonu \u0130\u00e7in En \u0130yi Uygulamalar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken CDN&#8217;i en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ol>\n<li><strong>Resimleri S\u0131k\u0131\u015ft\u0131r\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir.<\/li>\n<li><strong>WebP Format\u0131n\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir.<\/li>\n<li><strong>Resimleri \u00d6nbellekleyin<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri \u00f6nbellekleyerek y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r.<\/li>\n<li><strong>Resimleri Co\u011frafi Konuma G\u00f6re Optimize Edin<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131lar, en yak\u0131n sunucudan resimleri al\u0131r.<\/li>\n<li><strong>CDN&#8217;i Do\u011fru Yap\u0131land\u0131r\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN&#8217;in do\u011fru \u015fekilde yap\u0131land\u0131r\u0131lmas\u0131 gereklidir.<\/li>\n<\/ol>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir blog sitesi, CDN kullanarak resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"6_CDN_ve_Resim_Optimizasyonu_Icin_Son_Oneriler\"><\/span>6. CDN ve Resim Optimizasyonu \u0130\u00e7in Son \u00d6neriler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken CDN&#8217;i en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ul>\n<li><strong>CDN Sa\u011flay\u0131c\u0131s\u0131n\u0131 Do\u011fru Se\u00e7in<\/strong><span>\u00a0<\/span>\u2013 \u0130htiya\u00e7lar\u0131n\u0131za en uygun CDN sa\u011flay\u0131c\u0131s\u0131n\u0131 se\u00e7in.<\/li>\n<li><strong>Resimleri S\u0131k\u0131\u015ft\u0131r\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir.<\/li>\n<li><strong>WebP Format\u0131n\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir.<\/li>\n<li><strong>Resimleri \u00d6nbellekleyin<\/strong><span>\u00a0<\/span>\u2013 CDN, resimleri \u00f6nbellekleyerek y\u00fckleme s\u00fcrelerini k\u0131salt\u0131r.<\/li>\n<li><strong>Resimleri Co\u011frafi Konuma G\u00f6re Optimize Edin<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131lar, en yak\u0131n sunucudan resimleri al\u0131r.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir e-ticaret sitesi, CDN kullanarak resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.CDN ve resim da\u011f\u0131t\u0131m stratejileri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Do\u011fru CDN sa\u011flay\u0131c\u0131s\u0131n\u0131 se\u00e7mek, resimleri s\u0131k\u0131\u015ft\u0131rmak, WebP format\u0131n\u0131 kullanmak ve resimleri co\u011frafi konuma g\u00f6re optimize etmek, web sitenizin performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131kar\u0131r. Bu teknikleri uygulayarak, hem kullan\u0131c\u0131 memnuniyetini art\u0131rabilir hem de arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 iyile\u015ftirebilirsiniz.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Otomatik_Optimizasyon_Araclari_ve_Eklentileri\"><\/span>Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecini manuel olarak y\u00f6netmek zaman al\u0131c\u0131 ve teknik bilgi gerektirebilir. Neyse ki, otomatik optimizasyon ara\u00e7lar\u0131 ve eklentileri, bu s\u00fcreci kolayla\u015ft\u0131rarak web sitelerinin performans\u0131n\u0131 art\u0131rmaya yard\u0131mc\u0131 olur. Bu ara\u00e7lar, resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r, do\u011fru formatlara d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve hatta CDN entegrasyonu sa\u011flayarak y\u00fckleme h\u0131zlar\u0131n\u0131 optimize eder. \u0130\u015fte<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>konusunda en etkili otomatik \u00e7\u00f6z\u00fcmler:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_WordPress_Icin_En_Iyi_Resim_Optimizasyon_Eklentileri\"><\/span>1. WordPress \u0130\u00e7in En \u0130yi Resim Optimizasyon Eklentileri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WordPress, web sitelerinin %40&#8217;\u0131ndan fazlas\u0131n\u0131 destekleyen bir platformdur ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>i\u00e7in bir\u00e7ok g\u00fc\u00e7l\u00fc eklenti sunar. \u0130\u015fte en pop\u00fcler ve etkili olanlar:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Smush\"><\/span>A. Smush<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Otomatik resim s\u0131k\u0131\u015ft\u0131rma (kay\u0131pl\u0131 ve kay\u0131ps\u0131z se\u00e7enekler)<br \/>\n&#8211; Toplu optimizasyon (50&#8217;den fazla resmi bir kerede i\u015fleme)<br \/>\n&#8211; WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc<br \/>\n&#8211; Lazy loading deste\u011fi<br \/>\n&#8211; CDN entegrasyonu (Smush CDN)<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 \u00dccretsiz s\u00fcr\u00fcm mevcut (5 MB&#8217;a kadar resimler)<br \/>\n\u2714 Kullan\u0131m\u0131 kolay aray\u00fcz<br \/>\n\u2714 Otomatik arka plan optimizasyonu<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 \u00dccretsiz s\u00fcr\u00fcmde s\u0131n\u0131rl\u0131 \u00f6zellikler<br \/>\n\u2716 B\u00fcy\u00fck siteler i\u00e7in \u00fccretli planlar gerekebilir<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir blog sitesi, Smush eklentisini kurarak t\u00fcm resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 %30-40 oran\u0131nda art\u0131rabilir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_ShortPixel\"><\/span>B. ShortPixel<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Geli\u015fmi\u015f s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131<br \/>\n&#8211; WebP, AVIF ve JPEG XL deste\u011fi<br \/>\n&#8211; Otomatik boyutland\u0131rma<br \/>\n&#8211; PDF optimizasyonu<br \/>\n&#8211; CDN entegrasyonu<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 Y\u00fcksek s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 (JPEG i\u00e7in %60-80 boyut azaltma)<br \/>\n\u2714 Toplu i\u015flem deste\u011fi<br \/>\n\u2714 \u00dccretsiz deneme imkan\u0131<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 Ayl\u0131k kota s\u0131n\u0131rlamas\u0131 (\u00fccretsiz s\u00fcr\u00fcmde)<br \/>\n\u2716 Baz\u0131 geli\u015fmi\u015f \u00f6zellikler \u00fccretli<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir e-ticaret sitesi, ShortPixel&#8217;i kullanarak 10.000&#8217;den fazla \u00fcr\u00fcn g\u00f6rselini otomatik olarak optimize edebilir ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>sa\u011flayabilir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"C_EWWW_Image_Optimizer\"><\/span>C. EWWW Image Optimizer<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Kay\u0131ps\u0131z ve kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma<br \/>\n&#8211; WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc<br \/>\n&#8211; Bulut tabanl\u0131 optimizasyon<br \/>\n&#8211; Otomatik arka plan i\u015fleme<br \/>\n&#8211; Lazy loading deste\u011fi<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 \u00dccretsiz s\u00fcr\u00fcm mevcut<br \/>\n\u2714 Y\u00fcksek performansl\u0131 s\u0131k\u0131\u015ft\u0131rma<br \/>\n\u2714 Kolay kurulum<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 \u00dccretsiz s\u00fcr\u00fcmde s\u0131n\u0131rl\u0131 kota<br \/>\n\u2716 Baz\u0131 sunucularda kurulum sorunlar\u0131 ya\u015fanabilir<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir haber sitesi, EWWW Image Optimizer ile resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir ve<span>\u00a0<\/span><strong>Google Core Web Vitals<\/strong><span>\u00a0<\/span>metriklerini iyile\u015ftirebilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Googlein_Onerdigi_Resim_Optimizasyon_Araclari\"><\/span>2. Google\u2019\u0131n \u00d6nerdi\u011fi Resim Optimizasyon Ara\u00e7lar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>konusunda birka\u00e7 resmi ve \u00fc\u00e7\u00fcnc\u00fc taraf arac\u0131 \u00f6nermektedir. Bu ara\u00e7lar, resimleri optimize etmek ve web sitelerinin performans\u0131n\u0131 art\u0131rmak i\u00e7in idealdir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Squoosh_Google_tarafindan_gelistirildi\"><\/span>A. Squoosh (Google taraf\u0131ndan geli\u015ftirildi)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Taray\u0131c\u0131 tabanl\u0131 resim s\u0131k\u0131\u015ft\u0131rma<br \/>\n&#8211; WebP, AVIF, JPEG, PNG deste\u011fi<br \/>\n&#8211; Ger\u00e7ek zamanl\u0131 \u00f6nizleme<br \/>\n&#8211; Kay\u0131pl\u0131 ve kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma se\u00e7enekleri<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 \u00dccretsiz ve a\u00e7\u0131k kaynak<br \/>\n\u2714 Kullan\u0131m\u0131 kolay<br \/>\n\u2714 H\u0131zl\u0131 i\u015flem<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 Toplu i\u015flem deste\u011fi yok<br \/>\n\u2716 Manuel optimizasyon gerektirir<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir web geli\u015ftiricisi, Squoosh&#8217;u kullanarak resimlerini h\u0131zl\u0131ca WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir ve boyutlar\u0131n\u0131 %50 oran\u0131nda azaltabilir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_PageSpeed_Insights\"><\/span>B. PageSpeed Insights<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Web sitesi performans analizi<br \/>\n&#8211; Resim optimizasyon \u00f6nerileri<br \/>\n&#8211; Core Web Vitals raporlar\u0131<br \/>\n&#8211; Optimize edilmi\u015f resim indirme se\u00e7ene\u011fi<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 \u00dccretsiz ve Google taraf\u0131ndan destekleniyor<br \/>\n\u2714 Detayl\u0131 performans raporlar\u0131<br \/>\n\u2714 Optimize edilmi\u015f resimleri do\u011frudan indirme imkan\u0131<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 Manuel optimizasyon gerektirir<br \/>\n\u2716 Toplu i\u015flem deste\u011fi yok<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir web sitesi sahibi, PageSpeed Insights&#8217;\u0131 kullanarak resim optimizasyon \u00f6nerilerini alabilir ve optimize edilmi\u015f resimleri do\u011frudan indirebilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_API_Tabanli_Otomatik_Optimizasyon_Cozumleri\"><\/span>3. API Tabanl\u0131 Otomatik Optimizasyon \u00c7\u00f6z\u00fcmleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>API tabanl\u0131 \u00e7\u00f6z\u00fcmler,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecini otomatikle\u015ftirmek i\u00e7in idealdir. Bu \u00e7\u00f6z\u00fcmler, resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131r, formatlar\u0131n\u0131 d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve CDN entegrasyonu sa\u011flar.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Cloudinary\"><\/span>A. Cloudinary<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Otomatik resim optimizasyonu<br \/>\n&#8211; WebP, AVIF, JPEG XL deste\u011fi<br \/>\n&#8211; Ger\u00e7ek zamanl\u0131 resim i\u015fleme<br \/>\n&#8211; CDN entegrasyonu<br \/>\n&#8211; AI tabanl\u0131 optimizasyon<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 Y\u00fcksek performansl\u0131 optimizasyon<br \/>\n\u2714 Geli\u015fmi\u015f API deste\u011fi<br \/>\n\u2714 Otomatik format d\u00f6n\u00fc\u015f\u00fcm\u00fc<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 \u00dccretli planlar gerektirebilir<br \/>\n\u2716 Karma\u015f\u0131k kurulum<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir e-ticaret sitesi, Cloudinary API&#8217;sini kullanarak resimlerini otomatik olarak optimize edebilir ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>sa\u011flayabilir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_Imgix\"><\/span>B. Imgix<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Ger\u00e7ek zamanl\u0131 resim i\u015fleme<br \/>\n&#8211; Otomatik format d\u00f6n\u00fc\u015f\u00fcm\u00fc<br \/>\n&#8211; CDN entegrasyonu<br \/>\n&#8211; Geli\u015fmi\u015f s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 Y\u00fcksek kalite ve performans<br \/>\n\u2714 Kolay entegrasyon<br \/>\n\u2714 Otomatik optimizasyon<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 \u00dccretli planlar gerektirebilir<br \/>\n\u2716 Baz\u0131 \u00f6zellikler s\u0131n\u0131rl\u0131 olabilir<strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir haber sitesi, Imgix API&#8217;sini kullanarak resimlerini otomatik olarak optimize edebilir ve sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131rabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_Otomatik_Optimizasyon_Araclari_ve_Eklentileri_Icin_En_Iyi_Uygulamalar\"><\/span>4. Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri \u0130\u00e7in En \u0130yi Uygulamalar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken otomatik ara\u00e7lar\u0131 en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ol>\n<li><strong>Do\u011fru Eklentiyi Se\u00e7in<\/strong><span>\u00a0<\/span>\u2013 \u0130htiya\u00e7lar\u0131n\u0131za en uygun eklentiyi se\u00e7in (\u00f6rne\u011fin, Smush, ShortPixel, EWWW Image Optimizer).<\/li>\n<li><strong>WebP Format\u0131n\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 WebP, resim boyutlar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>Lazy Loading Uygulay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimlerin sadece g\u00f6r\u00fcnt\u00fc alan\u0131na geldik\u00e7e y\u00fcklenmesini sa\u011flay\u0131n.<\/li>\n<li><strong>CDN Entegrasyonu Sa\u011flay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimleri global olarak h\u0131zl\u0131 sunun.<\/li>\n<li><strong>Otomatik Arka Plan \u0130\u015fleme Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131n ve optimize edin.<\/li>\n<li><strong>Test Edin<\/strong><span>\u00a0<\/span>\u2013 Google PageSpeed Insights veya Lighthouse ile performans\u0131 \u00f6l\u00e7\u00fcn.<\/li>\n<\/ol>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir blog sitesi, Smush eklentisini kurarak t\u00fcm resimlerini otomatik olarak s\u0131k\u0131\u015ft\u0131rabilir, WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir ve lazy loading uygulayabilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 %40-50 oran\u0131nda art\u0131rabilir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Otomatik_Optimizasyon_Araclari_ve_Eklentileri_Icin_Son_Oneriler\"><\/span>5. Otomatik Optimizasyon Ara\u00e7lar\u0131 ve Eklentileri \u0130\u00e7in Son \u00d6neriler<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>yaparken otomatik ara\u00e7lar\u0131 en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ul>\n<li><strong>Do\u011fru Eklentiyi Se\u00e7in<\/strong><span>\u00a0<\/span>\u2013 \u0130htiya\u00e7lar\u0131n\u0131za en uygun eklentiyi se\u00e7in.<\/li>\n<li><strong>WebP Format\u0131n\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 WebP, resim boyutlar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/li>\n<li><strong>Lazy Loading Uygulay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimlerin sadece g\u00f6r\u00fcnt\u00fc alan\u0131na geldik\u00e7e y\u00fcklenmesini sa\u011flay\u0131n.<\/li>\n<li><strong>CDN Entegrasyonu Sa\u011flay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimleri global olarak h\u0131zl\u0131 sunun.<\/li>\n<li><strong>Otomatik Arka Plan \u0130\u015fleme Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Resimleri otomatik olarak s\u0131k\u0131\u015ft\u0131r\u0131n ve optimize edin.<\/li>\n<li><strong>Test Edin<\/strong><span>\u00a0<\/span>\u2013 Google PageSpeed Insights veya Lighthouse ile performans\u0131 \u00f6l\u00e7\u00fcn.<\/li>\n<\/ul>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir e-ticaret sitesi, ShortPixel eklentisini kurarak t\u00fcm \u00fcr\u00fcn g\u00f6rsellerini otomatik olarak optimize edebilir ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>sa\u011flayabilir.Otomatik optimizasyon ara\u00e7lar\u0131 ve eklentileri,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecini kolayla\u015ft\u0131rarak web sitelerinin performans\u0131n\u0131 art\u0131rmaya yard\u0131mc\u0131 olur. Do\u011fru eklentiyi se\u00e7mek, WebP format\u0131n\u0131 kullanmak, lazy loading uygulamak ve CDN entegrasyonu sa\u011flamak, web sitenizin y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Bu teknikleri uygulayarak, hem kullan\u0131c\u0131 memnuniyetini art\u0131rabilir hem de arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 iyile\u015ftirebilirsiniz.<\/p>\n<\/div>\n<\/section>\n<section>\n<h2><span class=\"ez-toc-section\" id=\"Ileri_Duzey_Resim_Optimizasyon_Teknikleri\"><\/span>\u0130leri D\u00fczey Resim Optimizasyon Teknikleri<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde temel tekniklerin \u00f6tesine ge\u00e7mek, web sitelerinin performans\u0131n\u0131 maksimum d\u00fczeye \u00e7\u0131karmak i\u00e7in kritik \u00f6neme sahiptir. \u0130leri d\u00fczey optimizasyon y\u00f6ntemleri, sadece resim boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmekle kalmaz, ayn\u0131 zamanda y\u00fckleme stratejilerini optimize eder, modern formatlar\u0131 kullan\u0131r ve kullan\u0131c\u0131 deneyimini en \u00fcst seviyeye ta\u015f\u0131r. Bu b\u00f6l\u00fcmde,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>konusunda uzmanla\u015fm\u0131\u015f ileri d\u00fczey teknikleri detayl\u0131 olarak ele alaca\u011f\u0131z.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"1_Next-Gen_Resim_Formatlari_ve_Uygulama_Yontemleri\"><\/span>1. Next-Gen Resim Formatlar\u0131 ve Uygulama Y\u00f6ntemleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Geleneksel JPEG ve PNG formatlar\u0131n\u0131n \u00f6tesine ge\u00e7en modern resim formatlar\u0131,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde devrim yaratm\u0131\u015ft\u0131r. Bu formatlar, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunarken y\u00fcksek kaliteyi korur ve taray\u0131c\u0131 deste\u011fi giderek artmaktad\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_AVIF_AV1_Image_File_Format\"><\/span>A. AVIF (AV1 Image File Format)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; JPEG&#8217;e g\u00f6re %50 daha k\u00fc\u00e7\u00fck dosya boyutu<br \/>\n&#8211; Y\u00fcksek renk derinli\u011fi (10-12 bit)<br \/>\n&#8211; HDR deste\u011fi<br \/>\n&#8211; \u015eeffafl\u0131k ve animasyon deste\u011fi<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 En y\u00fcksek s\u0131k\u0131\u015ft\u0131rma oran\u0131<br \/>\n\u2714 M\u00fckemmel g\u00f6r\u00fcnt\u00fc kalitesi<br \/>\n\u2714 Gelece\u011fin resim format\u0131 olarak kabul edilir<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 S\u0131n\u0131rl\u0131 taray\u0131c\u0131 deste\u011fi (Chrome 85+, Firefox 93+)<br \/>\n\u2716 D\u00f6n\u00fc\u015ft\u00fcrme i\u015flemi yo\u011fun kaynak gerektirebilir<\/p>\n<pre><\/pre>\n<h4><span class=\"ez-toc-section\" id=\"B_WebP2_WebPnin_Gelismis_Versiyonu\"><\/span>B. WebP2 (WebP&#8217;nin Geli\u015fmi\u015f Versiyonu)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; WebP&#8217;ye g\u00f6re %30 daha k\u00fc\u00e7\u00fck dosya boyutu<br \/>\n&#8211; Geli\u015fmi\u015f s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131<br \/>\n&#8211; 10-bit renk deste\u011fi<\/p>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 WebP&#8217;den daha verimli<br \/>\n\u2714 Geriye d\u00f6n\u00fck uyumluluk<\/p>\n<ul>\n<li><strong>Dezavantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2716 Hen\u00fcz yayg\u0131n taray\u0131c\u0131 deste\u011fi yok<br \/>\n\u2716 Deneysel a\u015famada<\/p>\n<p><strong>\u00d6neri:<\/strong><span>\u00a0<\/span>\u015eu an i\u00e7in WebP kullan\u0131n, WebP2&#8217;nin yayg\u0131nla\u015fmas\u0131n\u0131 bekleyin.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_Resimlerin_Onbellekleme_Stratejileri\"><\/span>2. Resimlerin \u00d6nbellekleme Stratejileri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00d6nbellekleme,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde kritik bir rol oynar. Do\u011fru \u00f6nbellekleme stratejileri, resimlerin tekrar tekrar y\u00fcklenmesini \u00f6nler ve sayfa h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Tarayici_Onbellekleme_Browser_Caching\"><\/span>A. Taray\u0131c\u0131 \u00d6nbellekleme (Browser Caching)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>Uygulama Y\u00f6ntemi:<\/strong><\/li>\n<\/ul>\n<pre><code class=\"language-apache\">&lt;filesmatch \"\\.(jpg|jpeg|png|webp|avif|svg)$\"=\"\"&gt;\r\n    Header set Cache-Control \"public, max-age=31536000, immutable\"\r\n  <\/code><\/pre>\n<ul>\n<li><strong>Avantajlar\u0131:<\/strong><\/li>\n<\/ul>\n<p>\u2714 Resimler bir kez y\u00fcklendikten sonra tekrar indirilmez<br \/>\n\u2714 Bant geni\u015fli\u011fi tasarrufu sa\u011flar<br \/>\n\u2714 Sayfa y\u00fckleme h\u0131z\u0131n\u0131 art\u0131r\u0131r<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_Sunucu_Tarafi_Onbellekleme\"><\/span>B. Sunucu Taraf\u0131 \u00d6nbellekleme<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6rnek Uygulamalar:<\/strong><\/li>\n<\/ul>\n<p>&#8211;<span>\u00a0<\/span><strong>Varnish Cache:<\/strong><span>\u00a0<\/span>Y\u00fcksek performansl\u0131 \u00f6nbellekleme<br \/>\n&#8211;<span>\u00a0<\/span><strong>Redis:<\/strong><span>\u00a0<\/span>H\u0131zl\u0131 veri eri\u015fimi i\u00e7in<br \/>\n&#8211;<span>\u00a0<\/span><strong>Nginx FastCGI Cache:<\/strong><span>\u00a0<\/span>Statik i\u00e7erik \u00f6nbellekleme<strong>\u00d6neri:<\/strong><span>\u00a0<\/span>CDN ile birlikte kullan\u0131ld\u0131\u011f\u0131nda en iyi sonu\u00e7lar\u0131 verir.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_AI_Tabanli_Resim_Optimizasyonu_ve_Gelecek_Trendleri\"><\/span>3. AI Tabanl\u0131 Resim Optimizasyonu ve Gelecek Trendleri<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Yapay zeka,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde yeni bir \u00e7a\u011f ba\u015flatm\u0131\u015ft\u0131r. AI tabanl\u0131 ara\u00e7lar, resimleri ak\u0131ll\u0131ca optimize eder, gereksiz verileri kald\u0131r\u0131r ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_AI_Tabanli_Sikistirma_Araclari\"><\/span>A. AI Tabanl\u0131 S\u0131k\u0131\u015ft\u0131rma Ara\u00e7lar\u0131<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<table class=\"table\">\n<tbody>\n<tr>\n<th>Ara\u00e7<\/th>\n<th>\u00d6zellikler<\/th>\n<th>Avantajlar<\/th>\n<\/tr>\n<tr>\n<td>TinyPNG<\/td>\n<td>AI destekli s\u0131k\u0131\u015ft\u0131rma<\/td>\n<td>Kullan\u0131m\u0131 kolay, y\u00fcksek verim<\/td>\n<\/tr>\n<tr>\n<td>ImageOptim<\/td>\n<td>Makine \u00f6\u011frenimi tabanl\u0131<\/td>\n<td>Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma<\/td>\n<\/tr>\n<tr>\n<td>Cloudinary<\/td>\n<td>AI tabanl\u0131 otomatik optimizasyon<\/td>\n<td>Ger\u00e7ek zamanl\u0131 i\u015fleme<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>\u00d6rnek Kullan\u0131m:<\/strong><br \/>\nBir e-ticaret sitesi, AI tabanl\u0131 bir ara\u00e7 kullanarak 10.000 \u00fcr\u00fcn g\u00f6rselini otomatik olarak optimize edebilir ve<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>sa\u011flayabilir.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_AI_Tabanli_Resim_Boyutlandirma\"><\/span>B. AI Tabanl\u0131 Resim Boyutland\u0131rma<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>\u00d6zellikler:<\/strong><\/li>\n<\/ul>\n<p>&#8211; Ak\u0131ll\u0131 k\u0131rpma (smart cropping)<br \/>\n&#8211; Otomatik boyutland\u0131rma<br \/>\n&#8211; Y\u00fcz tan\u0131ma tabanl\u0131 optimizasyon<strong>Avantajlar\u0131:<\/strong><br \/>\n\u2714 Manuel m\u00fcdahale gerektirmez<br \/>\n\u2714 Daha iyi kullan\u0131c\u0131 deneyimi<br \/>\n\u2714 H\u0131zl\u0131 i\u015flem<\/p>\n<h3 data-path-to-node=\"3\"><span class=\"ez-toc-section\" id=\"4_Resimlerin_Onceden_Yuklenmesi_Preloading\"><\/span>4. Resimlerin \u00d6nceden Y\u00fcklenmesi (Preloading)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-path-to-node=\"4\">Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu s\u00fcrecinde, kritik resimlerin (\u00f6zellikle sayfan\u0131n en \u00fcst\u00fcndeki banner veya logo gibi) \u00f6nceden y\u00fcklenmesi, <b data-path-to-node=\"4\" data-index-in-node=\"151\">LCP (Largest Contentful Paint)<\/b> puan\u0131n\u0131z\u0131 do\u011frudan iyile\u015ftirir. Bu teknik, taray\u0131c\u0131 daha HTML kodlar\u0131n\u0131 okurken &#8220;Bu resim \u00e7ok acil, hemen indir!&#8221; emrini vermenizi sa\u011flar.<\/p>\n<h4 data-path-to-node=\"5\"><span class=\"ez-toc-section\" id=\"A_Kullanimi\"><\/span>A. <code data-path-to-node=\"5\" data-index-in-node=\"3\">&lt;link rel=\"preload\"&gt;<\/code> Kullan\u0131m\u0131<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p data-path-to-node=\"6\">Genellikle CSS dosyalar\u0131n\u0131n i\u00e7inde saklanan arka plan resimlerini taray\u0131c\u0131 ge\u00e7 fark eder. Bunu engellemek i\u00e7in HTML&#8217;in <code data-path-to-node=\"6\" data-index-in-node=\"119\">&lt;head&gt;<\/code> etiketleri aras\u0131na \u015fu kodu ekleyerek taray\u0131c\u0131ya \u00f6ncelik verebilirsiniz:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"HTML-3\"><\/span><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-121 ng-star-inserted\"><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-121 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_4a0c0f2b4bc0bf6d&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_27cfd71fc76b34c0&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQ2QE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-121 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-121\">HTML<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-121 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-121\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-121\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-121\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-121\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preload\"<\/span> <span class=\"hljs-attr\">as<\/span>=<span class=\"hljs-string\">\"image\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"anasayfa-banner.jpg\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"image\/jpeg\"<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preload\"<\/span> <span class=\"hljs-attr\">as<\/span>=<span class=\"hljs-string\">\"image\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"banner-mobil.jpg\"<\/span> <span class=\"hljs-attr\">media<\/span>=<span class=\"hljs-string\">\"(max-width: 600px)\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"preload\"<\/span> <span class=\"hljs-attr\">as<\/span>=<span class=\"hljs-string\">\"image\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"banner-desktop.jpg\"<\/span> <span class=\"hljs-attr\">media<\/span>=<span class=\"hljs-string\">\"(min-width: 601px)\"<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><\/code-block><\/response-element><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-path-to-node=\"8\"><b data-path-to-node=\"8\" data-index-in-node=\"0\">Dikkat:<\/b> Sayfadaki t\u00fcm g\u00f6rselleri &#8220;preload&#8221; yapmay\u0131n. Sadece ekran\u0131n ilk a\u00e7\u0131l\u0131\u015f\u0131nda g\u00f6r\u00fcnen (Above the Fold) en \u00f6nemli 1-2 g\u00f6rsel i\u00e7in kullan\u0131n. Aksi takdirde bant geni\u015fli\u011fini t\u0131kayarak siteyi yava\u015flat\u0131rs\u0131n\u0131z.<\/p>\n<h4 data-path-to-node=\"9\"><span class=\"ez-toc-section\" id=\"B_HTTP2_Sunucu_Itmesi_Server_Push\"><\/span>B. HTTP\/2 Sunucu \u0130tmesi (Server Push)<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p data-path-to-node=\"10\">Bu y\u00f6ntem, sunucu ile taray\u0131c\u0131 aras\u0131ndaki ileti\u015fimi bir ad\u0131m \u00f6teye ta\u015f\u0131r. Taray\u0131c\u0131 hen\u00fcz HTML dosyas\u0131n\u0131 analiz edip &#8220;bana \u015fu resim laz\u0131m&#8221; demeden \u00f6nce, sunucu bu ihtiyac\u0131 tahmin eder ve resmi g\u00f6nderir.<\/p>\n<p data-path-to-node=\"11\"><b data-path-to-node=\"11\" data-index-in-node=\"0\">\u00d6zellikler:<\/b><\/p>\n<ul data-path-to-node=\"12\">\n<li>\n<p data-path-to-node=\"12,0,0\"><b data-path-to-node=\"12,0,0\" data-index-in-node=\"0\">Proaktif G\u00f6nderim:<\/b> Sunucu, HTML yan\u0131t\u0131yla birlikte kritik CSS ve g\u00f6rselleri (kullan\u0131c\u0131 istemeden) pakete ekler.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"12,1,0\"><b data-path-to-node=\"12,1,0\" data-index-in-node=\"0\">Bekleme S\u00fcresini Kald\u0131r\u0131r:<\/b> \u0130stek-yan\u0131t d\u00f6ng\u00fcs\u00fcn\u00fc (Round Trip Time) azalt\u0131r.<\/p>\n<\/li>\n<\/ul>\n<p data-path-to-node=\"13\"><b data-path-to-node=\"13\" data-index-in-node=\"0\">Avantajlar\u0131:<\/b><\/p>\n<ul data-path-to-node=\"14\">\n<li>\n<p data-path-to-node=\"14,0,0\">\u2714 <b data-path-to-node=\"14,0,0\" data-index-in-node=\"2\">\u0130lk y\u00fckleme s\u00fcresini (FCP) ciddi oranda k\u0131salt\u0131r.<\/b><\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"14,1,0\">\u2714 <b data-path-to-node=\"14,1,0\" data-index-in-node=\"2\">Beyaz ekran s\u00fcresini minimize ederek kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/b><\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"14,2,0\">\u2714 <b data-path-to-node=\"14,2,0\" data-index-in-node=\"2\">LCP (En B\u00fcy\u00fck \u0130\u00e7erikli Boyama) skorunu h\u0131zla d\u00fc\u015f\u00fcr\u00fcr.<\/b><\/p>\n<\/li>\n<\/ul>\n<p data-path-to-node=\"15\"><i data-path-to-node=\"15\" data-index-in-node=\"0\">(Not: Bu \u00f6zellik Cloudflare veya Litespeed sunucu ayarlar\u0131 \u00fczerinden aktif edilebilir.)<\/i><\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_Resimlerin_Gecikmeli_Yuklenmesi_Deferred_Loading\"><\/span>5. Resimlerin Gecikmeli Y\u00fcklenmesi (Deferred Loading)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lazy loading&#8217;in \u00f6tesine ge\u00e7en bu teknik, resimlerin sadece gerekli oldu\u011funda y\u00fcklenmesini sa\u011flar. Bu,<span>\u00a0<\/span><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde kritik bir rol oynar.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"A_Intersection_Observer_API\"><\/span>A. Intersection Observer API<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<pre><code class=\"language-javascript\">const observer = new IntersectionObserver((entries) =&gt; {\r\n  entries.forEach(entry =&gt; {\r\n    if (entry.isIntersecting) {\r\n      const img = entry.target;\r\n      img.src = img.dataset.src;\r\n      observer.unobserve(img);\r\n    }\r\n  });\r\n});<\/code><\/pre>\n<pre><code class=\"language-javascript\"><\/code><\/pre>\n<p><code class=\"language-javascript\">document.querySelectorAll('img.lazy').forEach(img =&gt; {<br \/>\nobserver.observe(img);<br \/>\n});<\/code><\/p>\n<h4><span class=\"ez-toc-section\" id=\"B_Placeholder_Stratejileri\"><\/span>B. Placeholder Stratejileri<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><strong>Blur-Up Tekni\u011fi:<\/strong><\/li>\n<\/ul>\n<p>&#8211; D\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc bir resim \u00f6nce y\u00fcklenir<br \/>\n&#8211; Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resim ard\u0131ndan y\u00fcklenir<strong>\u00d6rnek:<\/strong><\/p>\n<p><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-107 ng-star-inserted\"><\/code-block><\/response-element><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-107 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_1fe693a2d030814a&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_3c23d4ab05035c0d&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQwQE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-107 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-107\">HTML<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-107 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-107\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-107\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-107\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-107\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"image-container\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-image: url('kucuk-boyutlu-onizleme.jpg');\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"yuksek-cozunurluklu-resim.jpg\"<\/span> <span class=\"hljs-attr\">loading<\/span>=<span class=\"hljs-string\">\"lazy\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"blur-image\"<\/span> <span class=\"hljs-attr\">onload<\/span>=<span class=\"hljs-string\">\"this.classList.add('loaded')\"<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-108 ng-star-inserted\"><\/code-block><\/response-element><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-108 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_1fe693a2d030814a&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_3c23d4ab05035c0d&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQwgE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-108 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-108\">CSS<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-108 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-108\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-108\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-108\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-108\"><span class=\"hljs-comment\">\/* CSS Efekti *\/<\/span>\r\n<span class=\"hljs-selector-class\">.image-container<\/span> {\r\n  <span class=\"hljs-attribute\">background-size<\/span>: cover; <span class=\"hljs-comment\">\/* K\u00fc\u00e7\u00fck resim arka plan olarak yay\u0131l\u0131r *\/<\/span>\r\n  <span class=\"hljs-attribute\">background-position<\/span>: center;\r\n  <span class=\"hljs-attribute\">filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">10px<\/span>); <span class=\"hljs-comment\">\/* \u0130lk ba\u015fta bulan\u0131k g\u00f6r\u00fcn\u00fcm *\/<\/span>\r\n  <span class=\"hljs-attribute\">transition<\/span>: filter <span class=\"hljs-number\">0.5s<\/span> ease-out;\r\n}\r\n\r\n<span class=\"hljs-selector-class\">.blur-image<\/span> {\r\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\r\n  <span class=\"hljs-attribute\">transition<\/span>: opacity <span class=\"hljs-number\">0.5s<\/span> ease-in-out;\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: auto;\r\n}\r\n\r\n<span class=\"hljs-comment\">\/* Resim tamamen y\u00fcklendi\u011finde JS ile bu s\u0131n\u0131f eklenir *\/<\/span>\r\n<span class=\"hljs-selector-class\">.blur-image<\/span><span class=\"hljs-selector-class\">.loaded<\/span> {\r\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>; <span class=\"hljs-comment\">\/* Ger\u00e7ek resim belirir *\/<\/span>\r\n}\r\n<span class=\"hljs-selector-class\">.image-container<\/span><span class=\"hljs-selector-pseudo\">:has<\/span>(<span class=\"hljs-selector-class\">.loaded<\/span>) {\r\n  <span class=\"hljs-attribute\">filter<\/span>: <span class=\"hljs-built_in\">blur<\/span>(<span class=\"hljs-number\">0<\/span>); <span class=\"hljs-comment\">\/* Bulan\u0131kl\u0131k kald\u0131r\u0131l\u0131r *\/<\/span>\r\n}\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p data-path-to-node=\"5\"><b data-path-to-node=\"5\" data-index-in-node=\"0\">Alternatif: Bask\u0131n Renk (Dominant Color) Tekni\u011fi<\/b> Blur-up yerine, resmin bask\u0131n rengini arka plan olarak kullanmak daha hafiftir ve LCP (Largest Contentful Paint) s\u00fcresini iyile\u015ftirir.<\/p>\n<p><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-109 ng-star-inserted\"><\/code-block><\/response-element><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-109 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_1fe693a2d030814a&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_3c23d4ab05035c0d&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQwwE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-109 ng-star-inserted\">\n<p><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-109\">CSS<\/span><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"buttons ng-tns-c503815587-109 ng-star-inserted\"><\/div>\n<\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-109\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-109\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-109\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-109\"><span class=\"hljs-comment\">\/* Resim y\u00fcklenene kadar gri bir kutu yerine, resmin ana rengi g\u00f6r\u00fcn\u00fcr *\/<\/span>\r\n<span class=\"hljs-selector-tag\">img<\/span> {\r\n  <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f0f0f0<\/span>; <span class=\"hljs-comment\">\/* Resmin bask\u0131n rengi kodu buraya gelir *\/<\/span>\r\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\r\n  <span class=\"hljs-attribute\">height<\/span>: auto;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<h3 data-path-to-node=\"4\"><span class=\"ez-toc-section\" id=\"B_Cihaz_Tabanli_Optimizasyon_Donanim_Gucu_Algilama\"><\/span>B. Cihaz Tabanl\u0131 Optimizasyon (Donan\u0131m G\u00fcc\u00fc Alg\u0131lama)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-path-to-node=\"5\">Kullan\u0131c\u0131n\u0131n internet h\u0131z\u0131 y\u00fcksek olsa bile (\u00f6rne\u011fin Wi-Fi), kulland\u0131\u011f\u0131 cihaz giri\u015f seviyesi bir telefon ise a\u011f\u0131r g\u00f6rseller ve animasyonlar taray\u0131c\u0131y\u0131 kilitleyebilir. <b data-path-to-node=\"5\" data-index-in-node=\"167\">Device Memory API<\/b> kullanarak cihaz\u0131n RAM kapasitesine g\u00f6re g\u00f6rsel kalitesini dinamik olarak de\u011fi\u015ftirebilirsiniz.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"JavaScript_Cihazin_RAM_miktarini_kontrol_et_GB_cinsinden_const_memory_navigatordeviceMemory_4_Tarayici_desteklemiyorsa_varsayilan_4GB_kabul_et_const_cpuCores_navigatorhardwareConcurrency_4_Islemci_cekirdek_sayisi_if_memory_%3C_2_cpuCores_%3C_4_Dusuk_donanimli_cihaz_Low-End_Device_Animasyonlari_kapat_WebP_formatinda_sikistirilmis_daha_kucuk_gorsel_yukle_loadSimpleImageproduct-smallwebp_else_Yuksek_donanimli_cihaz_High-End_Device_Yuksek_cozunurluklu_zoom_yapilabilen_veya_animasyonlu_gorsel_yukle_loadHighResImageproduct-4kpng\"><\/span><response-element class=\"\" ng-version=\"0.0.0-PLACEHOLDER\"><code-block _nghost-ng-c503815587=\"\" class=\"ng-tns-c503815587-93 ng-star-inserted\"><\/p>\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block ng-tns-c503815587-93 ng-animate-disabled ng-trigger ng-trigger-codeBlockRevealAnimation\" jslog=\"223238;track:impression,attention;BardVeMetadataKey:[[&quot;r_d99425a95448f3aa&quot;,&quot;c_9bc5073c514eeaa7&quot;,null,&quot;rc_7b1805d2a1b13cc5&quot;,null,null,&quot;tr&quot;,null,1,null,null,1,0]]\" data-hveid=\"0\" decode-data-ved=\"1\" data-ved=\"0CAAQhtANahgKEwjrwufjwuaRAxUAAAAAHQAAAAAQrQE\">\n<div _ngcontent-ng-c503815587=\"\" class=\"code-block-decoration header-formatted gds-title-s ng-tns-c503815587-93 ng-star-inserted\"><span _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-93\">JavaScript<\/span><\/div>\n<div _ngcontent-ng-c503815587=\"\" class=\"formatted-code-block-internal-container ng-tns-c503815587-93\">\n<div _ngcontent-ng-c503815587=\"\" class=\"animated-opacity ng-tns-c503815587-93\">\n<pre _ngcontent-ng-c503815587=\"\" class=\"ng-tns-c503815587-93\"><code _ngcontent-ng-c503815587=\"\" role=\"text\" data-test-id=\"code-content\" class=\"code-container formatted ng-tns-c503815587-93\"><span class=\"hljs-comment\">\/\/ Cihaz\u0131n RAM miktar\u0131n\u0131 kontrol et (GB cinsinden)<\/span>\r\n<span class=\"hljs-keyword\">const<\/span> memory = navigator.deviceMemory || <span class=\"hljs-number\">4<\/span>; <span class=\"hljs-comment\">\/\/ Taray\u0131c\u0131 desteklemiyorsa varsay\u0131lan 4GB kabul et<\/span>\r\n<span class=\"hljs-keyword\">const<\/span> cpuCores = navigator.hardwareConcurrency || <span class=\"hljs-number\">4<\/span>; <span class=\"hljs-comment\">\/\/ \u0130\u015flemci \u00e7ekirdek say\u0131s\u0131<\/span>\r\n\r\n<span class=\"hljs-keyword\">if<\/span> (memory &lt; <span class=\"hljs-number\">2<\/span> || cpuCores &lt; <span class=\"hljs-number\">4<\/span>) {\r\n  <span class=\"hljs-comment\">\/\/ D\u00fc\u015f\u00fck donan\u0131ml\u0131 cihaz (Low-End Device):<\/span>\r\n  <span class=\"hljs-comment\">\/\/ Animasyonlar\u0131 kapat, WebP format\u0131nda s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f, daha k\u00fc\u00e7\u00fck g\u00f6rsel y\u00fckle<\/span>\r\n  loadSimpleImage(<span class=\"hljs-string\">'product-small.webp'<\/span>);\r\n} <span class=\"hljs-keyword\">else<\/span> {\r\n  <span class=\"hljs-comment\">\/\/ Y\u00fcksek donan\u0131ml\u0131 cihaz (High-End Device):<\/span>\r\n  <span class=\"hljs-comment\">\/\/ Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc, zoom yap\u0131labilen veya animasyonlu g\u00f6rsel y\u00fckle<\/span>\r\n  loadHighResImage(<span class=\"hljs-string\">'product-4k.png'<\/span>);\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<p><\/code-block><\/response-element><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p data-path-to-node=\"7\"><b data-path-to-node=\"7\" data-index-in-node=\"0\">Neden \u00d6nemli?<\/b> Bu y\u00f6ntem, \u00f6zellikle <b data-path-to-node=\"7\" data-index-in-node=\"35\">INP (Interaction to Next Paint)<\/b> skorunu korumak i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Eski cihazlarda a\u011f\u0131r g\u00f6rselleri i\u015flemek (decoding), sayfan\u0131n kayd\u0131r\u0131lmas\u0131n\u0131 (scroll) anl\u0131k olarak dondurabilir. Cihaza g\u00f6re y\u00fckleme yaparak bu sorunu k\u00f6kten \u00e7\u00f6zersiniz.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"7_Resimlerin_Otomatik_Optimizasyonu_icin_En_Iyi_Uygulamalar\"><\/span>7. Resimlerin Otomatik Optimizasyonu i\u00e7in En \u0130yi Uygulamalar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde ileri d\u00fczey teknikleri en verimli \u015fekilde kullanmak i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerilere dikkat edin:<\/p>\n<ol>\n<li><strong>Next-Gen Formatlar\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 AVIF ve WebP2 gibi modern formatlar\u0131 tercih edin.<\/li>\n<li><strong>AI Tabanl\u0131 Ara\u00e7lar\u0131 Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Otomatik optimizasyon i\u00e7in AI tabanl\u0131 ara\u00e7lar\u0131 kullan\u0131n.<\/li>\n<li><strong>\u00d6nbellekleme Stratejileri Uygulay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Taray\u0131c\u0131 ve sunucu \u00f6nbellekleme kullan\u0131n.<\/li>\n<li><strong>Preloading ve Deferred Loading Uygulay\u0131n<\/strong><span>\u00a0<\/span>\u2013 Kritik resimleri \u00f6nceden y\u00fckleyin, di\u011ferlerini geciktirin.<\/li>\n<li><strong>Adaptive Loading Kullan\u0131n<\/strong><span>\u00a0<\/span>\u2013 Kullan\u0131c\u0131n\u0131n cihaz\u0131na ve a\u011f h\u0131z\u0131na g\u00f6re resimleri optimize edin.<\/li>\n<li><strong>Test Edin<\/strong><span>\u00a0<\/span>\u2013 Google PageSpeed Insights veya Lighthouse ile performans\u0131 \u00f6l\u00e7\u00fcn.<\/li>\n<\/ol>\n<p><strong>\u00d6rnek:<\/strong><br \/>\nBir haber sitesi, AI tabanl\u0131 bir ara\u00e7 kullanarak resimlerini otomatik olarak optimize edebilir, AVIF format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilir ve adaptive loading uygulayabilir. Bu, sayfa y\u00fckleme h\u0131z\u0131n\u0131 %50-60 oran\u0131nda art\u0131rabilir.<\/p>\n<h3><\/h3>\n<p><strong>Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu<\/strong><span>\u00a0<\/span>s\u00fcrecinde ileri d\u00fczey teknikler, web sitelerinin performans\u0131n\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in kritik \u00f6neme sahiptir. Next-gen formatlar\u0131 kullanmak, AI tabanl\u0131 ara\u00e7lardan yararlanmak, \u00f6nbellekleme stratejileri uygulamak ve adaptive loading tekniklerini kullanmak, web sitelerinin y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Bu teknikleri uygulayarak, hem kullan\u0131c\u0131 memnuniyetini art\u0131rabilir hem de arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 iyile\u015ftirebilirsiniz.<\/p>\n<\/div>\n<\/section>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonunun \u00d6nemi Web sitelerinin h\u0131zl\u0131 y\u00fcklenmesi, hem kullan\u0131c\u0131 deneyimi hem de arama motoru s\u0131ralamalar\u0131 i\u00e7in kritik \u00f6neme sahiptir. Google, kullan\u0131c\u0131lar\u0131n h\u0131zl\u0131 ve sorunsuz bir deneyim ya\u015famas\u0131n\u0131 sa\u011flamak amac\u0131yla sayfa y\u00fckleme h\u0131z\u0131n\u0131 \u00f6nemli bir s\u0131ralama fakt\u00f6r\u00fc olarak de\u011ferlendirmektedir. Bu [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":19548,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,123,127,125],"tags":[18547,18810,18832,18821,18800,18813,18823,18824,18805,18837,8503,8347,18826,18819,18799,18835,18816,18828,6448,18802,18812,8343,18528,18831,18820,18833,18803,18830,18815,18834,18806,18804,18818,18518,18808,18801,18822,18814,18809,18836,18825,2743,18507,18811,18817,533,2749,18827,12617,505,18829,18807],"class_list":["post-19547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo","category-web-hosting","category-web-tasarim","category-web-yazilim","tag-core-web-vitals-iyilestirme","tag-dosya-boyutu-kucultme","tag-dosya-kucultme","tag-format-donusturme","tag-fotograf-boyutu-kucultme","tag-fotograf-sikistirma","tag-google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem","tag-google-pagespeed-arttirma","tag-google-pagespeed-optimizasyonu","tag-gorsel-arama-optimizasyonu","tag-gorsel-boyutlandirma","tag-gorsel-optimizasyonu","tag-gorsel-seo","tag-gorsel-seo-teknikleri","tag-gorsel-sikistirma","tag-gtmetrix","tag-hizli-resim-yukleme","tag-jpg-dosya-boyutu-kucultme","tag-jpg-sikistirma","tag-kalite-bozmadan-resim-kucultme","tag-kayipsiz-sikistirma","tag-lazy-loading","tag-lazy-loading-nedir","tag-mobil-site-hizlandirma","tag-mobil-uyumlu-resim","tag-online-fotograf-sikistirma","tag-online-resim-sikistirma","tag-pagespeed-insights","tag-photoshop-resim-sikistirma","tag-photoshop-web-icin-kaydet","tag-png-kucultme","tag-resim-boyutu-kucultme","tag-resim-kb-dusurme","tag-resim-optimizasyonu","tag-resim-seo","tag-resim-sikistirma","tag-resim-sikistirma-programi","tag-resim-yukleme-hizi","tag-seo-uyumlu-gorsel","tag-seo-uyumlu-resim","tag-site-acilis-hizi","tag-site-hiz-testi","tag-site-hizi-arttirma","tag-tinypng","tag-web-icin-resim-kaydetme","tag-web-sitesi-hizlandirma","tag-web-sitesi-performansi","tag-web-sitesi-resim-boyutu","tag-webp-donusturme","tag-wordpress-hizlandirma","tag-wordpress-resim-optimizasyon-eklentisi","tag-wordpress-resim-optimizasyonu"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog<\/title>\n<meta name=\"description\" content=\"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog\" \/>\n<meta property=\"og:description\" content=\"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\" \/>\n<meta property=\"og:site_name\" content=\"Vipservis Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vipserviscom\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-31T00:40:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-31T00:41:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"559\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vipservis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vipserviscom\" \/>\n<meta name=\"twitter:site\" content=\"@vipserviscom\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipservis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\"},\"author\":{\"name\":\"Vipservis\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/cdb61a7e4f2eef5e8f9550829d769ed2\"},\"headline\":\"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem\",\"datePublished\":\"2025-12-31T00:40:35+00:00\",\"dateModified\":\"2025-12-31T00:41:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\"},\"wordCount\":7753,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png\",\"keywords\":[\"Core Web Vitals iyile\u015ftirme\",\"dosya boyutu k\u00fc\u00e7\u00fcltme\",\"dosya k\u00fc\u00e7\u00fcltme\",\"format d\u00f6n\u00fc\u015ft\u00fcrme\",\"foto\u011fraf boyutu k\u00fc\u00e7\u00fcltme\",\"foto\u011fraf s\u0131k\u0131\u015ft\u0131rma\",\"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem\",\"google pagespeed artt\u0131rma\",\"google pagespeed optimizasyonu\",\"g\u00f6rsel arama optimizasyonu\",\"g\u00f6rsel boyutland\u0131rma\",\"g\u00f6rsel optimizasyonu\",\"g\u00f6rsel seo\",\"g\u00f6rsel seo teknikleri\",\"g\u00f6rsel s\u0131k\u0131\u015ft\u0131rma\",\"gtmetrix\",\"h\u0131zl\u0131 resim y\u00fckleme\",\"jpg dosya boyutu k\u00fc\u00e7\u00fcltme\",\"JPG s\u0131k\u0131\u015ft\u0131rma\",\"kalite bozmadan resim k\u00fc\u00e7\u00fcltme\",\"kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma\",\"lazy loading\",\"Lazy loading nedir\",\"mobil site h\u0131zland\u0131rma\",\"mobil uyumlu resim\",\"online foto\u011fraf s\u0131k\u0131\u015ft\u0131rma\",\"online resim s\u0131k\u0131\u015ft\u0131rma\",\"pagespeed insights\",\"photoshop resim s\u0131k\u0131\u015ft\u0131rma\",\"photoshop web i\u00e7in kaydet\",\"png k\u00fc\u00e7\u00fcltme\",\"resim boyutu k\u00fc\u00e7\u00fcltme\",\"resim kb d\u00fc\u015f\u00fcrme\",\"Resim optimizasyonu\",\"resim seo\",\"resim s\u0131k\u0131\u015ft\u0131rma\",\"resim s\u0131k\u0131\u015ft\u0131rma program\u0131\",\"resim y\u00fckleme h\u0131z\u0131\",\"seo uyumlu g\u00f6rsel\",\"seo uyumlu resim\",\"site a\u00e7\u0131l\u0131\u015f h\u0131z\u0131\",\"site h\u0131z testi\",\"Site h\u0131z\u0131 artt\u0131rma\",\"tinypng\",\"web i\u00e7in resim kaydetme\",\"web sitesi h\u0131zland\u0131rma\",\"web sitesi performans\u0131\",\"web sitesi resim boyutu\",\"WebP d\u00f6n\u00fc\u015ft\u00fcrme\",\"WordPress h\u0131zland\u0131rma\",\"wordpress resim optimizasyon eklentisi\",\"wordpress resim optimizasyonu\"],\"articleSection\":[\"SEO\",\"Web Hosting\",\"Web Tasar\u0131m\",\"Web Yaz\u0131l\u0131m\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\",\"url\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\",\"name\":\"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png\",\"datePublished\":\"2025-12-31T00:40:35+00:00\",\"dateModified\":\"2025-12-31T00:41:20+00:00\",\"description\":\"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage\",\"url\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png\",\"contentUrl\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png\",\"width\":1024,\"height\":559},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/www.vipservis.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#website\",\"url\":\"https:\/\/www.vipservis.com\/blog\/\",\"name\":\"Vipservis Blog\",\"description\":\"Vipservis Olarak 26 Y\u0131ll\u0131k Tecr\u00fcbemiz ile Cevap Arad\u0131\u011f\u0131n\u0131z T\u00fcm Sorular\u0131 Yaz\u0131yoruz.\",\"publisher\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vipservis.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#organization\",\"name\":\"Vipservis Bili\u015fim ve \u0130nternet Teknolojileri\",\"url\":\"https:\/\/www.vipservis.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2024\/09\/logo-1.png\",\"contentUrl\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2024\/09\/logo-1.png\",\"width\":500,\"height\":104,\"caption\":\"Vipservis Bili\u015fim ve \u0130nternet Teknolojileri\"},\"image\":{\"@id\":\"https:\/\/www.vipservis.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vipserviscom\",\"https:\/\/x.com\/vipserviscom\",\"https:\/\/www.instagram.com\/vipserviscom\",\"https:\/\/www.linkedin.com\/company\/vipservis?originalSubdomain=tr\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/cdb61a7e4f2eef5e8f9550829d769ed2\",\"name\":\"Vipservis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/litespeed\/avatar\/6600f3cb02baa85efeb72add678e6f83.jpg?ver=1775590891\",\"contentUrl\":\"https:\/\/www.vipservis.com\/blog\/wp-content\/litespeed\/avatar\/6600f3cb02baa85efeb72add678e6f83.jpg?ver=1775590891\",\"caption\":\"Vipservis\"},\"sameAs\":[\"https:\/\/vipservis.com\/blog\"],\"url\":\"https:\/\/www.vipservis.com\/blog\/author\/crawk\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog","description":"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/","og_locale":"tr_TR","og_type":"article","og_title":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog","og_description":"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!","og_url":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/","og_site_name":"Vipservis Blog","article_publisher":"https:\/\/www.facebook.com\/vipserviscom","article_published_time":"2025-12-31T00:40:35+00:00","article_modified_time":"2025-12-31T00:41:20+00:00","og_image":[{"width":1024,"height":559,"url":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png","type":"image\/png"}],"author":"Vipservis","twitter_card":"summary_large_image","twitter_creator":"@vipserviscom","twitter_site":"@vipserviscom","twitter_misc":{"Yazan:":"Vipservis","Tahmini okuma s\u00fcresi":"34 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#article","isPartOf":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/"},"author":{"name":"Vipservis","@id":"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/cdb61a7e4f2eef5e8f9550829d769ed2"},"headline":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem","datePublished":"2025-12-31T00:40:35+00:00","dateModified":"2025-12-31T00:41:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/"},"wordCount":7753,"commentCount":0,"publisher":{"@id":"https:\/\/www.vipservis.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png","keywords":["Core Web Vitals iyile\u015ftirme","dosya boyutu k\u00fc\u00e7\u00fcltme","dosya k\u00fc\u00e7\u00fcltme","format d\u00f6n\u00fc\u015ft\u00fcrme","foto\u011fraf boyutu k\u00fc\u00e7\u00fcltme","foto\u011fraf s\u0131k\u0131\u015ft\u0131rma","Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem","google pagespeed artt\u0131rma","google pagespeed optimizasyonu","g\u00f6rsel arama optimizasyonu","g\u00f6rsel boyutland\u0131rma","g\u00f6rsel optimizasyonu","g\u00f6rsel seo","g\u00f6rsel seo teknikleri","g\u00f6rsel s\u0131k\u0131\u015ft\u0131rma","gtmetrix","h\u0131zl\u0131 resim y\u00fckleme","jpg dosya boyutu k\u00fc\u00e7\u00fcltme","JPG s\u0131k\u0131\u015ft\u0131rma","kalite bozmadan resim k\u00fc\u00e7\u00fcltme","kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma","lazy loading","Lazy loading nedir","mobil site h\u0131zland\u0131rma","mobil uyumlu resim","online foto\u011fraf s\u0131k\u0131\u015ft\u0131rma","online resim s\u0131k\u0131\u015ft\u0131rma","pagespeed insights","photoshop resim s\u0131k\u0131\u015ft\u0131rma","photoshop web i\u00e7in kaydet","png k\u00fc\u00e7\u00fcltme","resim boyutu k\u00fc\u00e7\u00fcltme","resim kb d\u00fc\u015f\u00fcrme","Resim optimizasyonu","resim seo","resim s\u0131k\u0131\u015ft\u0131rma","resim s\u0131k\u0131\u015ft\u0131rma program\u0131","resim y\u00fckleme h\u0131z\u0131","seo uyumlu g\u00f6rsel","seo uyumlu resim","site a\u00e7\u0131l\u0131\u015f h\u0131z\u0131","site h\u0131z testi","Site h\u0131z\u0131 artt\u0131rma","tinypng","web i\u00e7in resim kaydetme","web sitesi h\u0131zland\u0131rma","web sitesi performans\u0131","web sitesi resim boyutu","WebP d\u00f6n\u00fc\u015ft\u00fcrme","WordPress h\u0131zland\u0131rma","wordpress resim optimizasyon eklentisi","wordpress resim optimizasyonu"],"articleSection":["SEO","Web Hosting","Web Tasar\u0131m","Web Yaz\u0131l\u0131m"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/","url":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/","name":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem - Vipservis Blog","isPartOf":{"@id":"https:\/\/www.vipservis.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage"},"image":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png","datePublished":"2025-12-31T00:40:35+00:00","dateModified":"2025-12-31T00:41:20+00:00","description":"Web sitenizi h\u0131zland\u0131rmak i\u00e7in Google h\u0131zl\u0131 y\u00fckleme i\u00e7in resim optimizasyonu tekniklerini \u00f6\u011frenin. 7 etkili y\u00f6ntemle sayfa h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131n!","breadcrumb":{"@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#primaryimage","url":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png","contentUrl":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2025\/12\/Google-Hizli-Yukleme-Icin-Resim-Optimizasyonu-Web-Sitenizi-Hizlandiracak-7-Etkili-Yontem.png","width":1024,"height":559},{"@type":"BreadcrumbList","@id":"https:\/\/www.vipservis.com\/blog\/google-hizli-yukleme-icin-resim-optimizasyonu-web-sitenizi-hizlandiracak-7-etkili-yontem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/www.vipservis.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Google H\u0131zl\u0131 Y\u00fckleme \u0130\u00e7in Resim Optimizasyonu: Web Sitenizi H\u0131zland\u0131racak 7 Etkili Y\u00f6ntem"}]},{"@type":"WebSite","@id":"https:\/\/www.vipservis.com\/blog\/#website","url":"https:\/\/www.vipservis.com\/blog\/","name":"Vipservis Blog","description":"Vipservis Olarak 26 Y\u0131ll\u0131k Tecr\u00fcbemiz ile Cevap Arad\u0131\u011f\u0131n\u0131z T\u00fcm Sorular\u0131 Yaz\u0131yoruz.","publisher":{"@id":"https:\/\/www.vipservis.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vipservis.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/www.vipservis.com\/blog\/#organization","name":"Vipservis Bili\u015fim ve \u0130nternet Teknolojileri","url":"https:\/\/www.vipservis.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.vipservis.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2024\/09\/logo-1.png","contentUrl":"https:\/\/www.vipservis.com\/blog\/wp-content\/uploads\/2024\/09\/logo-1.png","width":500,"height":104,"caption":"Vipservis Bili\u015fim ve \u0130nternet Teknolojileri"},"image":{"@id":"https:\/\/www.vipservis.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vipserviscom","https:\/\/x.com\/vipserviscom","https:\/\/www.instagram.com\/vipserviscom","https:\/\/www.linkedin.com\/company\/vipservis?originalSubdomain=tr"]},{"@type":"Person","@id":"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/cdb61a7e4f2eef5e8f9550829d769ed2","name":"Vipservis","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/www.vipservis.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.vipservis.com\/blog\/wp-content\/litespeed\/avatar\/6600f3cb02baa85efeb72add678e6f83.jpg?ver=1775590891","contentUrl":"https:\/\/www.vipservis.com\/blog\/wp-content\/litespeed\/avatar\/6600f3cb02baa85efeb72add678e6f83.jpg?ver=1775590891","caption":"Vipservis"},"sameAs":["https:\/\/vipservis.com\/blog"],"url":"https:\/\/www.vipservis.com\/blog\/author\/crawk\/"}]}},"_links":{"self":[{"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/posts\/19547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/comments?post=19547"}],"version-history":[{"count":2,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/posts\/19547\/revisions"}],"predecessor-version":[{"id":19550,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/posts\/19547\/revisions\/19550"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/media\/19548"}],"wp:attachment":[{"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/media?parent=19547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/categories?post=19547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vipservis.com\/blog\/wp-json\/wp\/v2\/tags?post=19547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}