{"id":35788,"date":"2025-12-03T22:01:06","date_gmt":"2025-12-03T19:01:06","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/eleventy-shortcodes-ile-duyarli-gorseller-ve-satir-ici-svg-hizli-baslangic\/"},"modified":"2025-12-03T22:01:06","modified_gmt":"2025-12-03T19:01:06","slug":"eleventy-shortcodes-ile-duyarli-gorseller-ve-satir-ici-svg-hizli-baslangic","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/eleventy-shortcodes-ile-duyarli-gorseller-ve-satir-ici-svg-hizli-baslangic\/","title":{"rendered":"Eleventy Shortcodes ile Duyarl\u0131 G\u00f6rseller ve Sat\u0131r \u0130\u00e7i SVG: H\u0131zl\u0131 Ba\u015flang\u0131\u00e7"},"content":{"rendered":"

<\/p>\n

Web sitelerinizin y\u00fckleme h\u0131z\u0131 ve g\u00f6rsel kalitesi aras\u0131nda denge kurmakta zorlan\u0131yor musunuz? Sayfa h\u0131z\u0131n\u0131 d\u00fc\u015f\u00fcren b\u00fcy\u00fck resim dosyalar\u0131 veya her ikon i\u00e7in ayr\u0131 bir HTTP iste\u011fi, kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir. Bu rehber, Eleventy statik site jenerat\u00f6r\u00fcn\u00fc kullanarak duyarl\u0131 g\u00f6rselleri ve sat\u0131r i\u00e7i SVG’leri (inline SVG) shortcode’lar arac\u0131l\u0131\u011f\u0131yla nas\u0131l optimize edece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131kl\u0131yor.<\/p>\n

G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n web sitelerinden beklentileri her zamankinden daha y\u00fcksek. H\u0131zl\u0131 y\u00fcklenen, g\u00f6rsel olarak \u00e7ekici ve t\u00fcm cihazlarda sorunsuz \u00e7al\u0131\u015fan web siteleri art\u0131k bir l\u00fcks de\u011fil, bir zorunluluktur. Ancak bu hedeflere ula\u015fmak genellikle b\u00fcy\u00fck bir zorluktur. \u00d6zellikle g\u00f6rseller, bir web sayfas\u0131n\u0131n toplam boyutunun \u00f6nemli bir k\u0131sm\u0131n\u0131 olu\u015fturarak y\u00fckleme s\u00fcrelerini uzatabilir ve mobil kullan\u0131c\u0131lar i\u00e7in veri t\u00fcketimini art\u0131rabilir. Bir yandan \u00e7arp\u0131c\u0131 g\u00f6rsellerle ziyaret\u00e7ilerin dikkatini \u00e7ekmek isterken, di\u011fer yandan site performans\u0131ndan \u00f6d\u00fcn vermek zorunda kalmak, bir\u00e7ok geli\u015ftiricinin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 yayg\u0131n bir ikilemdir.<\/p>\n

Peki, bu ikilemi nas\u0131l a\u015fabiliriz? Eleventy gibi modern bir statik site jenerat\u00f6r\u00fc ve onun sundu\u011fu k\u0131sa kodlar (shortcodes) bu noktada devreye giriyor. Geleneksel yakla\u015f\u0131mlarla her g\u00f6rselin farkl\u0131 boyutlar\u0131n\u0131 manuel olarak olu\u015fturmak veya her ikon i\u00e7in ayr\u0131 bir iste\u011fi y\u00f6netmek olduk\u00e7a zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7 olabilir. Eleventy shortcode’lar\u0131, bu tekrarlayan g\u00f6revleri otomatikle\u015ftirerek geli\u015ftirme s\u00fcrecini basitle\u015ftirir ve web sitelerinizin yaln\u0131zca h\u0131zl\u0131 de\u011fil, ayn\u0131 zamanda bak\u0131m\u0131 kolay ve \u00f6l\u00e7eklenebilir olmas\u0131n\u0131 sa\u011flar. Duyarl\u0131 g\u00f6rseller i\u00e7in <\/code> ve srcset<\/code> gibi HTML5 \u00f6zelliklerini, SVG’ler i\u00e7inse sat\u0131r i\u00e7i kullan\u0131m ve optimizasyon tekniklerini tek bir \u015fablon i\u015flevi alt\u0131nda birle\u015ftirebiliriz.<\/p>\n

Bu makalede, Eleventy shortcode’lar\u0131n\u0131n g\u00fcc\u00fcn\u00fc kullanarak web sitelerinizdeki g\u00f6rsel varl\u0131klar\u0131 nas\u0131l d\u00f6n\u00fc\u015ft\u00fcrece\u011finizi, performans\u0131 nas\u0131l art\u0131raca\u011f\u0131n\u0131z\u0131 ve geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 nas\u0131l iyile\u015ftirece\u011finizi ayr\u0131nt\u0131l\u0131 bir \u015fekilde inceleyece\u011fiz. \u0130ster yeni ba\u015flayan bir geli\u015ftirici olun, ister deneyimli bir profesyonel, burada sunulan ad\u0131m ad\u0131m \u00f6rnekler ve ger\u00e7ek d\u00fcnya senaryolar\u0131yla, web projelerinize entegre edebilece\u011finiz pratik \u00e7\u00f6z\u00fcmler bulacaks\u0131n\u0131z. B\u00f6ylece, ziyaret\u00e7ilerinize g\u00f6z al\u0131c\u0131 ve y\u0131ld\u0131r\u0131m h\u0131z\u0131nda bir deneyim sunarken, geli\u015ftirme s\u00fcrecindeki verimlili\u011finizi de maksimize edebileceksiniz. Sayfa h\u0131z\u0131 optimizasyonu ve g\u00f6rsel kalitesi aras\u0131ndaki dengeyi nihayet yakalama zaman\u0131 geldi.<\/p>\n

Eleventy Nedir ve Shortcode’lar Neden Bu Kadar \u00d6nemli?<\/h2>\n

Eleventy (11ty), JavaScript ile yaz\u0131lm\u0131\u015f, h\u0131zl\u0131 ve esnek bir statik site jenerat\u00f6r\u00fcd\u00fcr (SSG). Dinamik i\u00e7erik y\u00f6netim sistemlerinin (CMS) aksine, Eleventy veritaban\u0131 veya sunucu taraf\u0131nda \u00e7al\u0131\u015fma zaman\u0131 gerektirmeyen, do\u011frudan taray\u0131c\u0131da sunulabilecek HTML, CSS ve JavaScript dosyalar\u0131 \u00fcretir. Bu yakla\u015f\u0131m, web sitelerinin y\u00fcklenme h\u0131z\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r, g\u00fcvenlik risklerini azalt\u0131r ve bar\u0131nd\u0131rma maliyetlerini d\u00fc\u015f\u00fcr\u00fcr. Eleventy’nin en \u00e7ekici \u00f6zelliklerinden biri, farkl\u0131 \u015fablon dillerini (Nunjucks, Liquid, Markdown, EJS vb.) desteklemesi ve geli\u015ftiricilere i\u00e7eriklerini nas\u0131l y\u00f6netecekleri konusunda b\u00fcy\u00fck bir esneklik sunmas\u0131d\u0131r. Web sitelerinin performans\u0131 s\u00f6z konusu oldu\u011funda, Eleventy’nin statik yap\u0131s\u0131, i\u00e7erik da\u011f\u0131t\u0131m a\u011flar\u0131 (CDN) ile m\u00fckemmel bir uyum sa\u011flayarak global eri\u015filebilirli\u011fi ve h\u0131z\u0131 daha da optimize eder.<\/p>\n

Shortcode’lar ise Eleventy ekosisteminin temel ta\u015flar\u0131ndan biridir ve i\u00e7erik yazarlar\u0131 ile geli\u015ftiriciler aras\u0131ndaki k\u00f6pr\u00fcy\u00fc kurar. Temelde, shortcode’lar \u015fablon dilleri i\u00e7inde tan\u0131mlanan, belirli bir i\u015flevselli\u011fi yerine getiren \u00f6zel etiketlerdir. \u00d6rne\u011fin, Markdown dosyan\u0131z\u0131n i\u00e7ine <\/p>\n

{% image \"src\/image.jpg\", \"Alternatif Metin\" %}<\/pre>\n
<\/code> gibi basit bir kod par\u00e7ac\u0131\u011f\u0131 yazarak, Eleventy'nin bu kodu \u00e7ok daha karma\u015f\u0131k bir HTML yap\u0131s\u0131na (\u00f6rne\u011fin, duyarl\u0131 bir <\/code> etiketi) d\u00f6n\u00fc\u015ft\u00fcrmesini sa\u011flayabilirsiniz. Bu, i\u00e7eri\u011fi yazarken HTML'in karma\u015f\u0131kl\u0131\u011f\u0131ndan soyutlanman\u0131z\u0131 ve daha temiz, daha okunabilir Markdown veya \u015fablon dosyalar\u0131 olu\u015fturman\u0131z\u0131 sa\u011flar.<\/p>\n
Shortcode'lar\u0131n \u00f6nemi, tekrarlanabilirli\u011fi ve bak\u0131m\u0131 kolayla\u015ft\u0131rmas\u0131yla daha da belirginle\u015fir. Bir g\u00f6rselin duyarl\u0131 olmas\u0131 i\u00e7in gereken <\/code> etiketi, srcset<\/code> \u00f6znitelikleri, farkl\u0131 boyutlar ve formatlar (WebP, AVIF) gibi detaylar\u0131 her seferinde manuel olarak yazmak yerine, bu mant\u0131\u011f\u0131 tek bir shortcode i\u00e7inde kapsayabilirsiniz. Daha sonra bu shortcode'u projenizin herhangi bir yerinde, istedi\u011finiz kadar kullanabilirsiniz. E\u011fer g\u00f6rsel i\u015fleme mant\u0131\u011f\u0131nda bir de\u011fi\u015fiklik yapman\u0131z gerekirse, sadece shortcode'un tan\u0131m\u0131n\u0131 g\u00fcncellemeniz yeterli olur; bu de\u011fi\u015fiklik t\u00fcm kullan\u0131ld\u0131\u011f\u0131 yerlere otomatik olarak yans\u0131r. Bu, hem geli\u015ftirme s\u00fcresinden tasarruf sa\u011flar hem de proje genelinde tutarl\u0131l\u0131k ve hata riskini azalt\u0131r. Ayr\u0131ca, i\u00e7erik yazarlar\u0131n\u0131n teknik detaylara tak\u0131lmadan g\u00f6rselleri kolayca eklemesine olanak tan\u0131r, bu da i\u015f ak\u0131\u015f\u0131n\u0131 h\u0131zland\u0131r\u0131r ve i\u00e7erik \u00fcretimine odaklanmay\u0131 kolayla\u015ft\u0131r\u0131r. Eleventy'nin esnek shortcode yap\u0131s\u0131 sayesinde, sadece g\u00f6rsellerle de\u011fil, inline SVG'lerden \u00f6zel bile\u015fenlere kadar her t\u00fcrl\u00fc dinamik i\u00e7eri\u011fi statik sitelerinize entegre edebilirsiniz, b\u00f6ylece web projelerinizin potansiyelini maksimuma \u00e7\u0131kar\u0131rs\u0131n\u0131z.<\/p>\n
Duyarl\u0131 G\u00f6rseller \u0130\u00e7in Eleventy Shortcode Nas\u0131l Olu\u015fturulur?<\/h2>\n
Web performans\u0131n\u0131 art\u0131rman\u0131n ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin en etkili yollar\u0131ndan biri, duyarl\u0131 g\u00f6rseller kullanmakt\u0131r. Geleneksel \"A\u00e7\u0131klama\"<\/code> etiketi, t\u00fcm cihazlar i\u00e7in tek bir g\u00f6rsel boyutu sunar ve bu da ya k\u00fc\u00e7\u00fck ekranlarda gereksiz b\u00fcy\u00fck g\u00f6rsellerin indirilmesine ya da b\u00fcy\u00fck ekranlarda pikselli g\u00f6rsellerin g\u00f6r\u00fcnt\u00fclenmesine yol a\u00e7ar. Bu sorunu \u00e7\u00f6zmek i\u00e7in HTML5 ile tan\u0131t\u0131lan <\/code> eleman\u0131 ve srcset<\/code> \u00f6zniteli\u011fi, taray\u0131c\u0131n\u0131n ekran boyutuna, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011fe ve hatta a\u011f h\u0131z\u0131na g\u00f6re en uygun g\u00f6rseli se\u00e7mesine olanak tan\u0131r. Ancak bu yap\u0131lar\u0131 manuel olarak olu\u015fturmak karma\u015f\u0131k ve tekrarlay\u0131c\u0131 bir s\u00fcre\u00e7tir. \u0130\u015fte burada Eleventy shortcode'lar\u0131 devreye girer. Ad\u0131m ad\u0131m, bu karma\u015f\u0131k yap\u0131y\u0131 otomatik olarak \u00fcreten bir shortcode nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z\u0131 inceleyelim:<\/p>\n
Ad\u0131m 1: Eleventy Projesini Kurmak<\/h3>\n
E\u011fer hen\u00fcz bir Eleventy projeniz yoksa, h\u0131zl\u0131ca bir ba\u015flang\u0131\u00e7 yapal\u0131m. Terminalinizde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak yeni bir proje olu\u015fturabilir ve gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyebilirsiniz:<\/p>\n
\nmkdir my-eleventy-site\ncd my-eleventy-site\nnpm init -y\nnpm install @11ty\/eleventy\n    <\/pre>\n
<\/code><\/p>\n
Daha sonra, projenizin k\u00f6k dizininde .eleventy.js<\/code> ad\u0131nda bir yap\u0131land\u0131rma dosyas\u0131 ve index.md<\/code> gibi bir i\u00e7erik dosyas\u0131 olu\u015fturun. .eleventy.js<\/code> i\u00e7inde eleventy-img<\/code> eklentisini kuraca\u011f\u0131z ve shortcode'umuzu tan\u0131mlayaca\u011f\u0131z.<\/p>\n
\n\/\/ .eleventy.js\nmodule.exports = function(eleventyConfig) {\n  \/\/ Shortcode'lar\u0131m\u0131z\u0131 burada tan\u0131mlayaca\u011f\u0131z\n  return {\n    dir: {\n      input: \".\",\n      output: \"_site\"\n    }\n  };\n};\n    <\/pre>\n
<\/code><\/p>\n
Ad\u0131m 2: G\u00f6rsel \u0130\u015fleme Eklentisini Kurmak<\/h3>\n
Farkl\u0131 boyutlarda ve formatlarda g\u00f6rseller \u00fcretmek i\u00e7in eleventy-img<\/code> eklentisini kullanaca\u011f\u0131z. Bu eklenti, g\u00f6rselleri otomatik olarak yeniden boyutland\u0131r\u0131r, s\u0131k\u0131\u015ft\u0131r\u0131r ve modern formatlara (WebP, AVIF) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Kurulum i\u00e7in:<\/p>\n
\nnpm install @11ty\/eleventy-img\n    <\/pre>\n
<\/code><\/p>\n
Ad\u0131m 3: Temel G\u00f6rsel Shortcode Fonksiyonunu Yazmak<\/h3>\n
\u015eimdi .eleventy.js<\/code> dosyam\u0131zda image<\/code> ad\u0131nda bir asenkron shortcode tan\u0131mlayal\u0131m. Bu shortcode, bir kaynak g\u00f6rsel yolu, alternatif metin ve iste\u011fe ba\u011fl\u0131 olarak geni\u015flikler alacak.<\/p>\n
\n\/\/ .eleventy.js\nconst Image = require(\"@11ty\/eleventy-img\");\n\nmodule.exports = function(eleventyConfig) {\n  eleventyConfig.addNunjucksAsyncShortcode(\"image\", async function(src, alt, widths = [null], sizes = \"100vw\") {\n    let metadata = await Image(src, {\n      widths: widths,\n      formats: [\"avif\", \"webp\", \"jpeg\"],\n      outputDir: \".\/_site\/img\/\",\n      urlPath: \"\/img\/\"\n    });\n\n    let imageAttributes = {\n      alt,\n      sizes,\n      loading: \"lazy\",\n      decoding: \"async\",\n    };\n\n    return Image.generateHTML(metadata, imageAttributes);\n  });\n\n  return {\n    dir: {\n      input: \".\",\n      output: \"_site\"\n    }\n  };\n};\n    <\/pre>\n
<\/code><\/p>\n
Yukar\u0131daki kodda:<\/p>\n
    \n
  • Image(src, options)<\/code>: Belirtilen g\u00f6rseli i\u015fler ve farkl\u0131 boyutlarda\/formatlarda \u00e7\u0131kt\u0131lar \u00fcretir. widths: [null]<\/code>, orijinal geni\u015fli\u011fi korur, di\u011fer say\u0131lar belirli geni\u015flikleri ifade eder.<\/li>\n
  • formats: [\"avif\", \"webp\", \"jpeg\"]<\/code>: G\u00f6rselin hangi formatlarda d\u00f6n\u00fc\u015ft\u00fcr\u00fclece\u011fini belirtir. AVIF ve WebP, JPEG'den daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar.<\/li>\n
  • outputDir<\/code> ve urlPath<\/code>: \u0130\u015flenmi\u015f g\u00f6rsellerin nereye kaydedilece\u011fini ve web'de hangi URL \u00fczerinden eri\u015filece\u011fini ayarlar.<\/li>\n
  • Image.generateHTML(metadata, attributes)<\/code>: \u0130\u015flenmi\u015f g\u00f6rsellerin meta verilerini kullanarak otomatik olarak bir <\/code> eleman\u0131 olu\u015fturur. Bu, <\/code> etiketleri arac\u0131l\u0131\u011f\u0131yla farkl\u0131 formatlar\u0131 ve srcset<\/code> \u00f6zniteliklerini i\u00e7erir.<\/li>\n
  • loading: \"lazy\"<\/code>: Taray\u0131c\u0131ya, g\u00f6rselin yaln\u0131zca g\u00f6r\u00fcn\u00fcm alan\u0131na yak\u0131n oldu\u011funda y\u00fcklenmesi talimat\u0131n\u0131 verir, bu da ba\u015flang\u0131\u00e7 y\u00fckleme performans\u0131n\u0131 art\u0131r\u0131r.<\/li>\n<\/ul>\n
    Ad\u0131m 4: Shortcode'u Kullanmak<\/h3>\n
    Art\u0131k Markdown veya Nunjucks \u015fablon dosyalar\u0131n\u0131zda bu shortcode'u kullanabilirsiniz:<\/p>\n
    \n{# index.md veya .njk dosyan\u0131zda #}\n# Duyarl\u0131 G\u00f6rsel \u00d6rne\u011fi\n\nMerhaba, bu benim web sitemdeki bir g\u00f6rsel:\n\n{% image \"src\/assets\/hero-image.jpg\", \"Bir da\u011f manzaras\u0131\", [300, 600, 900, 1200], \"(min-width: 900px) 900px, 100vw\" %}\n\nBu g\u00f6rsel, farkl\u0131 ekran boyutlar\u0131na g\u00f6re optimize edilmi\u015f olarak y\u00fcklenecektir.\n    <\/pre>\n
    <\/code><\/p>\n
    Bu \u00f6rnekte, src\/assets\/hero-image.jpg<\/code> dosyas\u0131n\u0131 kullan\u0131yoruz. Eleventy, bu g\u00f6rseli 300, 600, 900 ve 1200 piksel geni\u015fliklerinde (ve orijinal geni\u015fli\u011finde e\u011fer listede null<\/code> varsa) WebP, AVIF ve JPEG formatlar\u0131nda i\u015fleyecektir. sizes<\/code> \u00f6zniteli\u011fi, taray\u0131c\u0131ya g\u00f6rselin \u00e7e\u015fitli viewport boyutlar\u0131nda ne kadar yer kaplayaca\u011f\u0131n\u0131 bildirir, bu da do\u011fru srcset<\/code> kayna\u011f\u0131n\u0131n se\u00e7ilmesine yard\u0131mc\u0131 olur. \u00d6rne\u011fin, \"(min-width: 900px) 900px, 100vw\"<\/code> ifadesi, viewport 900 pikselden b\u00fcy\u00fck oldu\u011funda g\u00f6rselin 900 piksel geni\u015fli\u011finde olaca\u011f\u0131n\u0131, aksi takdirde viewport'un %100'\u00fcn\u00fc kaplayaca\u011f\u0131n\u0131 belirtir.<\/p>\n