{"id":30685,"date":"2025-09-30T20:02:25","date_gmt":"2025-09-30T17:02:25","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/ucretsiz-goruntu-optimizasyon-apisi-nasil-gelistirilir-wordpress-entegrasyonu\/"},"modified":"2025-09-30T20:02:25","modified_gmt":"2025-09-30T17:02:25","slug":"ucretsiz-goruntu-optimizasyon-apisi-nasil-gelistirilir-wordpress-entegrasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/ucretsiz-goruntu-optimizasyon-apisi-nasil-gelistirilir-wordpress-entegrasyonu\/","title":{"rendered":"\u00dccretsiz G\u00f6r\u00fcnt\u00fc Optimizasyon API’si Nas\u0131l Geli\u015ftirilir? WordPress Entegrasyonu"},"content":{"rendered":"

<\/p>\n

Web sitenizin yava\u015f y\u00fcklenmesi ziyaret\u00e7ilerinizi ka\u00e7\u0131r\u0131yor ve SEO performans\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcr\u00fcyor olabilir. \u00c7o\u011fu zaman bu yava\u015fl\u0131\u011f\u0131n arkas\u0131ndaki temel sebep, optimize edilmemi\u015f b\u00fcy\u00fck boyutlu g\u00f6rsellerdir. Peki, bu sorunu \u00e7\u00f6zmek i\u00e7in kendi \u00fccretsiz g\u00f6r\u00fcnt\u00fc optimizasyon API’nizi olu\u015fturabilece\u011finizi ve bunu WordPress sitenizle sorunsuz bir \u015fekilde entegre edebilece\u011finizi biliyor muydunuz? Bu makalede, web sitenizin h\u0131z\u0131n\u0131 katlayacak, kullan\u0131c\u0131 deneyimini iyile\u015ftirecek ve arama motoru s\u0131ralaman\u0131z\u0131 y\u00fckseltecek bu g\u00fc\u00e7l\u00fc \u00e7\u00f6z\u00fcm\u00fc ad\u0131m ad\u0131m in\u015fa edece\u011fiz. Kendi API’nizi geli\u015ftirerek sadece maliyetten tasarruf etmekle kalmayacak, ayn\u0131 zamanda ihtiya\u00e7lar\u0131n\u0131za \u00f6zel, tam kontrol sa\u011flayabilece\u011finiz bir sistem kurmu\u015f olacaks\u0131n\u0131z.<\/p>\n

G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n web sitelerinden beklentileri hi\u00e7 olmad\u0131\u011f\u0131 kadar y\u00fcksek. Bir web sayfas\u0131n\u0131n y\u00fcklenme s\u00fcresi, kullan\u0131c\u0131 deneyimi, hemen \u00e7\u0131kma oran\u0131 (bounce rate) ve hatta arama motoru s\u0131ralamalar\u0131 \u00fczerinde do\u011frudan etkilidir. Google gibi arama motorlar\u0131, kullan\u0131c\u0131 deneyimini \u00f6nceliklendirdi\u011fi i\u00e7in h\u0131zl\u0131 y\u00fcklenen siteleri daha \u00fcst s\u0131ralarda konumland\u0131rma e\u011filimindedir. Bu ba\u011flamda, web sitelerindeki g\u00f6rsel i\u00e7eri\u011fin boyutu ve optimizasyonu, genel site performans\u0131n\u0131n en kritik belirleyicilerinden biri haline gelmi\u015ftir. B\u00fcy\u00fck, s\u0131k\u0131\u015ft\u0131r\u0131lmam\u0131\u015f veya yanl\u0131\u015f formatta kullan\u0131lan g\u00f6rseller, sayfa y\u00fcklenme s\u00fcrelerini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rarak ziyaret\u00e7ilerin sabr\u0131n\u0131 zorlayabilir.<\/p>\n

G\u00f6r\u00fcnt\u00fc optimizasyonu, g\u00f6rsellerin kalitesini g\u00f6rsel olarak fark edilmeyecek d\u00fczeyde tutarak dosya boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltme s\u00fcrecidir. Bu, hem depolama alan\u0131ndan tasarruf edilmesini sa\u011flar hem de daha \u00f6nemlisi, web sitelerinin daha h\u0131zl\u0131 y\u00fcklenmesine olanak tan\u0131r. Yava\u015f y\u00fcklenen bir web sitesi, mobil kullan\u0131c\u0131lar i\u00e7in ayr\u0131 bir sorun te\u015fkil eder. Zira mobil cihazlarda internet ba\u011flant\u0131s\u0131 h\u0131z\u0131 ve veri kotas\u0131 daha s\u0131n\u0131rl\u0131 olabilir. Yap\u0131lan ara\u015ft\u0131rmalar, bir sayfan\u0131n y\u00fcklenmesi 3 saniyeden fazla s\u00fcrd\u00fc\u011f\u00fcnde kullan\u0131c\u0131lar\u0131n %53’\u00fcn\u00fcn siteyi terk etti\u011fini g\u00f6stermektedir. Bu durum, e-ticaret siteleri, i\u00e7erik platformlar\u0131 veya portfolyo siteleri gibi yo\u011fun g\u00f6rsel kullanan platformlar i\u00e7in ciddi bir gelir ve eri\u015fim kayb\u0131 anlam\u0131na gelir.<\/p>\n

G\u00f6r\u00fcnt\u00fc optimizasyonu, yaln\u0131zca dosya boyutunu k\u00fc\u00e7\u00fcltmekle s\u0131n\u0131rl\u0131 de\u011fildir; ayn\u0131 zamanda do\u011fru format\u0131 se\u00e7mek, g\u00f6rselleri lazy loading (tembel y\u00fckleme) ile y\u00fcklemek ve responsive (duyarl\u0131) g\u00f6rseller kullanarak farkl\u0131 ekran boyutlar\u0131na uygun varyantlar\u0131 sunmak gibi \u00e7e\u015fitli teknikleri de i\u00e7erir. \u00d6rne\u011fin, JPEG format\u0131 foto\u011fraflar i\u00e7in, PNG format\u0131 \u015feffaf arka plana sahip grafikler i\u00e7in daha uygundur. WebP ve AVIF gibi modern formatlar ise daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunarak hem kaliteyi korur hem de dosya boyutunu daha da k\u00fc\u00e7\u00fclt\u00fcr. Bu tekniklerin otomatikle\u015ftirilmesi, i\u00e7erik y\u00f6neticilerinin veya geli\u015ftiricilerin manuel m\u00fcdahalesine gerek kalmadan web sitesinin her zaman en iyi performans\u0131 g\u00f6stermesini sa\u011flar. \u0130\u015fte tam da bu noktada, kendi g\u00f6r\u00fcnt\u00fc optimizasyon API’m\u0131z\u0131 geli\u015ftirmenin ve bunu bir WordPress eklentisiyle entegre etmenin \u00f6nemi ortaya \u00e7\u0131kar. Bu sayede, g\u00f6rseller sunucuya y\u00fcklendi\u011fi anda otomatik olarak i\u015flenecek ve optimize edilmi\u015f halleri ziyaret\u00e7ilere sunulacakt\u0131r, b\u00f6ylece hem geli\u015ftirici zaman\u0131ndan tasarruf edilecek hem de site performans\u0131 s\u00fcrekli olarak y\u00fcksek tutulabilecektir. Bu strateji, sadece site h\u0131z\u0131n\u0131 art\u0131rmakla kalmaz, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini geli\u015ftirerek d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 art\u0131rman\u0131za ve arama motoru s\u0131ralamalar\u0131nda \u00fcst s\u0131ralara \u00e7\u0131kman\u0131za yard\u0131mc\u0131 olur. Unutmay\u0131n, h\u0131zl\u0131 bir web sitesi mutlu bir kullan\u0131c\u0131 ve daha iyi bir i\u015f anlam\u0131na gelir.<\/p>\n

G\u00f6r\u00fcnt\u00fc Optimizasyon API’si Nedir ve Temel Bile\u015fenleri Nelerdir?<\/h2>\n

Bir G\u00f6r\u00fcnt\u00fc Optimizasyon API’si (Application Programming Interface), web uygulamalar\u0131n\u0131n veya sistemlerin, g\u00f6rselleri otomatik olarak i\u015flemek, s\u0131k\u0131\u015ft\u0131rmak, yeniden boyutland\u0131rmak ve farkl\u0131 formatlara d\u00f6n\u00fc\u015ft\u00fcrmek gibi i\u015flemleri programatik olarak yapmas\u0131na olanak tan\u0131yan bir dizi kural ve ara\u00e7t\u0131r. K\u0131sacas\u0131, siz API’ye bir g\u00f6rsel g\u00f6nderirsiniz ve o da size optimize edilmi\u015f halini geri d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle b\u00fcy\u00fck miktarda g\u00f6rsel i\u00e7eri\u011fi y\u00f6neten web siteleri veya platformlar i\u00e7in inan\u0131lmaz derecede zaman kazand\u0131r\u0131c\u0131 ve verimli bir \u00e7\u00f6z\u00fcmd\u00fcr. Manuel olarak her g\u00f6rseli d\u00fczenlemek yerine, bu s\u00fcre\u00e7 tamamen otomatize edilebilir.<\/p>\n

Peki, b\u00f6yle bir API’nin temel bile\u015fenleri nelerdir? Genel olarak, bir g\u00f6r\u00fcnt\u00fc optimizasyon API’si a\u015fa\u011f\u0131daki ana unsurlardan olu\u015fur:<\/p>\n

API Sunucusu (Backend Server):<\/strong> Bu, API isteklerini alan, i\u015fleyen ve yan\u0131tlar\u0131 geri g\u00f6nderen ana bile\u015fendir. Genellikle Node.js, Python (Flask\/Django), PHP (Laravel\/Symfony) veya Go gibi teknolojilerle geli\u015ftirilir. Sunucu, istemcilerden gelen g\u00f6rselleri i\u015flemek i\u00e7in gerekli mant\u0131\u011f\u0131 bar\u0131nd\u0131r\u0131r ve genellikle RESTful prensiplerine uygun olarak endpoint’ler (u\u00e7 noktalar) tan\u0131mlar. \u00d6rne\u011fin, bir g\u00f6rseli y\u00fcklemek i\u00e7in \/optimize<\/code> veya \/resize<\/code> gibi endpoint’ler olabilir.<\/li>\n

G\u00f6r\u00fcnt\u00fc \u0130\u015fleme K\u00fct\u00fcphanesi:<\/strong> Bu, API’nin g\u00f6rseller \u00fczerinde ger\u00e7ek i\u015flemleri ger\u00e7ekle\u015ftiren \u00e7ekirdek par\u00e7as\u0131d\u0131r. G\u00f6r\u00fcnt\u00fc i\u015fleme k\u00fct\u00fcphaneleri, g\u00f6rselleri a\u00e7ma, s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131n\u0131 uygulama, yeniden boyutland\u0131rma, k\u0131rpma, renk alan\u0131 d\u00f6n\u00fc\u015ft\u00fcrme ve format de\u011fi\u015ftirme gibi karma\u015f\u0131k g\u00f6revleri yerine getirir. Pop\u00fcler k\u00fct\u00fcphaneler aras\u0131nda Node.js i\u00e7in\nSharp<\/pre>\n<\/code>, Python i\u00e7in <\/p>\n Pillow<\/pre>\n<\/code> veya <\/p>\n OpenCV<\/pre>\n<\/code>, PHP i\u00e7in <\/p>\n GD<\/pre>\n<\/code> veya <\/p>\n ImageMagick<\/pre>\n<\/code> bulunur. Bu k\u00fct\u00fcphaneler, genellikle C\/C++ gibi alt seviye dillerde yaz\u0131lm\u0131\u015f h\u0131zl\u0131 ve verimli algoritmalar kullanarak performans\u0131 maksimize eder.<\/li>\n Depolama Mekanizmas\u0131:<\/strong> API'nin i\u015fleyece\u011fi g\u00f6rsellerin ge\u00e7ici olarak saklanmas\u0131 ve optimize edilmi\u015f g\u00f6rsellerin kal\u0131c\u0131 olarak depolanmas\u0131 gerekir. Bu depolama, sunucunun yerel diskinde olabilece\u011fi gibi, Amazon S3, Google Cloud Storage veya DigitalOcean Spaces gibi bulut tabanl\u0131 nesne depolama servisleri arac\u0131l\u0131\u011f\u0131yla da yap\u0131labilir. Bulut depolama, \u00f6zellikle \u00f6l\u00e7eklenebilirlik, y\u00fcksek eri\u015filebilirlik ve veri dayan\u0131kl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan avantajlar sunar.<\/li>\n API Endpoint'leri (U\u00e7 Noktalar):<\/strong> API'nin d\u0131\u015f d\u00fcnyaya a\u00e7\u0131lan kap\u0131lar\u0131d\u0131r. Her endpoint, belirli bir i\u015flemi temsil eder. \u00d6rne\u011fin, bir\nPOST \/optimize<\/pre>\n<\/code> endpoint'i, g\u00f6nderilen bir g\u00f6rseli optimize ederken, <\/p>\n GET \/image\/{id}\/optimized<\/pre>\n<\/code> endpoint'i optimize edilmi\u015f bir g\u00f6rseli geri d\u00f6nd\u00fcrebilir. Bu endpoint'ler, HTTP metotlar\u0131 (GET, POST, PUT, DELETE) ve belirli URL yollar\u0131 arac\u0131l\u0131\u011f\u0131yla eri\u015filebilir.<\/li>\n Kimlik Do\u011frulama ve Yetkilendirme (Authentication & Authorization):<\/strong> API'ye yetkisiz eri\u015fimi engellemek ve k\u00f6t\u00fcye kullan\u0131m\u0131 \u00f6nlemek i\u00e7in g\u00fcvenlik mekanizmalar\u0131 \u015fartt\u0131r. API anahtarlar\u0131 (API Keys), OAuth 2.0 veya JWT (JSON Web Tokens) gibi y\u00f6ntemler, API'ye eri\u015fen istemcilerin kimli\u011fini do\u011frulamak ve belirli i\u015flemleri yapma yetkisine sahip olup olmad\u0131klar\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n \u00d6nbellekleme (Caching):<\/strong> S\u0131k\u00e7a talep edilen optimize edilmi\u015f g\u00f6rselleri tekrar tekrar i\u015flemeyi \u00f6nlemek i\u00e7in \u00f6nbellekleme mekanizmalar\u0131 \u00f6nemlidir. Bu, API'nin performans\u0131n\u0131 art\u0131r\u0131r ve sunucu y\u00fck\u00fcn\u00fc azalt\u0131r. \u00d6nbellekleme, optimize edilmi\u015f g\u00f6rsellerin CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) \u00fczerinde veya sunucu taraf\u0131nda Redis gibi bir in-memory veritaban\u0131nda saklanmas\u0131yla sa\u011flanabilir.<\/li>\n<\/ul>\nBu bile\u015fenlerin bir araya gelmesiyle, robust (sa\u011flam) ve \u00f6l\u00e7eklenebilir bir g\u00f6r\u00fcnt\u00fc optimizasyon API'si olu\u015fturulabilir. Bir sonraki b\u00f6l\u00fcmde, bu bile\u015fenleri kullanarak kendi API'm\u0131z\u0131 ad\u0131m ad\u0131m nas\u0131l in\u015fa edece\u011fimize odaklanaca\u011f\u0131z, \u00f6zellikle Node.js ve Sharp k\u00fct\u00fcphanesini kullanarak pratik bir uygulama geli\u015ftirece\u011fiz.<\/p>\n \n Uzman \u0130pucu: API tasar\u0131m\u0131nda RESTful prensiplerine ba\u011fl\u0131 kalmak, API'nizin daha anla\u015f\u0131l\u0131r, kullan\u0131m\u0131 kolay ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131n\u0131 sa\u011flar. G\u00fcvenlik \u00f6nlemlerini ba\u015flang\u0131\u00e7tan itibaren entegre etmek, ileride ya\u015fanabilecek sorunlar\u0131n \u00f6n\u00fcne ge\u00e7er. \n <\/aside>\nKendi G\u00f6r\u00fcnt\u00fc Optimizasyon API'm\u0131z\u0131 Ad\u0131m Ad\u0131m Nas\u0131l Olu\u015ftururuz? (Node.js ve Sharp \u00d6rne\u011fi)<\/h2>\nBu b\u00f6l\u00fcmde, g\u00fc\u00e7l\u00fc bir Node.js arka ucu ve h\u0131zl\u0131 bir g\u00f6r\u00fcnt\u00fc i\u015fleme k\u00fct\u00fcphanesi olan Sharp'\u0131 kullanarak kendi temel g\u00f6r\u00fcnt\u00fc optimizasyon API'm\u0131z\u0131 nas\u0131l geli\u015ftirece\u011fimizi ad\u0131m ad\u0131m inceleyece\u011fiz. Bu API, g\u00f6rselleri y\u00fckleyebilecek, yeniden boyutland\u0131rabilecek, s\u0131k\u0131\u015ft\u0131rabilecek ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrebilecektir.<\/p>\n Gerekli Ortam Kurulumu ve K\u00fct\u00fcphaneler<\/h3>\nBa\u015flamadan \u00f6nce sisteminizde Node.js ve npm'in (Node Package Manager) kurulu olmas\u0131 gerekmektedir. E\u011fer kurulu de\u011filse, Node.js'in resmi web sitesinden kolayca indirebilirsiniz. Ard\u0131ndan, yeni bir proje klas\u00f6r\u00fc olu\u015fturup terminalde a\u015fa\u011f\u0131daki komutlar\u0131 \u00e7al\u0131\u015ft\u0131rarak projemizi ba\u015flatal\u0131m:<\/p>\n \nmkdir image-optimizer-api\ncd image-optimizer-api\nnpm init -y\nnpm install express sharp multer dotenv\n <\/pre>\n<\/code><\/p>\n \nexpress<\/code>: Node.js i\u00e7in minimalist bir web \u00e7er\u00e7evesidir, API endpoint'lerimizi olu\u015fturmam\u0131za yard\u0131mc\u0131 olacak.<\/li>\n sharp<\/code>: G\u00f6rsel i\u015fleme i\u00e7in ultra h\u0131zl\u0131 bir k\u00fct\u00fcphanedir.<\/li>\n multer<\/code>: Dosya y\u00fcklemelerini i\u015flemek i\u00e7in bir Node.js middleware'idir.<\/li>\n dotenv<\/code>: \u00c7evre de\u011fi\u015fkenlerini (API anahtarlar\u0131, port numaralar\u0131 vb.) y\u00f6netmek i\u00e7in kullan\u0131\u015fl\u0131 bir pakettir.<\/li>\n<\/ul>\nProje yap\u0131m\u0131z\u0131 d\u00fczenlemek i\u00e7in ana klas\u00f6r\u00fcm\u00fczde app.js<\/code> veya server.js<\/code> ad\u0131nda bir dosya ve y\u00fcklenen\/optimize edilen g\u00f6rselleri depolayaca\u011f\u0131m\u0131z bir uploads<\/code> klas\u00f6r\u00fc olu\u015ftural\u0131m. Ayr\u0131ca, API anahtarlar\u0131 gibi hassas bilgileri saklamak i\u00e7in .env<\/code> dosyas\u0131n\u0131 da haz\u0131rlayal\u0131m.<\/p>\n Temel API Endpoint'lerinin Tasar\u0131m\u0131 ve Uygulanmas\u0131<\/h3>\nAPI'm\u0131z\u0131n ana mant\u0131\u011f\u0131, bir g\u00f6rseli HTTP POST iste\u011fi ile al\u0131p, Sharp kullanarak i\u015flemden ge\u00e7irdikten sonra optimize edilmi\u015f g\u00f6rseli geri d\u00f6nd\u00fcrmek veya depolamakt\u0131r. app.js<\/code> dosyam\u0131z\u0131n i\u00e7eri\u011fi a\u015fa\u011f\u0131daki gibi ba\u015flayabilir:<\/p>\n \n\/\/ .env dosyas\u0131ndaki de\u011fi\u015fkenleri y\u00fckle\nrequire('dotenv').config(); \nconst express = require('express');\nconst sharp = require('sharp');\nconst multer = require('multer');\nconst path = require('path');\nconst fs = require('fs');\n\nconst app = express();\nconst PORT = process.env.PORT || 3000;\nconst API_KEY = process.env.API_KEY || 'your_secret_api_key'; \/\/ G\u00fcvenlik i\u00e7in\n\n\/\/ G\u00f6rsel depolama ayarlar\u0131\nconst storage = multer.diskStorage({\n destination: (req, file, cb) => {\n cb(null, 'uploads\/');\n },\n filename: (req, file, cb) => {\n cb(null, Date.now() + '-' + file.originalname);\n }\n});\nconst upload = multer({ storage: storage });\n\n\/\/ API Anahtar\u0131 do\u011frulama middleware'i\nconst authenticateAPIKey = (req, res, next) => {\n const providedApiKey = req.headers['x-api-key']; \/\/ Header'dan anahtar\u0131 al\n if (!providedApiKey || providedApiKey !== API_KEY) {\n return res.status(401).json({ message: 'Yetkisiz Eri\u015fim: Ge\u00e7ersiz API Anahtar\u0131.' });\n }\n next();\n};\n\n\/\/ Ana endpoint (POST - g\u00f6rsel y\u00fckle ve optimize et)\napp.post('\/optimize', authenticateAPIKey, upload.single('image'), async (req, res) => {\n if (!req.file) {\n return res.status(400).json({ message: 'L\u00fctfen bir g\u00f6rsel dosyas\u0131 y\u00fckleyin.' });\n }\n\n const { quality, width, format } = req.body;\n const inputPath = req.file.path;\n const outputFileName = optimized-${req.file.filename.split('.')[0]}.${format || 'webp'}<\/code>;\n const outputPath = path.join('uploads', outputFileName);\n\n try {\n let image = sharp(inputPath);\n\n \/\/ Yeniden boyutland\u0131rma\n if (width) {\n image = image.resize(parseInt(width));\n }\n\n \/\/ Format ve kalite ayarlar\u0131\n switch (format) {\n case 'jpeg':\n image = image.jpeg({ quality: parseInt(quality) || 80 });\n break;\n case 'png':\n image = image.png({ quality: parseInt(quality) || 80 });\n break;\n case 'webp':\n default: \/\/ Varsay\u0131lan olarak webp\n image = image.webp({ quality: parseInt(quality) || 80 });\n break;\n }\n\n await image.toFile(outputPath);\n\n \/\/ Orijinal dosyay\u0131 sil (iste\u011fe ba\u011fl\u0131)\n fs.unlinkSync(inputPath);\n\n res.status(200).sendFile(outputPath, (err) => {\n if (err) {\n console.error('Dosya g\u00f6nderme hatas\u0131:', err);\n res.status(500).json({ message: 'Optimize edilmi\u015f g\u00f6rsel g\u00f6nderilemedi.' });\n }\n \/\/ G\u00f6nderdikten sonra optimize edilmi\u015f dosyay\u0131 da sil (iste\u011fe ba\u011fl\u0131, depolama i\u00e7in)\n \/\/ fs.unlinkSync(outputPath); \n });\n\n } catch (error) {\n console.error('G\u00f6rsel i\u015fleme hatas\u0131:', error);\n res.status(500).json({ message: 'G\u00f6rsel i\u015flenirken bir hata olu\u015ftu.' });\n }\n});\n\n\/\/ Sunucuyu ba\u015flat\napp.listen(PORT, () => {\n console.log(G\u00f6r\u00fcnt\u00fc Optimizasyon API'si http:\/\/localhost:${PORT} adresinde \u00e7al\u0131\u015f\u0131yor.<\/code>);\n});\n <\/pre>\n<\/code><\/p>\n Bu kodda, bir POST endpoint'i olu\u015fturduk (\/optimize<\/code>) ve multer<\/code> kullanarak gelen g\u00f6rseli uploads<\/code> klas\u00f6r\u00fcne kaydettik. Ard\u0131ndan, sharp<\/code> k\u00fct\u00fcphanesi ile g\u00f6rseli yeniden boyutland\u0131rd\u0131k, kalite ayar\u0131 uygulad\u0131k ve varsay\u0131lan olarak WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrd\u00fck. \u0130\u015flem sonunda optimize edilmi\u015f g\u00f6rseli istemciye geri g\u00f6nderiyoruz.<\/p>\n .env<\/code> dosyan\u0131zda a\u015fa\u011f\u0131daki gibi ayarlar\u0131 tan\u0131mlayabilirsiniz:<\/p>\n \nPORT=3000\nAPI_KEY=supersecretkey123\n <\/pre>\n<\/code><\/p>\n Bu API'yi test etmek i\u00e7in Postman gibi bir ara\u00e7 kullanabilirsiniz. POST iste\u011fini http:\/\/localhost:3000\/optimize<\/code> adresine g\u00f6nderin. \u0130stek ba\u015fl\u0131klar\u0131na x-api-key: supersecretkey123<\/code> ekleyin. Body k\u0131sm\u0131nda form-data<\/code> se\u00e7ene\u011fini kullanarak image<\/code> ad\u0131nda bir dosya alan\u0131 olu\u015fturun ve optimize etmek istedi\u011finiz g\u00f6rseli se\u00e7in. Ayr\u0131ca, quality<\/code> (\u00f6rne\u011fin 80<\/code>), width<\/code> (\u00f6rne\u011fin 1200<\/code>) ve format<\/code> (\u00f6rne\u011fin webp<\/code>) gibi ek alanlar ekleyerek optimizasyon parametrelerini de kontrol edebilirsiniz.<\/p>\n Bu temel kurulum, API'nizin omurgas\u0131n\u0131 olu\u015fturur. \u00dcretim ortam\u0131 i\u00e7in daha fazla hata kontrol\u00fc, g\u00fcnl\u00fckleme, bulut depolama entegrasyonu (\u00f6rne\u011fin AWS S3), CDN kullan\u0131m\u0131 ve asenkron i\u015flem kuyruklar\u0131 gibi ileri d\u00fczey \u00f6zellikler eklemek gerekecektir. Ancak bu ba\u015flang\u0131\u00e7 noktas\u0131, kendi \u00fccretsiz g\u00f6r\u00fcnt\u00fc optimizasyon \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc hayata ge\u00e7irmek i\u00e7in sa\u011flam bir temel sunar.<\/p>\n WordPress Eklentisi Entegrasyonu: G\u00f6rsel Y\u00f6netimini Otomatikle\u015ftirme<\/h2>\nKendi g\u00f6r\u00fcnt\u00fc optimizasyon API'm\u0131z\u0131 ba\u015far\u0131yla geli\u015ftirdikten sonra, \u015fimdi s\u0131ra bunu WordPress ile entegre etmeye geldi. WordPress, d\u00fcnya genelinde en pop\u00fcler i\u00e7erik y\u00f6netim sistemlerinden biridir ve genellikle yo\u011fun g\u00f6rsel i\u00e7eri\u011fe sahiptir. Bu g\u00f6rsellerin manuel olarak optimize edilmesi hem zaman al\u0131c\u0131 hem de hatalara a\u00e7\u0131k bir s\u00fcre\u00e7tir. \u0130\u015fte bu y\u00fczden, API'm\u0131z\u0131 WordPress ortam\u0131na sorunsuz bir \u015fekilde entegre edecek bir eklenti geli\u015ftirmek, g\u00f6rsel y\u00f6netimini tamamen otomatikle\u015ftirmenin ve web sitenizin performans\u0131n\u0131 maksimize etmenin anahtar\u0131d\u0131r.<\/p>\n Neden Bir WordPress Eklentisine \u0130htiya\u00e7 Duyar\u0131z?<\/h3>\nBir WordPress eklentisi, API'm\u0131z ile WordPress aras\u0131ndaki k\u00f6pr\u00fcy\u00fc kurar. Bu entegrasyonun ba\u015fl\u0131ca avantajlar\u0131 \u015funlard\u0131r:<\/p>\n \nOtomatik Optimizasyon:<\/strong> Kullan\u0131c\u0131lar bir g\u00f6rseli medya k\u00fct\u00fcphanesine y\u00fckledi\u011finde, eklenti bu g\u00f6rseli otomatik olarak API'm\u0131za g\u00f6nderir ve optimize edilmi\u015f versiyonunu geri al\u0131r. Bu, her g\u00f6rsel i\u00e7in manuel i\u015fleme ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r.<\/li>\n Sorunsuz Kullan\u0131c\u0131 Deneyimi:<\/strong> WordPress'in mevcut medya y\u00fckleme aray\u00fcz\u00fcn\u00fc kullanarak, kullan\u0131c\u0131lar herhangi bir ek ad\u0131m atmadan optimize edilmi\u015f g\u00f6rsellerle \u00e7al\u0131\u015fabilirler. Sanki WordPress'in kendisi optimize ediyormu\u015f gibi hissettirir.<\/li>\n Merkezi Kontrol:<\/strong> Eklenti, optimizasyon ayarlar\u0131n\u0131 (kalite, boyut, format) WordPress paneli \u00fczerinden y\u00f6netme olana\u011f\u0131 sunar, b\u00f6ylece API'ye g\u00f6nderilen isteklerin parametreleri kolayca de\u011fi\u015ftirilebilir.<\/li>\n Mevcut G\u00f6rselleri Optimizasyon:<\/strong> Sadece yeni y\u00fcklenen g\u00f6rselleri de\u011fil, ayn\u0131 zamanda mevcut medya k\u00fct\u00fcphanesindeki g\u00f6rselleri de toplu olarak optimize etme imkan\u0131 sunar.<\/li>\n Web Sitesi Performans\u0131n\u0131 Art\u0131rma:<\/strong> Optimize edilmi\u015f g\u00f6rseller sayesinde sayfa y\u00fcklenme s\u00fcreleri azal\u0131r, SEO performans\u0131 artar ve ziyaret\u00e7ilerin site deneyimi iyile\u015fir.<\/li>\n<\/ul>\nTemel Eklenti Yap\u0131s\u0131 ve API \u00c7a\u011fr\u0131s\u0131 Nas\u0131l Yap\u0131l\u0131r?<\/h3>\nBir WordPress eklentisi olu\u015fturmak i\u00e7in, WordPress'in kanca (hook) sistemini kullanaca\u011f\u0131z. \u00d6zellikle wp_handle_upload<\/code> kancas\u0131, bir dosya sunucuya y\u00fcklendikten hemen sonra tetiklenir ve bize optimize edilecek g\u00f6rsele m\u00fcdahale etme \u015fans\u0131 verir.<\/p>\n Eklentimizi olu\u015fturmak i\u00e7in my-image-optimizer-plugin<\/code> ad\u0131nda bir klas\u00f6r olu\u015ftural\u0131m ve i\u00e7ine my-image-optimizer-plugin.php<\/code> ad\u0131nda bir dosya koyal\u0131m. Bu dosyan\u0131n en ba\u015f\u0131na eklenti bilgilerini eklemeliyiz:<\/p>\n \n\n \n G\u00f6rsel Optimizasyon Ayarlar\u0131<\/h1>\n \n \n <\/form>\n <\/div>\n 'string',\n 'sanitize_callback' => 'esc_url_raw',\n 'default' => 'http:\/\/localhost:3000\/optimize', \/\/ API URL'niz\n )\n );\n register_setting(\n 'mio_options_group',\n 'mio_api_key',\n array(\n 'type' => 'string',\n 'sanitize_callback' => 'sanitize_text_field',\n 'default' => 'supersecretkey123', \/\/ API anahtar\u0131n\u0131z\n )\n );\n register_setting(\n 'mio_options_group',\n 'mio_image_quality',\n array(\n 'type' => 'integer',\n 'sanitize_callback' => 'absint',\n 'default' => 80,\n )\n );\n register_setting(\n 'mio_options_group',\n 'mio_max_width',\n array(\n 'type' => 'integer',\n 'sanitize_callback' => 'absint',\n 'default' => 1920,\n )\n );\n register_setting(\n 'mio_options_group',\n 'mio_image_format',\n array(\n 'type' => 'string',\n 'sanitize_callback' => 'sanitize_text_field',\n 'default' => 'webp',\n )\n );\n\n add_settings_section(\n 'mio_main_section',\n 'Genel Ayarlar',\n null,\n 'my-image-optimizer'\n );\n\n add_settings_field(\n 'mio_api_url',\n 'API URL',\n 'mio_api_url_callback',\n 'my-image-optimizer',\n 'mio_main_section'\n );\n add_settings_field(\n 'mio_api_key',\n 'API Anahtar\u0131',\n 'mio_api_key_callback',\n 'my-image-optimizer',\n 'mio_main_section'\n );\n add_settings_field(\n 'mio_image_quality',\n 'Optimizasyon Kalitesi (1-100)',\n 'mio_image_quality_callback',\n 'my-image-optimizer',\n 'mio_main_section'\n );\n add_settings_field(\n 'mio_max_width',\n 'Maksimum Geni\u015flik (px)',\n 'mio_max_width_callback',\n 'my-image-optimizer',\n 'mio_main_section'\n );\n add_settings_field(\n 'mio_image_format',\n '\u00c7\u0131k\u0131\u015f Format\u0131',\n 'mio_image_format_callback',\n 'my-image-optimizer',\n 'mio_main_section'\n );\n}\nadd_action('admin_init', 'mio_register_settings');\n\nfunction mio_api_url_callback() {\n $value = get_option('mio_api_url');\n echo '';\n}\nfunction mio_api_key_callback() {\n $value = get_option('mio_api_key');\n echo '';\n}\nfunction mio_image_quality_callback() {\n $value = get_option('mio_image_quality');\n echo '';\n}\nfunction mio_max_width_callback() {\n $value = get_option('mio_max_width');\n echo '';\n}\nfunction mio_image_format_callback() {\n $value = get_option('mio_image_format');\n echo '