{"id":32674,"date":"2025-10-24T16:41:07","date_gmt":"2025-10-24T13:41:07","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=32674"},"modified":"2025-10-24T16:41:07","modified_gmt":"2025-10-24T13:41:07","slug":"gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/","title":{"rendered":"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon"},"content":{"rendered":"

<\/p>\n

Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon<\/h2>\n

Web sitelerinin g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi \u00fczerinde resimlerin etkisi yads\u0131namaz. Ancak, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc veya optimize edilmemi\u015f resimler, sayfa y\u00fckleme s\u00fcrelerini dramatik bir \u015fekilde art\u0131rarak kullan\u0131c\u0131lar\u0131 uzakla\u015ft\u0131rabilir ve arama motoru s\u0131ralamalar\u0131n\u0131 olumsuz etkileyebilir. Modern web geli\u015ftirme \u00e7er\u00e7eveleri, bu sorunu \u00e7\u00f6zmek i\u00e7in \u00e7e\u015fitli ara\u00e7lar sunar ve Gatsby, statik site jenerat\u00f6rleri aras\u0131nda resim optimizasyonu konusunda \u00f6ne \u00e7\u0131kan \u00e7\u00f6z\u00fcmlerden birine sahiptir. Gatsby, gatsby-image<\/code> ve gatsby-plugin-sharp<\/code> eklentileri sayesinde geli\u015ftiricilere, performanstan \u00f6d\u00fcn vermeden \u00e7arp\u0131c\u0131 g\u00f6rsel i\u00e7erikler sunma imkan\u0131 tan\u0131r. Bu makalede, Gatsby ekosistemindeki resim y\u00f6netiminin derinliklerine inecek, bu iki g\u00fc\u00e7l\u00fc eklentinin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, nas\u0131l kuruldu\u011funu ve en iyi uygulamalarla nas\u0131l kullan\u0131labilece\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n

Gatsby’nin Resim Y\u00f6netimine Genel Bak\u0131\u015f<\/h3>\n

Web sitelerine resim eklemek basit bir i\u015flem gibi g\u00f6r\u00fcnse de, bu resimlerin farkl\u0131 cihazlarda, farkl\u0131 ekran boyutlar\u0131nda ve farkl\u0131 a\u011f ko\u015fullar\u0131nda en iyi performans\u0131 sunmas\u0131n\u0131 sa\u011flamak karma\u015f\u0131k bir g\u00f6revdir. Geleneksel yakla\u015f\u0131mlar genellikle \u015fu sorunlar\u0131 beraberinde getirir:<\/p>\n

* B\u00fcy\u00fck Dosya Boyutlar\u0131:<\/strong> Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc resimler, gereksiz yere b\u00fcy\u00fck dosya boyutlar\u0131na sahip olabilir, bu da sayfa y\u00fckleme s\u00fcrelerini uzat\u0131r.
\n* Yava\u015f Y\u00fckleme:<\/strong> Taray\u0131c\u0131lar, t\u00fcm resimler y\u00fcklenene kadar i\u00e7eri\u011fi g\u00f6stermekte gecikebilir.
\n* Duyars\u0131z Tasar\u0131m:<\/strong> Tek bir resim boyutu, hem mobil cihazlarda hem de masa\u00fcst\u00fc bilgisayarlarda iyi g\u00f6r\u00fcnmeyebilir.
\n* Manuel Optimizasyon:<\/strong> Her bir resmin manuel olarak farkl\u0131 boyutlara getirilmesi ve s\u0131k\u0131\u015ft\u0131r\u0131lmas\u0131 zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir.<\/p>\n

Gatsby, bu sorunlara otomatik ve ak\u0131ll\u0131 bir \u00e7\u00f6z\u00fcm sunar. Build (derleme) zaman\u0131nda resimlerinizi i\u015fleyerek, taray\u0131c\u0131ya en uygun format\u0131 ve boyutu sunar. Bu, hem geli\u015ftirici verimlili\u011fini art\u0131r\u0131r hem de son kullan\u0131c\u0131 i\u00e7in \u00fcst\u00fcn bir deneyim sa\u011flar. Bu sihrin arkas\u0131ndaki temel eklentiler gatsby-plugin-sharp<\/code> ve gatsby-image<\/code> (Gatsby v4 ve sonras\u0131 i\u00e7in gatsby-plugin-image<\/code> ile daha da geli\u015ftirilmi\u015ftir) ikilisidir.<\/p>\n

gatsby-plugin-sharp Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n

gatsby-plugin-sharp<\/code>, Gatsby’nin resim i\u015fleme motorudur. Libvips ad\u0131 verilen y\u00fcksek performansl\u0131 bir g\u00f6r\u00fcnt\u00fc i\u015fleme k\u00fct\u00fcphanesi \u00fczerine kurulmu\u015ftur. Bu eklenti, projenizdeki resim dosyalar\u0131n\u0131 otomatik olarak alg\u0131lar ve onlar\u0131 \u00e7e\u015fitli boyutlarda, formatlarda ve kalitelerde optimize edilmi\u015f versiyonlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/p>\n

Kurulum ve Yap\u0131land\u0131rma<\/h4>\n

gatsby-plugin-sharp<\/code>‘\u0131 kullanabilmek i\u00e7in \u00f6ncelikle projenize kurman\u0131z gerekir:<\/p>\n

npm install gatsby-plugin-sharp gatsby-transformer-sharp\n
veya<\/h2>\nyarn add gatsby-plugin-sharp gatsby-transformer-sharp<\/code><\/pre>\n
gatsby-transformer-sharp<\/code> eklentisi, gatsby-plugin-sharp<\/code> ile birlikte \u00e7al\u0131\u015f\u0131r ve resim dosyalar\u0131n\u0131z\u0131 GraphQL sorgular\u0131 arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir hale getirir. Bu iki eklentiyi gatsby-config.js<\/code> dosyan\u0131zda yap\u0131land\u0131rman\u0131z gerekir:<\/p>\n
\/\/ gatsby-config.js\nmodule.exports = {\n  plugins: [\n    gatsby-plugin-image<\/code>, \/\/ Gatsby v4 ve sonras\u0131 i\u00e7in \u00f6nerilen eklenti\n    gatsby-plugin-sharp<\/code>,\n    gatsby-transformer-sharp<\/code>,\n    {\n      resolve: gatsby-source-filesystem<\/code>,\n      options: {\n        name: images<\/code>,\n        path: ${__dirname}\/src\/images<\/code>, \/\/ Resimlerinizin bulundu\u011fu dizin\n      },\n    },\n  ],\n};<\/code><\/pre>\n
Burada gatsby-source-filesystem<\/code> eklentisi, belirtilen dizindeki dosyalar\u0131 (bu durumda src\/images<\/code>) Gatsby’nin veri katman\u0131na \u00e7eker. gatsby-transformer-sharp<\/code> bu dosyalar\u0131 i\u015fler ve onlara GraphQL \u00fczerinden eri\u015filebilecek ChildImageSharp<\/code> d\u00fc\u011f\u00fcmleri ekler.<\/p>\n
Fonksiyonlar\u0131 ve Yetenekleri<\/h4>\n
gatsby-plugin-sharp<\/code>‘\u0131n temel yetenekleri \u015funlard\u0131r:<\/p>\n
*   Boyutland\u0131rma (Resizing):<\/strong> Resimleri belirtilen geni\u015flik, y\u00fckseklik veya maksimum boyutlara g\u00f6re yeniden boyutland\u0131r\u0131r. Bu, farkl\u0131 ekran boyutlar\u0131 i\u00e7in birden fazla resim versiyonu olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r.
\n*   S\u0131k\u0131\u015ft\u0131rma (Compression):<\/strong> Resimlerin dosya boyutunu kaliteden fazla \u00f6d\u00fcn vermeden azalt\u0131r. JPEG, PNG ve WebP gibi farkl\u0131 formatlar i\u00e7in optimize edilmi\u015f s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131 kullan\u0131r.
\n*   Format D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong> Resimleri, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunan ve modern taray\u0131c\u0131lar taraf\u0131ndan desteklenen WebP gibi daha verimli formatlara d\u00f6n\u00fc\u015ft\u00fcrebilir. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck bir avantaj sa\u011flar.
\n*   Yer Tutucular (Placeholders):<\/strong> Resimler y\u00fcklenirken kullan\u0131c\u0131lara g\u00f6sterilecek d\u00fc\u015f\u00fck kaliteli (LQIP – Low Quality Image Placeholder) veya SVG tabanl\u0131 bulan\u0131k yer tutucular olu\u015fturur. Bu, sayfan\u0131n i\u00e7eri\u011finin y\u00fcklenirken bo\u015f g\u00f6r\u00fcnmesini engeller ve daha ak\u0131c\u0131 bir kullan\u0131c\u0131 deneyimi sunar.
\n*   \u00c7e\u015fitli \u0130\u015flemler:<\/strong> K\u0131rpma (cropping), grayscale (gri tonlama), rotasyon (rotation) gibi \u00e7e\u015fitli di\u011fer g\u00f6r\u00fcnt\u00fc i\u015fleme operasyonlar\u0131n\u0131 da destekler.<\/p>\n
Bu i\u015flemlerin tamam\u0131, Gatsby’nin build s\u00fcreci s\u0131ras\u0131nda ger\u00e7ekle\u015fir. Yani, siteniz canl\u0131ya ge\u00e7ti\u011finde, kullan\u0131c\u0131lar zaten optimize edilmi\u015f ve \u00f6nceden i\u015flenmi\u015f resimlerle kar\u015f\u0131la\u015f\u0131r.<\/p>\n
gatsby-image Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r? (Gatsby v4 ve Sonras\u0131: gatsby-plugin-image)<\/h3>\n
gatsby-image<\/code> (yeni ad\u0131yla gatsby-plugin-image<\/code>), gatsby-plugin-sharp<\/code> taraf\u0131ndan i\u015flenen resimleri React bile\u015fenleri arac\u0131l\u0131\u011f\u0131yla web sayfas\u0131na yerle\u015ftirmek i\u00e7in kullan\u0131lan bir ara\u00e7t\u0131r. Bu bile\u015fen, sadece resimleri g\u00f6stermekle kalmaz, ayn\u0131 zamanda bir dizi performans optimizasyonunu da otomatik olarak uygular. Gatsby v4 ile birlikte, gatsby-image<\/code> yerini gatsby-plugin-image<\/code>‘e b\u0131rakm\u0131\u015ft\u0131r ve GatsbyImage<\/code> ile StaticImage<\/code> olmak \u00fczere iki temel bile\u015fen sunar.<\/p>\n
gatsby-plugin-image’in Temel \u00d6zellikleri<\/h4>\n
gatsby-plugin-image<\/code>‘in sundu\u011fu ba\u015fl\u0131ca optimizasyonlar ve \u00f6zellikler \u015funlard\u0131r:<\/p>\n
*   Duyarl\u0131 Resimler (Responsive Images):<\/strong> srcset<\/code> ve sizes<\/code> niteliklerini kullanarak, taray\u0131c\u0131n\u0131n ekran boyutuna ve piksel yo\u011funlu\u011funa en uygun resim versiyonunu se\u00e7mesini sa\u011flar. Bu, mobil cihazlarda k\u00fc\u00e7\u00fck, masa\u00fcst\u00fcnde b\u00fcy\u00fck resimlerin otomatik olarak g\u00f6sterilmesi anlam\u0131na gelir.
\n*   Gecikmeli Y\u00fckleme (Lazy Loading):<\/strong> Resimleri yaln\u0131zca kullan\u0131c\u0131 g\u00f6r\u00fcnt\u00fcleme alan\u0131na (viewport) yakla\u015ft\u0131\u011f\u0131nda y\u00fckler. Bu, \u00f6zellikle uzun sayfalarda veya \u00e7ok say\u0131da resim i\u00e7eren sitelerde ilk y\u00fckleme s\u00fcresini \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.
\n*   Yer Tutucular (Placeholders):<\/strong> Resimler y\u00fcklenirken yer tutucu olarak bulan\u0131k bir versiyonunu veya d\u00fcz bir rengi g\u00f6sterir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve i\u00e7eri\u011fin daha h\u0131zl\u0131 y\u00fcklendi\u011fi hissini verir.
\n*   Modern Resim Formatlar\u0131:<\/strong> WebP gibi modern formatlar\u0131 otomatik olarak kullan\u0131r (taray\u0131c\u0131 deste\u011fi varsa) ve desteklemeyen taray\u0131c\u0131lar i\u00e7in yedek olarak JPEG\/PNG gibi formatlar\u0131 sunar.
\n*   G\u00f6rsel Efektler:<\/strong> Resimler y\u00fcklendi\u011finde hafif bir ge\u00e7i\u015f (fade-in) veya bulan\u0131kl\u0131ktan netli\u011fe ge\u00e7i\u015f (blur-up) gibi efektler uygulayabilir.
\n*   \u00d6n Y\u00fckleme (Preloading):<\/strong> Kritik resimler i\u00e7in \u00f6n y\u00fckleme ipu\u00e7lar\u0131 ekleyerek, taray\u0131c\u0131n\u0131n bu resimleri daha erken indirmesini sa\u011flar.
\n*   CLS (Cumulative Layout Shift) \u00d6nleme:<\/strong> Resimlerin yer tutucular\u0131 sayesinde, y\u00fckleme s\u0131ras\u0131nda sayfa d\u00fczeninin kaymas\u0131n\u0131 (layout shift) engeller, bu da Core Web Vitals metriklerini iyile\u015ftirir.<\/p>\n
Kurulum ve Kullan\u0131m<\/h4>\n
gatsby-plugin-image<\/code>‘i kullanmak i\u00e7in \u00f6ncelikle kurman\u0131z gerekir:<\/p>\n
npm install gatsby-plugin-image\n
veya<\/h2>\nyarn add gatsby-plugin-image<\/code><\/pre>\n
Ard\u0131ndan gatsby-config.js<\/code> dosyan\u0131za ekleyin (yukar\u0131daki \u00f6rnekte zaten eklemi\u015ftik).<\/p>\n
gatsby-plugin-image<\/code> iki ana bile\u015fen sunar: StaticImage<\/code> ve GatsbyImage<\/code>.<\/p>\n
*   StaticImage<\/code>:<\/strong> Derleme zaman\u0131nda (build time) bilinen, genellikle sabit bir konumdaki (\u00f6rne\u011fin src\/images\/logo.png<\/code>) resimler i\u00e7in kullan\u0131l\u0131r. Bu, sitenin logosu veya arka plan resimleri gibi de\u011fi\u015fmeyen g\u00f6rseller i\u00e7in idealdir.
\n*   GatsbyImage<\/code>:<\/strong> Dinamik olarak y\u00fcklenen resimler i\u00e7in kullan\u0131l\u0131r. Bu resimler genellikle GraphQL sorgular\u0131 arac\u0131l\u0131\u011f\u0131yla (\u00f6rne\u011fin bir blog yaz\u0131s\u0131n\u0131n \u00f6ne \u00e7\u0131kan g\u00f6rseli) al\u0131n\u0131r.<\/p>\n
StaticImage Kullan\u0131m\u0131<\/h5>\n
Bir React bile\u015feninde StaticImage<\/code> kullanmak olduk\u00e7a basittir:<\/p>\n
\/\/ src\/components\/Logo.js\nimport React from 'react';\nimport { StaticImage } from 'gatsby-plugin-image';\n\nconst Logo = () => {\n  return (\n    \n  );\n};\n\nexport default Logo;<\/code><\/pre>\n
StaticImage<\/code> bile\u015feni, do\u011frudan src<\/code> prop’u arac\u0131l\u0131\u011f\u0131yla resim yolunu al\u0131r. layout<\/code> prop’u (fixed<\/code>, fullWidth<\/code>, constrained<\/code>) resmin nas\u0131l davranaca\u011f\u0131n\u0131 belirler. placeholder<\/code> prop’u ise y\u00fckleme an\u0131nda ne t\u00fcr bir yer tutucu g\u00f6sterilece\u011fini ayarlar (blurred<\/code>, tracedSVG<\/code>, dominantColor<\/code>, none<\/code>).<\/p>\n
GatsbyImage Kullan\u0131m\u0131 (Dinamik Resimler i\u00e7in)<\/h5>\n
Dinamik resimler i\u00e7in, GraphQL sorgular\u0131 arac\u0131l\u0131\u011f\u0131yla resim verilerini \u00e7ekmemiz gerekir. \u00d6rne\u011fin, bir blog yaz\u0131s\u0131n\u0131n detay sayfas\u0131nda \u00f6ne \u00e7\u0131kan g\u00f6rseli g\u00f6stermek isteyebiliriz:<\/p>\n
\/\/ src\/templates\/BlogPost.js\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst BlogPost = ({ data }) => {\n  const image = getImage(data.markdownRemark.frontmatter.featuredImage);\n\n  return (\n    
\n      \n      {image && (\n        \n      )}\n      
\n    <\/div>\n  );\n};\n\nexport const query = graphql\n  query BlogPostById($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      html\n      frontmatter {\n        title\n        featuredImage {\n          childImageSharp {\n            gatsbyImageData(\n              width: 800 # Resmin maksimum geni\u015fli\u011fi\n              placeholder: BLURRED # Bulan\u0131k yer tutucu\n              formats: [AUTO, WEBP, AVIF] # Desteklenen formatlar\n            )\n          }\n        }\n      }\n    }\n  }\n<\/code>;\n\nexport default BlogPost;<\/code><\/pre>\n
Bu \u00f6rnekte, gatsbyImageData<\/code> sorgusu, gatsby-plugin-sharp<\/code>‘\u0131n gatsby-plugin-image<\/code> ile entegrasyonunu g\u00f6sterir. getImage<\/code> yard\u0131mc\u0131 fonksiyonu, GraphQL’den gelen veriyi GatsbyImage<\/code> bile\u015feninin kullanabilece\u011fi bir formata d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. gatsbyImageData<\/code> sorgusu i\u00e7inde width<\/code>, placeholder<\/code>, formats<\/code> gibi \u00e7e\u015fitli se\u00e7enekleri belirleyerek resmin nas\u0131l i\u015flenece\u011fini kontrol edebiliriz.<\/p>\n
Uygulamal\u0131 Bir \u00d6rnek: Ad\u0131m Ad\u0131m Resim Ekleme ve Optimize Etme<\/h3>\n
\u015eimdi, s\u0131f\u0131rdan bir Gatsby projesinde resim ekleme ve optimize etme s\u00fcrecini ad\u0131m ad\u0131m inceleyelim.<\/p>\n
1. Gatsby Projesi Olu\u015fturma (Atlayabilirsiniz)<\/h4>\n
E\u011fer bir Gatsby projeniz yoksa, h\u0131zl\u0131ca bir tane olu\u015fturabilirsiniz:<\/p>\n
gatsby new my-gatsby-site\ncd my-gatsby-site<\/code><\/pre>\n
2. Gerekli Eklentileri Kurma<\/h4>\n
Resim optimizasyonu i\u00e7in a\u015fa\u011f\u0131daki eklentilere ihtiyac\u0131m\u0131z var:<\/p>\n
*   gatsby-source-filesystem<\/code>: Dosya sisteminden resimleri \u00e7ekmek i\u00e7in.
\n*   gatsby-plugin-image<\/code>: Resim bile\u015fenlerini sa\u011flamak i\u00e7in.
\n*   gatsby-plugin-sharp<\/code>: Resim i\u015fleme motoru.
\n*   gatsby-transformer-sharp<\/code>: gatsby-plugin-sharp<\/code> ile gatsby-source-filesystem<\/code> aras\u0131ndaki k\u00f6pr\u00fc.<\/p>\n
npm install gatsby-source-filesystem gatsby-plugin-image gatsby-plugin-sharp gatsby-transformer-sharp<\/code><\/pre>\n
3. gatsby-config.js<\/code> Yap\u0131land\u0131rmas\u0131<\/h4>\n
gatsby-config.js<\/code> dosyan\u0131z\u0131 a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n
\/\/ gatsby-config.js\nmodule.exports = {\n  siteMetadata: {\n    title: Gatsby Resim Optimizasyonu<\/code>,\n    description: gatsby-image ve gatsby-plugin-sharp ile resim optimizasyonu \u00f6rne\u011fi.<\/code>,\n    author: @gatsbyjs<\/code>,\n  },\n  plugins: [\n    gatsby-plugin-image<\/code>,\n    gatsby-plugin-sharp<\/code>,\n    gatsby-transformer-sharp<\/code>,\n    {\n      resolve: gatsby-source-filesystem<\/code>,\n      options: {\n        name: images<\/code>,\n        path: ${__dirname}\/src\/images<\/code>, \/\/ Resimlerinizin bulunaca\u011f\u0131 dizin\n      },\n    },\n    {\n      resolve: gatsby-source-filesystem<\/code>,\n      options: {\n        name: blog<\/code>,\n        path: ${__dirname}\/blog<\/code>, \/\/ Blog yaz\u0131lar\u0131n\u0131n bulundu\u011fu dizin (markdown i\u00e7in)\n      },\n    },\n    gatsby-transformer-remark<\/code>, \/\/ Markdown dosyalar\u0131n\u0131 i\u015flemek i\u00e7in\n  ],\n};<\/code><\/pre>\n
Bu yap\u0131land\u0131rma, src\/images<\/code> ve blog<\/code> dizinlerindeki dosyalar\u0131 Gatsby’nin veri katman\u0131na \u00e7eker.<\/p>\n
4. Resim Dosyalar\u0131n\u0131 Projenin \u0130\u00e7ine Yerle\u015ftirme<\/h4>\n
src\/images<\/code> dizini olu\u015fturun ve i\u00e7ine bir veya iki \u00f6rnek resim ekleyin (\u00f6rne\u011fin hero.jpg<\/code>, product.png<\/code>).<\/p>\n
E\u011fer blog yaz\u0131s\u0131 \u00f6rne\u011fi kullanacaksan\u0131z, blog<\/code> dizini olu\u015fturun ve i\u00e7ine bir markdown dosyas\u0131 ekleyin (my-first-post.md<\/code> gibi):<\/p>\n
---\ntitle: \"Gatsby'de \u0130lk Resimli Yaz\u0131m\"\ndate: \"2023-10-27\"\nfeaturedImage: \"..\/src\/images\/hero.jpg\" # Resim yolu\n---\n\nBu benim Gatsby'de resim optimizasyonu ile ilgili ilk blog yaz\u0131m. A\u015fa\u011f\u0131da optimize edilmi\u015f bir resim g\u00f6receksiniz.\n\n![Hero Resmi](\/src\/images\/hero.jpg)<\/code><\/pre>\n
Not:<\/strong> Markdown i\u00e7indeki featuredImage<\/code> yolu, gatsby-source-filesystem<\/code> taraf\u0131ndan tan\u0131mlanan images<\/code> dizinine g\u00f6re olmal\u0131d\u0131r. ![Hero Resmi](\/src\/images\/hero.jpg)<\/code> Markdown syntax’\u0131, gatsby-remark-images<\/code> gibi eklentilerle \u00e7al\u0131\u015f\u0131r ancak gatsby-plugin-image<\/code> ile do\u011frudan entegre de\u011fildir. Genellikle bu t\u00fcr resimler i\u00e7in \u00f6zel bir bile\u015fen olu\u015fturulur veya gatsby-plugin-image<\/code>‘in GraphQL sorgular\u0131 kullan\u0131l\u0131r. Yukar\u0131daki \u00f6rnekte featuredImage<\/code> frontmatter’\u0131n\u0131 kullanmak daha iyi bir yakla\u015f\u0131md\u0131r.<\/p>\n
5. GraphQL Sorgular\u0131 ile Resim Verisi \u00c7ekme<\/h4>\n
\u015eimdi resimlerimizi React bile\u015fenlerinde kullanmak i\u00e7in GraphQL sorgular\u0131 yazal\u0131m.<\/p>\n
Sabit Resimler i\u00e7in StaticImage<\/code> Kullan\u0131m\u0131<\/h5>\n
src\/pages\/index.js<\/code> dosyan\u0131zda ana sayfa bile\u015fenini a\u015fa\u011f\u0131daki gibi g\u00fcncelleyin:<\/p>\n
\/\/ src\/pages\/index.js\nimport React from 'react';\nimport { StaticImage } from 'gatsby-plugin-image';\n\nconst IndexPage = () => {\n  return (\n    
\n      \n      
Bu, StaticImage<\/code> ile eklenmi\u015f optimize edilmi\u015f bir resimdir:<\/p>\n      \n      
Bu resim, sayfa y\u00fckleme h\u0131z\u0131n\u0131z\u0131 art\u0131rmak i\u00e7in otomatik olarak optimize edildi.<\/p>\n    <\/main>\n  );\n};\n\nexport default IndexPage;<\/code><\/pre>\n
Dinamik Resimler i\u00e7in GatsbyImage<\/code> Kullan\u0131m\u0131<\/h5>\n
Blog yaz\u0131n\u0131zdaki featuredImage<\/code>‘i g\u00f6stermek i\u00e7in bir blog post \u015fablonu olu\u015ftural\u0131m. src\/templates\/blog-post.js<\/code> (veya src\/pages\/blog\/{markdownRemark.frontmatter__slug}.js<\/code> dinamik route i\u00e7in):<\/p>\n
\/\/ src\/templates\/blog-post.js\nimport React from 'react';\nimport { graphql } from 'gatsby';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\n\nconst BlogPostTemplate = ({ data }) => {\n  const post = data.markdownRemark;\n  const featuredImage = getImage(post.frontmatter.featuredImage);\n\n  return (\n    
\n      \n      
{post.frontmatter.date}<\/p>\n      {featuredImage && (\n        \n      )}\n      
\n    <\/div>\n  );\n};\n\nexport const query = graphql\n  query BlogPostBySlug($id: String!) {\n    markdownRemark(id: { eq: $id }) {\n      html\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        featuredImage {\n          childImageSharp {\n            gatsbyImageData(\n              layout: CONSTRAINED # \u0130\u00e7eri\u011fin geni\u015fli\u011fine g\u00f6re k\u0131s\u0131tl\u0131\n              placeholder: BLURRED\n              formats: [AUTO, WEBP, AVIF]\n            )\n          }\n        }\n      }\n    }\n  }\n<\/code>;\n\nexport default BlogPostTemplate;<\/code><\/pre>\n
Bu \u015fablonu kullanabilmek i\u00e7in gatsby-node.js<\/code> dosyan\u0131zda dinamik sayfalar olu\u015fturman\u0131z gerekir.<\/p>\n
\/\/ gatsby-node.js\nconst path = require('path');\n\nexports.createPages = async ({ graphql, actions }) => {\n  const { createPage } = actions;\n  const blogPostTemplate = path.resolve(.\/src\/templates\/blog-post.js<\/code>);\n\n  const result = await graphql(\n    query {\n      allMarkdownRemark {\n        nodes {\n          id\n          frontmatter {\n            slug\n          }\n        }\n      }\n    }\n  <\/code>);\n\n  if (result.errors) {\n    throw result.errors;\n  }\n\n  const posts = result.data.allMarkdownRemark.nodes;\n\n  posts.forEach(post => {\n    createPage({\n      path: \/blog\/${post.frontmatter.slug}\/<\/code>,\n      component: blogPostTemplate,\n      context: {\n        id: post.id,\n      },\n    });\n  });\n};<\/code><\/pre>\n
Not:<\/strong> Yukar\u0131daki markdownRemark<\/code> sorgusu i\u00e7in frontmatter<\/code>‘\u0131n\u0131za slug<\/code> eklemeniz gerekebilir veya id<\/code> ile dinamik bir sayfa olu\u015fturabilirsiniz.<\/p>\n
6. Projeyi \u00c7al\u0131\u015ft\u0131rma<\/h4>\n
T\u00fcm bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra projenizi \u00e7al\u0131\u015ft\u0131rabilirsiniz:<\/p>\n
gatsby develop<\/code><\/pre>\n
http:\/\/localhost:8000<\/code> adresine giderek ana sayfan\u0131zdaki ve blog yaz\u0131n\u0131zdaki optimize edilmi\u015f resimleri g\u00f6rebilirsiniz. Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 kullanarak resimlerin srcset<\/code> ve sizes<\/code> \u00f6zelliklerini, ayr\u0131ca WebP format\u0131nda y\u00fcklenip y\u00fcklenmedi\u011fini kontrol edebilirsiniz.<\/p>\n
Geli\u015fmi\u015f Kullan\u0131m ve \u0130pu\u00e7lar\u0131<\/h3>\n
*   gatsby-plugin-sharp<\/code> Ayarlar\u0131:<\/strong> gatsby-config.js<\/code> i\u00e7inde gatsby-plugin-sharp<\/code>‘\u0131n se\u00e7eneklerini belirterek varsay\u0131lan kaliteyi veya di\u011fer parametreleri ayarlayabilirsiniz:<\/p>\n
{\n      resolve: gatsby-plugin-sharp<\/code>,\n      options: {\n        defaults: {\n          quality: 90,\n          formats: [auto<\/code>, webp<\/code>],\n          placeholder: blurred<\/code>,\n        },\n      },\n    },<\/code><\/pre>\n
*   GraphQL Fragmentleri:<\/strong> Tekrarlayan GraphQL sorgular\u0131ndan ka\u00e7\u0131nmak i\u00e7in fragmentler kullan\u0131n. gatsby-plugin-image<\/code> i\u00e7in \u00f6nceden tan\u0131mlanm\u0131\u015f fragmentler bulunur:<\/p>\n
fragment GatsbyImageSharpFluid on ImageSharpFluid {\n      ...GatsbyImageSharpFluid_withWebp\n    }<\/code><\/pre>\n
    Ancak gatsby-plugin-image<\/code> ile birlikte gatsbyImageData<\/code> alan\u0131n\u0131 kullan\u0131rken, sorgu i\u00e7inde t\u00fcm se\u00e7enekleri belirtmek daha yayg\u0131nd\u0131r.<\/p>\n
*   Arka Plan Resimleri:<\/strong> gatsby-background-image<\/code> gibi eklentiler, optimize edilmi\u015f Gatsby resimlerini arka plan resimleri olarak kullanman\u0131za olanak tan\u0131r.<\/p>\n
*   Resim CDN’leri:<\/strong> Baz\u0131 durumlarda, \u00f6zellikle \u00e7ok say\u0131da resim i\u00e7eren veya dinamik olarak y\u00fcklenen resimler i\u00e7in Cloudinary veya Imgix gibi resim CDN’leri ile entegrasyon d\u00fc\u015f\u00fcnebilirsiniz. Gatsby, bu t\u00fcr entegrasyonlar i\u00e7in de eklentiler sunar.<\/p>\n
Performans ve SEO Avantajlar\u0131<\/h3>\n
Gatsby’nin gatsby-image<\/code> ve gatsby-plugin-sharp<\/code> ile sundu\u011fu resim optimizasyonu, web sitenize bir dizi \u00f6nemli avantaj sa\u011flar:<\/p>\n
*   Daha H\u0131zl\u0131 Y\u00fckleme S\u00fcreleri:<\/strong> Optimize edilmi\u015f resimler, sayfa boyutunu azalt\u0131r ve taray\u0131c\u0131n\u0131n daha az veri indirmesini sa\u011flar, bu da sayfa y\u00fckleme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131r\u0131r.
\n*   Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> H\u0131zl\u0131 y\u00fcklenen sayfalar, daha ak\u0131c\u0131 bir gezinme deneyimi sunar. Gecikmeli y\u00fckleme ve yer tutucular, kullan\u0131c\u0131lar\u0131n resimlerin y\u00fcklenmesini beklemesini engeller.
\n*   Core Web Vitals \u0130yile\u015ftirmesi:<\/strong>
\n    *   Largest Contentful Paint (LCP):<\/strong> Resimler genellikle LCP i\u00e7in en b\u00fcy\u00fck \u00f6\u011felerdir. Optimize edilmi\u015f resimler, LCP’yi iyile\u015ftirir.
\n    *   Cumulative Layout Shift (CLS):<\/strong> Yer tutucular sayesinde resimler y\u00fcklenirken sayfa d\u00fczeninin kaymas\u0131 engellenir, bu da CLS puan\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr.
\n*   Daha \u0130yi SEO S\u0131ralamalar\u0131:<\/strong> Arama motorlar\u0131, h\u0131zl\u0131 ve iyi optimize edilmi\u015f siteleri tercih eder. Geli\u015fmi\u015f sayfa h\u0131z\u0131 ve Core Web Vitals puanlar\u0131, arama motoru s\u0131ralamalar\u0131n\u0131z\u0131 olumlu etkiler.
\n*   Daha Az Bant Geni\u015fli\u011fi Kullan\u0131m\u0131:<\/strong> Daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131, sunucu bant geni\u015fli\u011fi kullan\u0131m\u0131n\u0131 azalt\u0131r ve bar\u0131nd\u0131rma maliyetlerini d\u00fc\u015f\u00fcrebilir.<\/p>\n
S\u0131k Kar\u015f\u0131la\u015f\u0131lan Sorunlar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n
*   Resimler G\u00f6r\u00fcnm\u00fcyor \/ GraphQL Hatas\u0131:<\/strong>
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> gatsby-config.js<\/code> dosyan\u0131zdaki gatsby-source-filesystem<\/code> yolunun do\u011fru oldu\u011fundan ve resimlerinizin bu dizinde bulundu\u011fundan emin olun.
\n    *   gatsby-plugin-sharp<\/code> ve gatsby-transformer-sharp<\/code>‘\u0131n do\u011fru kuruldu\u011fundan ve yap\u0131land\u0131r\u0131ld\u0131\u011f\u0131ndan emin olun.
\n    *   GraphQL sorgunuzun do\u011fru oldu\u011fundan ve gatsbyImageData<\/code> alan\u0131n\u0131 do\u011fru \u015fekilde \u00e7a\u011f\u0131rd\u0131\u011f\u0131n\u0131zdan emin olun (gatsby develop<\/code> \u00e7al\u0131\u015f\u0131rken http:\/\/localhost:8000\/__graphql<\/code> adresinden sorgular\u0131n\u0131z\u0131 test edebilirsiniz).
\n*   StaticImage<\/code> veya GatsbyImage<\/code> Hatalar\u0131:<\/strong>
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> gatsby-plugin-image<\/code> eklentisinin kurulu ve gatsby-config.js<\/code>‘e ekli oldu\u011fundan emin olun.
\n    *   StaticImage<\/code> i\u00e7in src<\/code> prop’unun, GatsbyImage<\/code> i\u00e7in ise image<\/code> prop’unun do\u011fru veriyle beslendi\u011finden emin olun.
\n*   Resimler Beklendi\u011fi Gibi Optimize Edilmiyor:<\/strong>
\n    *   \u00c7\u00f6z\u00fcm:<\/strong> gatsbyImageData<\/code> sorgunuzdaki width<\/code>, quality<\/code>, formats<\/code> gibi parametreleri kontrol edin. gatsby-plugin-sharp<\/code>‘\u0131n options<\/code> k\u0131sm\u0131ndaki defaults<\/code> ayarlar\u0131n\u0131 g\u00f6zden ge\u00e7irin.
\n    *   Taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131nda a\u011f sekmesini kontrol ederek y\u00fcklenen resimlerin boyutlar\u0131n\u0131 ve formatlar\u0131n\u0131 inceleyin.<\/p>\n
Sonu\u00e7<\/h3>\n
Gatsby, gatsby-image<\/code> ve gatsby-plugin-sharp<\/code> (veya yeni ad\u0131yla gatsby-plugin-image<\/code>) ikilisi sayesinde, web sitelerinde resim optimizasyonu konusunda sekt\u00f6r lideri bir \u00e7\u00f6z\u00fcm sunar. Bu eklentiler, geli\u015ftiricilerin karma\u015f\u0131k resim i\u015fleme g\u00f6revlerini otomatikle\u015ftirerek, hem zamandan tasarruf etmelerini hem de son kullan\u0131c\u0131lar i\u00e7in \u00fcst\u00fcn performansl\u0131 ve g\u00f6rsel olarak zengin siteler olu\u015fturmalar\u0131n\u0131 sa\u011flar. Duyarl\u0131 resimler, gecikmeli y\u00fckleme, modern format deste\u011fi ve yer tutucular gibi \u00f6zellikler, bir Gatsby sitesinin h\u0131z\u0131n\u0131, SEO’sunu ve genel kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131 s\u00fcrekli evriliyor ve g\u00f6rsel i\u00e7eriklerin \u00f6nemi artmaya devam ediyor. Gatsby’nin bu alandaki g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131, geli\u015ftiricilere gelece\u011fe haz\u0131r, y\u00fcksek performansl\u0131 ve s\u00fcrd\u00fcr\u00fclebilir web \u00e7\u00f6z\u00fcmleri in\u015fa etme yetene\u011fi sunuyor. Gatsby ile resim y\u00f6netimi, art\u0131k bir y\u00fck olmaktan \u00e7\u0131k\u0131p, sitenizin en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri haline geliyor.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon\nWeb sitelerinin g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi \u00fczerind","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-32674","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nGatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon\" \/>\n<meta property=\"og:description\" content=\"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon Web sitelerinin g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi \u00fczerind\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-24T13:41:07+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon\",\"datePublished\":\"2025-10-24T13:41:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\"},\"wordCount\":2284,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\",\"name\":\"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-24T13:41:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","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:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/","og_locale":"tr_TR","og_type":"article","og_title":"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon","og_description":"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon Web sitelerinin g\u00f6rsel \u00e7ekicili\u011fi ve kullan\u0131c\u0131 deneyimi \u00fczerind","og_url":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-24T13:41:07+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon","datePublished":"2025-10-24T13:41:07+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/"},"wordCount":2284,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/","url":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/","name":"Gatsby'de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-24T13:41:07+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/gatsbyde-resim-yonetimi-gatsby-image-ve-gatsby-plugin-sharp-ile-optimizasyon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Gatsby’de Resim Y\u00f6netimi: gatsby-image ve gatsby-plugin-sharp ile Optimizasyon"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=32674"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32674\/revisions"}],"predecessor-version":[{"id":32675,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/32674\/revisions\/32675"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=32674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=32674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=32674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}