\n* PNG (Portable Network Graphics):<\/strong> Genellikle logolar, ikonlar ve \u015feffaf arka plan gerektiren g\u00f6rseller i\u00e7in kullan\u0131lan kay\u0131ps\u0131z bir formatt\u0131r. Y\u00fcksek kalitede g\u00f6rseller sunar ancak dosya boyutlar\u0131 JPEG’e g\u00f6re genellikle daha b\u00fcy\u00fckt\u00fcr. Animasyon deste\u011fi yoktur.
\n* GIF (Graphics Interchange Format):<\/strong> D\u00fc\u015f\u00fck renk derinli\u011fine sahip animasyonlar i\u00e7in pop\u00fclerdir. Ancak, s\u0131n\u0131rl\u0131 renk paleti ve b\u00fcy\u00fck dosya boyutlar\u0131 nedeniyle modern web kullan\u0131m\u0131 i\u00e7in verimsizdir.<\/p>\n
Bu formatlar, web’in ilk d\u00f6nemlerinde geli\u015ftirilmi\u015f olup, g\u00fcn\u00fcm\u00fczdeki y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekranlar ve performans beklentileri i\u00e7in ideal de\u011fildir.<\/p>\n
WebP’nin Do\u011fu\u015fu ve Amac\u0131<\/h4>\n
Google, web’in g\u00f6rsel y\u00fck\u00fcn\u00fc hafifletmek amac\u0131yla VP8 video codec’inden t\u00fcretilen bir teknoloji kullanarak WebP’yi geli\u015ftirdi. Ama\u00e7, web sayfalar\u0131n\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flayarak kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve bant geni\u015fli\u011fi t\u00fcketimini azaltmakt\u0131r. Google’\u0131n kendi ara\u015ft\u0131rma verileri, WebP’nin JPEG’e g\u00f6re %25-34, PNG’ye g\u00f6re ise %26 daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunabildi\u011fini g\u00f6stermektedir.<\/p>\n
WebP’nin Temel Avantajlar\u0131<\/h4>\n
* Daha K\u00fc\u00e7\u00fck Dosya Boyutlar\u0131:<\/strong> Ayn\u0131 g\u00f6rsel kalitesini koruyarak veya daha iyi bir kalite sunarak JPEG ve PNG’ye g\u00f6re \u00f6nemli \u00f6l\u00e7\u00fcde daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sa\u011flar. Bu, sayfa y\u00fcklenme s\u00fcrelerini dramatik bir \u015fekilde azalt\u0131r. WebP’nin arkas\u0131ndaki teknoloji, onu geleneksel formatlardan ay\u0131ran bir dizi teknik avantaja sahiptir.<\/p>\n WebP, kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma i\u00e7in VP8 video codec’inin anahtar kare s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131n\u0131 kullan\u0131r. Bu, g\u00f6rselin belirli piksellerini veya renk bilgilerini atarak dosya boyutunu k\u00fc\u00e7\u00fclt\u00fcrken, insan g\u00f6z\u00fcn\u00fcn bu kay\u0131plar\u0131 fark etmesini zorla\u015ft\u0131r\u0131r. Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma ise, g\u00f6rselin orijinal verilerini tamamen koruyarak dosya boyutunu azalt\u0131r. WebP’nin kay\u0131ps\u0131z modu, JPEG 2000’den ilham alan bir dizi teknik kullan\u0131r ve genellikle PNG’den daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar.<\/p>\n Google’\u0131n kendi testlerine g\u00f6re, kay\u0131pl\u0131 WebP g\u00f6rselleri, kar\u015f\u0131la\u015ft\u0131r\u0131labilir SSIM (Structural Similarity Index Measure) kalitesinde JPEG’den %25-34 daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131na sahiptir. Kay\u0131ps\u0131z WebP g\u00f6rselleri ise PNG’den %26 daha k\u00fc\u00e7\u00fck boyutlarda olabilir. Bu, \u00f6zellikle \u00e7ok say\u0131da g\u00f6rsel i\u00e7eren web siteleri i\u00e7in muazzam bir bant geni\u015fli\u011fi ve depolama tasarrufu anlam\u0131na gelir.<\/p>\n WebP, geli\u015fmi\u015f s\u0131k\u0131\u015ft\u0131rma algoritmalar\u0131 sayesinde, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131nda bile y\u00fcksek g\u00f6rsel kalitesini koruyabilir. \u00d6zellikle kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rmada, insan g\u00f6rsel sistemi taraf\u0131ndan daha az fark edilen detaylar\u0131 hedef alarak s\u0131k\u0131\u015ft\u0131rma yapar.<\/p>\n PNG gibi, WebP de 8-bit alpha kanal\u0131 deste\u011fi sunar, bu da g\u00f6rsellerin \u015feffaf arka planlara sahip olabilece\u011fi anlam\u0131na gelir. Ayr\u0131ca, GIF format\u0131na benzer \u015fekilde animasyonlar\u0131 da destekler (Animated WebP). Bu \u00f6zellikler, WebP’yi web \u00fczerindeki \u00e7o\u011fu g\u00f6rsel ihtiyac\u0131 i\u00e7in kapsaml\u0131 bir \u00e7\u00f6z\u00fcm haline getirir.<\/p>\n WebP g\u00f6rseller olu\u015fturman\u0131n birden fazla yolu vard\u0131r. \u0130htiya\u00e7lar\u0131n\u0131za ve teknik bilginize g\u00f6re farkl\u0131 y\u00f6ntemleri tercih edebilirsiniz.<\/p>\n En basit y\u00f6ntemlerden biridir. Bir\u00e7ok web sitesi, mevcut g\u00f6rsellerinizi (JPEG, PNG) WebP’ye d\u00f6n\u00fc\u015ft\u00fcrmenize olanak tan\u0131r. G\u00f6rsel d\u00fczenleme yaz\u0131l\u0131mlar\u0131 veya \u00f6zel d\u00f6n\u00fc\u015ft\u00fcrme ara\u00e7lar\u0131 kullanarak WebP g\u00f6rseller olu\u015fturabilirsiniz. Google, WebP codec’i ile birlikte Bu komut, * Di\u011fer Se\u00e7enekler:<\/strong> Web sitenizde veya sunucunuzda g\u00f6rselleri dinamik olarak WebP’ye d\u00f6n\u00fc\u015ft\u00fcrmeniz gerekti\u011finde programlama dilleri ve k\u00fct\u00fcphaneleri kullanabilirsiniz. Bu y\u00f6ntem, \u00f6zellikle kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen g\u00f6rselleri otomatik olarak optimize etmek i\u00e7in idealdir. * Imagick:<\/strong> ImageMagick k\u00fct\u00fcphanesinin PHP uzant\u0131s\u0131 olan Imagick, \u00e7ok daha g\u00fc\u00e7l\u00fc ve esnek bir g\u00f6rsel i\u015fleme arac\u0131d\u0131r.<\/p>\n * Python:<\/strong> * Node.js:<\/strong> WebP g\u00f6rselleri olu\u015fturmak sadece ilk ad\u0131md\u0131r. \u00d6nemli olan, bu g\u00f6rselleri taray\u0131c\u0131 uyumlulu\u011funu g\u00f6z \u00f6n\u00fcnde bulundurarak do\u011fru bir \u015fekilde sunmakt\u0131r. T\u00fcm taray\u0131c\u0131lar WebP’yi desteklemedi\u011fi i\u00e7in (\u00f6zellikle eski s\u00fcr\u00fcmler), yedek bir g\u00f6rsel (JPEG\/PNG) sunma mekanizmas\u0131 sa\u011flamak esast\u0131r.<\/p>\n Burada, taray\u0131c\u0131 \u00f6nce Sunucu taraf\u0131nda, Apache web sunucusunu Bu yap\u0131land\u0131rma, taray\u0131c\u0131 WebP’yi destekliyorsa ve Nginx kullan\u0131c\u0131lar\u0131 da benzer bir mant\u0131kla WebP g\u00f6rselleri sunabilir. Bu yap\u0131land\u0131rma, taray\u0131c\u0131 WebP’yi destekliyorsa ve WebP versiyonu mevcutsa, Sunucunuzda PHP kullanarak da WebP g\u00f6rselleri dinamik olarak sunabilirsiniz. Bu, \u00f6zellikle veritaban\u0131ndan \u00e7ekilen veya an\u0131nda i\u015flenen g\u00f6rseller i\u00e7in kullan\u0131\u015fl\u0131 olabilir. Bu kodu, \u00c7o\u011fu modern CMS, WebP deste\u011fini yerle\u015fik olarak sunar veya eklentiler arac\u0131l\u0131\u011f\u0131yla kolayca entegre edilebilir. CDN’ler, g\u00f6rselleri d\u00fcnya genelindeki sunucular\u0131nda \u00f6nbelle\u011fe alarak ve kullan\u0131c\u0131ya en yak\u0131n konumdan sunarak web sitelerinin h\u0131z\u0131n\u0131 art\u0131r\u0131r. Bir\u00e7ok modern CDN, WebP d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc ve sunumunu otomatik olarak y\u00f6netir. WebP’nin faydalar\u0131ndan tam olarak yararlanmak i\u00e7in baz\u0131 \u00f6nemli noktalara dikkat etmek gerekir.<\/p>\n WebP, Chrome, Firefox, Edge, Opera ve Safari gibi modern taray\u0131c\u0131lar\u0131n b\u00fcy\u00fck \u00e7o\u011funlu\u011fu taraf\u0131ndan desteklenmektedir. Ancak, \u00f6zellikle eski taray\u0131c\u0131 versiyonlar\u0131 veya baz\u0131 ni\u015f taray\u0131c\u0131lar WebP’yi desteklemeyebilir. Bu nedenle, yukar\u0131da bahsedilen WebP’nin en b\u00fcy\u00fck avantaj\u0131, daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131nda y\u00fcksek kalite sunmas\u0131d\u0131r. Ancak, t\u0131pk\u0131 JPEG’de oldu\u011fu gibi, \u00e7ok agresif s\u0131k\u0131\u015ft\u0131rma (d\u00fc\u015f\u00fck kalite ayar\u0131) g\u00f6rsel kalitesini d\u00fc\u015f\u00fcrebilir. G\u00f6rsellerinizi d\u00f6n\u00fc\u015ft\u00fcr\u00fcrken farkl\u0131 kalite ayarlar\u0131n\u0131 test edin ve g\u00f6rsel kalitesinden \u00f6d\u00fcn vermeden en k\u00fc\u00e7\u00fck dosya boyutunu elde etmeye \u00e7al\u0131\u015f\u0131n. Genellikle %75-85 kalitesi iyi bir denge noktas\u0131d\u0131r.<\/p>\n WebP’ye d\u00f6n\u00fc\u015ft\u00fcrmeden \u00f6nce bile orijinal JPEG veya PNG g\u00f6rsellerinizi optimize etmek \u00f6nemlidir. lossless s\u0131k\u0131\u015ft\u0131rma uygulayan TinyPNG, TinyJPG gibi ara\u00e7lar veya ImageOptim gibi masa\u00fcst\u00fc uygulamalar\u0131, orijinal dosya boyutunu k\u00fc\u00e7\u00fclterek WebP d\u00f6n\u00fc\u015f\u00fcm\u00fcnden sonra daha da k\u00fc\u00e7\u00fck bir dosya elde etmenizi sa\u011flar.<\/p>\n CDN’ler, WebP sunumunu basitle\u015ftirmenin ve performans\u0131n\u0131 art\u0131rman\u0131n en etkili yollar\u0131ndan biridir. Bir\u00e7ok CDN, otomatik olarak taray\u0131c\u0131 deste\u011fini alg\u0131lar ve en uygun format\u0131 sunar, bu da sizin sunucu taraf\u0131nda karma\u015f\u0131k yap\u0131land\u0131rmalar yapma ihtiyac\u0131n\u0131z\u0131 ortadan kald\u0131r\u0131r.<\/p>\n B\u00fcy\u00fck bir web sitesi veya s\u0131k s\u0131k g\u00f6rsel y\u00fckleyen bir site i\u00e7in, WebP d\u00f6n\u00fc\u015f\u00fcm s\u00fcrecini otomatikle\u015ftirmek hayati \u00f6nem ta\u015f\u0131r. Komut sat\u0131r\u0131 ara\u00e7lar\u0131, programatik \u00e7\u00f6z\u00fcmler veya CMS eklentileri bu konuda size yard\u0131mc\u0131 olacakt\u0131r. G\u00f6rselleri manuel olarak tek tek d\u00f6n\u00fc\u015ft\u00fcrmek, uzun vadede s\u00fcrd\u00fcr\u00fclebilir bir \u00e7\u00f6z\u00fcm de\u011fildir.<\/p>\n WebP entegrasyonundan sonra web sitenizin performans\u0131n\u0131 d\u00fczenli olarak test edin ve izleyin. Google PageSpeed Insights, Lighthouse, GTmetrix gibi ara\u00e7lar, WebP kullan\u0131m\u0131n\u0131n sitenizin y\u00fcklenme s\u00fcrelerine ve genel performans\u0131na etkisini de\u011ferlendirmenize yard\u0131mc\u0131 olacakt\u0131r. Taray\u0131c\u0131 konsolunu kullanarak hangi g\u00f6rsel format\u0131n\u0131n y\u00fcklendi\u011fini de kontrol edebilirsiniz.<\/p>\n WebP, web \u00fczerindeki g\u00f6rsellerin optimizasyonu i\u00e7in \u00f6nemli bir ad\u0131m olsa da, g\u00f6rsel teknolojileri s\u00fcrekli geli\u015fmektedir. AVIF ve JPEG XL gibi yeni nesil formatlar, daha da iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 ve \u00f6zellikler sunmay\u0131 hedeflemektedir.<\/p>\n * AVIF (AV1 Image File Format):<\/strong> Netflix ve Google gibi \u015firketler taraf\u0131ndan desteklenen AV1 video codec’inden t\u00fcretilmi\u015ftir. WebP’den bile daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunmay\u0131 vaat ederken, HDR ve geni\u015f renk gam\u0131 gibi geli\u015fmi\u015f \u00f6zelliklere de sahiptir. Taray\u0131c\u0131 deste\u011fi h\u0131zla artmaktad\u0131r. WebP \u015fu anda geni\u015f taray\u0131c\u0131 deste\u011fi ve kan\u0131tlanm\u0131\u015f performans avantajlar\u0131 nedeniyle en pratik ve yayg\u0131n olarak kullan\u0131lan yeni nesil g\u00f6rsel format\u0131d\u0131r. Gelecekte AVIF ve JPEG XL gibi formatlar daha da yayg\u0131nla\u015ft\u0131k\u00e7a, web geli\u015ftiricilerinin bu formatlar\u0131 da entegre etmesi gerekecektir. Ancak \u015fimdilik, WebP web performans\u0131 i\u00e7in vazge\u00e7ilmez bir ara\u00e7 olmaya devam etmektedir.<\/p>\n Web sitesi h\u0131z\u0131n\u0131n her zamankinden daha \u00f6nemli oldu\u011fu g\u00fcn\u00fcm\u00fcz dijital ekosisteminde, WebP g\u00f6rselleri kullanmak, sitenizin performans\u0131n\u0131 art\u0131rmak i\u00e7in yapabilece\u011finiz en etkili optimizasyonlardan biridir. WebP, geleneksel JPEG ve PNG formatlar\u0131na k\u0131yasla \u00e7ok daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 sunarken, g\u00f6rsel kalitesinden \u00f6d\u00fcn vermez ve \u015feffafl\u0131k ile animasyon gibi modern web gereksinimlerini kar\u015f\u0131lar.<\/p>\n Bu makalede ele ald\u0131\u011f\u0131m\u0131z y\u00f6ntemlerle, g\u00f6rsellerinizi WebP format\u0131na kolayca d\u00f6n\u00fc\u015ft\u00fcrebilir ve web sitenizde taray\u0131c\u0131 uyumlulu\u011funu g\u00f6z \u00f6n\u00fcnde bulundurarak etkili bir \u015fekilde sunabilirsiniz. \u0130ster HTML WebP’ye ge\u00e7i\u015f yapmak, ba\u015flang\u0131\u00e7ta biraz \u00e7aba gerektirse de, uzun vadede sitenizin performans\u0131 ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck getiriler sa\u011flayacakt\u0131r. G\u00f6rsel optimizasyon stratejinizin temel ta\u015f\u0131 olarak WebP’yi benimsemek, modern web geli\u015ftirme pratiklerinin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. Web sitenizin gelece\u011fini h\u0131zland\u0131rmak i\u00e7in WebP’yi bug\u00fcn kullanmaya ba\u015flay\u0131n.
\n* Daha H\u0131zl\u0131 Y\u00fcklenme S\u00fcreleri:<\/strong> Daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131, sunucudan daha az veri transferi anlam\u0131na gelir, bu da web sayfalar\u0131n\u0131n daha h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar.
\n* Geli\u015fmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> H\u0131zl\u0131 y\u00fcklenen sayfalar, kullan\u0131c\u0131lar\u0131n sitenizde daha uzun s\u00fcre kalmas\u0131na ve daha iyi bir deneyim ya\u015famas\u0131na katk\u0131da bulunur.
\n* SEO Avantajlar\u0131:<\/strong> Arama motorlar\u0131, h\u0131zl\u0131 y\u00fcklenen siteleri sever ve bu siteleri arama sonu\u00e7lar\u0131nda daha \u00fcst s\u0131ralarda g\u00f6sterebilir. Core Web Vitals gibi metriklerde iyile\u015fme sa\u011flar.
\n* \u00c7ok Y\u00f6nl\u00fcl\u00fck:<\/strong> Hem kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rmay\u0131 (foto\u011fraflar i\u00e7in) hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rmay\u0131 (grafikler, logolar i\u00e7in) destekler. Ayr\u0131ca \u015feffafl\u0131k (alpha kanal\u0131) ve animasyon (APNG gibi) deste\u011fi sunar.<\/p>\nWebP’nin Teknik \u00dcst\u00fcnl\u00fckleri<\/h3>\n
S\u0131k\u0131\u015ft\u0131rma Algoritmalar\u0131 (Kay\u0131pl\u0131 ve Kay\u0131ps\u0131z)<\/h4>\n
Dosya Boyutu Avantaj\u0131<\/h4>\n
Kalite Korumas\u0131<\/h4>\n
\u015eeffafl\u0131k (Alpha Kanal\u0131) ve Animasyon Deste\u011fi<\/h4>\n
WebP G\u00f6rseller Olu\u015fturma Y\u00f6ntemleri<\/h3>\n
\u00c7evrimi\u00e7i D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fcler<\/h4>\n
\n* Kullan\u0131m Kolayl\u0131\u011f\u0131:<\/strong> Genellikle sadece g\u00f6rselleri s\u00fcr\u00fckle-b\u0131rak yaparak y\u00fcklemeniz ve d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemini ba\u015flatman\u0131z yeterlidir.
\n* S\u0131n\u0131rlamalar:<\/strong> Genellikle toplu d\u00f6n\u00fc\u015ft\u00fcrme se\u00e7enekleri s\u0131n\u0131rl\u0131d\u0131r veya yoktur. B\u00fcy\u00fck dosyalar i\u00e7in yava\u015f olabilir. Gizlilik endi\u015feleri olabilir, \u00e7\u00fcnk\u00fc g\u00f6rsellerinizi \u00fc\u00e7\u00fcnc\u00fc taraf bir sunucuya y\u00fcklersiniz.
\n* Pop\u00fcler Ara\u00e7lar:<\/strong> Convertio, Online-Convert, Squoosh (Google taraf\u0131ndan geli\u015ftirilmi\u015f, istemci taraf\u0131nda \u00e7al\u0131\u015fan bir ara\u00e7).<\/p>\nMasa\u00fcst\u00fc Uygulamalar\u0131<\/h4>\n
\n* Adobe Photoshop:<\/strong> Do\u011frudan WebP deste\u011fi sunmaz ancak WebPShop gibi \u00fccretsiz eklentilerle WebP format\u0131nda kaydetme ve a\u00e7ma yetene\u011fi kazan\u0131r.
\n* GIMP (GNU Image Manipulation Program):<\/strong> A\u00e7\u0131k kaynakl\u0131 ve \u00fccretsiz bir g\u00f6rsel d\u00fczenleme yaz\u0131l\u0131m\u0131d\u0131r. S\u00fcr\u00fcm 2.10 ve \u00fczeri s\u00fcr\u00fcmlerde yerle\u015fik WebP deste\u011fi bulunur.
\n* XnConvert:<\/strong> Toplu g\u00f6rsel d\u00f6n\u00fc\u015ft\u00fcrme i\u00e7in g\u00fc\u00e7l\u00fc ve \u00fccretsiz bir ara\u00e7t\u0131r. Bir\u00e7ok format aras\u0131nda d\u00f6n\u00fc\u015ft\u00fcrme yapabilir ve WebP deste\u011fi sunar.
\n* ImageMagick:<\/strong> Komut sat\u0131r\u0131 tabanl\u0131 olsa da, bir\u00e7ok masa\u00fcst\u00fc uygulamas\u0131n\u0131n temelinde yer alan g\u00fc\u00e7l\u00fc bir g\u00f6rsel i\u015fleme k\u00fct\u00fcphanesidir. WebP d\u00f6n\u00fc\u015ft\u00fcrme yetene\u011fine sahiptir.<\/p>\nKomut Sat\u0131r\u0131 Ara\u00e7lar\u0131 (cwebp)<\/h4>\n
cwebp<\/code> adl\u0131 bir komut sat\u0131r\u0131 arac\u0131 sunar. Bu ara\u00e7, \u00f6zellikle toplu d\u00f6n\u00fc\u015ft\u00fcrme ve otomasyon i\u00e7in son derece g\u00fc\u00e7l\u00fc ve esnektir.
\n* Kurulum:<\/strong> libwebp<\/code> paketinin bir par\u00e7as\u0131 olarak gelir. Linux’ta sudo apt-get install webp<\/code> veya macOS’ta brew install webp<\/code> ile kolayca y\u00fcklenebilir.
\n* Temel Kullan\u0131m:<\/strong><\/p>\ncwebp -q 75 input.jpg -o output.webp<\/code><\/pre>\ninput.jpg<\/code> dosyas\u0131n\u0131 %75 kalitede output.webp<\/code> olarak d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.
\n* Kay\u0131ps\u0131z D\u00f6n\u00fc\u015ft\u00fcrme:<\/strong><\/p>\ncwebp -lossless input.png -o output.webp<\/code><\/pre>\n
\n * -q
\n * -m
\n * -af<\/code>: Otomatik filtreleme.
\n * -alpha_q
\n* Toplu \u0130\u015flemler:<\/strong> Bash veya PowerShell betikleriyle binlerce g\u00f6rseli otomatik olarak d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\nProgramatik D\u00f6n\u00fc\u015ft\u00fcrme (PHP, Python, Node.js)<\/h4>\n
\n* PHP:<\/strong>
\n * GD K\u00fct\u00fcphanesi:<\/strong> PHP’nin yerle\u015fik GD k\u00fct\u00fcphanesi, imagecreatefromjpeg()<\/code>, imagecreatefrompng()<\/code> gibi fonksiyonlarla g\u00f6rselleri a\u00e7\u0131p imagewebp()<\/code> fonksiyonu ile WebP olarak kaydedebilir.<\/p>\n$image = imagecreatefromjpeg('input.jpg');\n imagewebp($image, 'output.webp', 75);\n imagedestroy($image);<\/code><\/pre>\n$image = new Imagick('input.jpg');\n $image->setImageFormat('webp');\n $image->setOption('webp:quality', '75');\n $image->writeImage('output.webp');<\/code><\/pre>\n
\n * Pillow:<\/strong> Python i\u00e7in pop\u00fcler bir g\u00f6rsel i\u015fleme k\u00fct\u00fcphanesidir.<\/p>\nfrom PIL import Image\n img = Image.open('input.jpg')\n img.save('output.webp', 'webp', quality=75)<\/code><\/pre>\n
\n * Sharp:<\/strong> Node.js i\u00e7in y\u00fcksek performansl\u0131 bir g\u00f6rsel i\u015fleme k\u00fct\u00fcphanesidir (libvips \u00fczerine kurulu).<\/p>\nconst sharp = require('sharp');\n sharp('input.jpg')\n .webp({ quality: 75 })\n .toFile('output.webp')\n .then(() => console.log('WebP created'));<\/code><\/pre>\nWebP G\u00f6rselleri Web Sitenizde Sunma Stratejileri<\/h3>\n
HTML
\n* Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/strong> Taray\u0131c\u0131, type<\/code> \u00f6zelli\u011fine g\u00f6re WebP’yi destekleyip desteklemedi\u011fini kontrol eder. E\u011fer destekliyorsa WebP g\u00f6rseli y\u00fckler, aksi takdirde <\/code> etiketindeki
src<\/code> \u00f6zelli\u011finde belirtilen yedek g\u00f6rseli y\u00fckler.
\n* Taray\u0131c\u0131 Deste\u011fi ve Geri D\u00f6n\u00fc\u015f Mekanizmas\u0131:<\/strong> Bu y\u00f6ntem, WebP desteklemeyen taray\u0131c\u0131lar i\u00e7in otomatik bir geri d\u00f6n\u00fc\u015f (fallback) sa\u011flar.
\n* \u00d6rnek Kod:<\/strong><\/p>\n![\"A\u00e7\u0131klama\"](\"image.webp\")
\n <\/picture><\/code><\/pre>\nimage.webp<\/code>‘yi y\u00fcklemeyi dener. Ba\u015far\u0131s\u0131z olursa (veya WebP desteklemiyorsa), image.jpg<\/code>‘yi y\u00fckler. width<\/code> ve height<\/code> \u00f6zelliklerini eklemek, CLS (Cumulative Layout Shift) sorunlar\u0131n\u0131 \u00f6nlemek i\u00e7in iyi bir uygulamad\u0131r.<\/p>\nApache ile .htaccess Y\u00f6nlendirmeleri<\/h4>\n
.htaccess<\/code> dosyas\u0131 arac\u0131l\u0131\u011f\u0131yla yap\u0131land\u0131rarak, taray\u0131c\u0131n\u0131n WebP deste\u011fini kontrol edebilir ve uygun g\u00f6rseli dinamik olarak sunabilirsiniz. Bu y\u00f6ntem, mevcut <\/code> etiketlerinizi de\u011fi\u015ftirmeden WebP sunman\u0131za olanak tan\u0131r.
\n* mod_rewrite<\/code> ve mod_headers<\/code>:<\/strong> Bu mod\u00fcllerin Apache sunucunuzda etkinle\u015ftirilmi\u015f olmas\u0131 gerekir.
\n* Accept<\/code> Ba\u015fl\u0131\u011f\u0131 Kontrol\u00fc:<\/strong> Taray\u0131c\u0131lar, HTTP iste\u011finde Accept<\/code> ba\u015fl\u0131\u011f\u0131 ile hangi i\u00e7erik t\u00fcrlerini kabul ettiklerini belirtirler (\u00f6rn. image\/webp<\/code>). Sunucu bu ba\u015fl\u0131\u011f\u0131 kontrol ederek WebP deste\u011fini anlayabilir.
\n* \u00d6rnek Konfig\u00fcrasyon (.htaccess<\/code>):<\/strong><\/p>\nresim.jpg<\/code> i\u00e7in resim.webp<\/code> mevcutsa, .jpg<\/code> iste\u011fini .webp<\/code>‘ye y\u00f6nlendirir.<\/p>\nNginx ile Konfig\u00fcrasyon<\/h4>\n
\n* map<\/code> ve location<\/code> bloklar\u0131:<\/strong> Nginx’te map<\/code> blo\u011fu, Accept<\/code> ba\u015fl\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131rken, location<\/code> blo\u011fu y\u00f6nlendirme ve dosya sunumunu y\u00f6netir.
\n* Accept<\/code> Ba\u015fl\u0131\u011f\u0131 Kontrol\u00fc:<\/strong> Apache’deki gibi, taray\u0131c\u0131n\u0131n Accept<\/code> ba\u015fl\u0131\u011f\u0131 incelenir.
\n* \u00d6rnek Konfig\u00fcrasyon (nginx.conf<\/code> veya site yap\u0131land\u0131rma dosyas\u0131):<\/strong><\/p>\nmap $http_accept $webp_suffix {\n default \"\";\n \"~*webp\" \".webp\";\n }\n\n server {\n # ... di\u011fer ayarlar ...\n\n location ~* ^(.+)\\.(jpe?g|png)$ {\n set $img_path $1;\n if (-f $document_root$img_path$webp_suffix) {\n rewrite (.+)\\.(jpe?g|png)$ $1$webp_suffix break;\n }\n expires 365d;\n add_header Vary Accept;\n log_not_found off;\n }\n\n location ~* \\.(webp)$ {\n add_header Content-Type image\/webp;\n expires 365d;\n add_header Vary Accept;\n log_not_found off;\n }\n }<\/code><\/pre>\n.jpg<\/code> veya .png<\/code> iste\u011fini otomatik olarak .webp<\/code> versiyonuna y\u00f6nlendirir.<\/p>\nPHP ile Dinamik Sunum<\/h4>\n
\n* Taray\u0131c\u0131 Kontrol\u00fc:<\/strong> PHP’de $_SERVER['HTTP_ACCEPT']<\/code> de\u011fi\u015fkenini kontrol ederek taray\u0131c\u0131n\u0131n WebP deste\u011fini anlayabilirsiniz.
\n* G\u00f6rsel \u00d6nbellekleme:<\/strong> Dinamik olarak olu\u015fturulan WebP g\u00f6rsellerini sunucuda \u00f6nbelle\u011fe almak performans\u0131 art\u0131r\u0131r.
\n* \u00d6rnek Mant\u0131k:<\/strong><\/p>\n<\/code><\/pre>\nimage.php?file=image.jpg<\/code> gibi bir URL ile \u00e7a\u011f\u0131rarak dinamik olarak g\u00f6rsel sunabilirsiniz.<\/p>\n\u0130\u00e7erik Y\u00f6netim Sistemleri (CMS) ve Eklentiler (WordPress)<\/h4>\n
\n* WordPress Eklentileri:<\/strong> WordPress, WebP kullan\u0131m\u0131 i\u00e7in \u00e7ok say\u0131da eklentiye sahiptir.
\n * Smush:<\/strong> \u00dccretsiz versiyonuyla g\u00f6rselleri optimize eder ve WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc i\u00e7in premium \u00f6zellikler sunar.
\n * Imagify:<\/strong> G\u00f6rsel optimizasyonu ve WebP d\u00f6n\u00fc\u015f\u00fcm\u00fc i\u00e7in pop\u00fcler bir \u00e7\u00f6z\u00fcmd\u00fcr.
\n * WebP Express:<\/strong> G\u00f6rselleri otomatik olarak WebP’ye d\u00f6n\u00fc\u015ft\u00fcr\u00fcr ve sunucu yap\u0131land\u0131rmas\u0131 (Apache\/Nginx) veya HTML
\n * LiteSpeed Cache:<\/strong> LiteSpeed sunucusu kullanan siteler i\u00e7in g\u00fc\u00e7l\u00fc bir \u00f6nbellekleme eklentisidir ve WebP d\u00f6n\u00fc\u015ft\u00fcrme\/sunma \u00f6zellikleri i\u00e7erir.
\n* Otomatik D\u00f6n\u00fc\u015ft\u00fcrme ve Sunum:<\/strong> Bu eklentiler genellikle g\u00f6rselleri y\u00fckledi\u011finizde veya medya k\u00fct\u00fcphanesini tarad\u0131\u011f\u0131n\u0131zda otomatik olarak WebP versiyonlar\u0131n\u0131 olu\u015fturur ve taray\u0131c\u0131 deste\u011fine g\u00f6re uygun olan\u0131 sunar.<\/p>\nCDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) Deste\u011fi<\/h4>\n
\n* Otomatik WebP D\u00f6n\u00fc\u015ft\u00fcrme ve Sunum Hizmetleri:<\/strong>
\n * Cloudflare:<\/strong> Pro veya daha y\u00fcksek planlarda Image Optimization (Polish) \u00f6zelli\u011fi ile g\u00f6rselleri otomatik olarak WebP’ye d\u00f6n\u00fc\u015ft\u00fcrebilir ve taray\u0131c\u0131 deste\u011fine g\u00f6re sunabilir.
\n * Akamai, Cloudinary, Imgix:<\/strong> Bu t\u00fcr platformlar, g\u00f6rselleri istek \u00fczerine optimize eder ve taray\u0131c\u0131n\u0131n yeteneklerine g\u00f6re en uygun format\u0131 (WebP dahil) dinamik olarak sunar.
\n* Performans Avantajlar\u0131:<\/strong> CDN’ler, WebP ile birlikte kullan\u0131ld\u0131\u011f\u0131nda hem global da\u011f\u0131t\u0131m hem de format optimizasyonu sayesinde maksimum performans art\u0131\u015f\u0131 sa\u011flar.<\/p>\nWebP Kullan\u0131m\u0131nda Dikkat Edilmesi Gerekenler ve En \u0130yi Uygulamalar<\/h3>\n
Taray\u0131c\u0131 Uyumlulu\u011fu (Eski Taray\u0131c\u0131lar \u0130\u00e7in Geri D\u00f6n\u00fc\u015f)<\/h4>\n
G\u00f6rsel Kalitesi ve S\u0131k\u0131\u015ft\u0131rma Oran\u0131 Dengesi<\/h4>\n
G\u00f6rsel Optimizasyon Ara\u00e7lar\u0131<\/h4>\n
CDN Kullan\u0131m\u0131n\u0131n \u00d6nemi<\/h4>\n
Otomasyon<\/h4>\n
Test ve \u0130zleme<\/h4>\n
WebP’nin Gelece\u011fi ve Di\u011fer Yeni Nesil Formatlar<\/h3>\n
\n* JPEG XL:<\/strong> JPEG’in halefi olarak geli\u015ftirilen, hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunan, progresif y\u00fckleme, animasyon ve y\u00fcksek dinamik aral\u0131k (HDR) gibi \u00f6zelliklere sahip bir formatt\u0131r. Geli\u015ftirme a\u015famas\u0131nda olup, gelecekte yayg\u0131nla\u015fmas\u0131 beklenmektedir.<\/p>\nSonu\u00e7<\/h3>\n
\n<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"WebP G\u00f6rseller Olu\u015fturma ve Sunma: Web Sitenizi H\u0131zland\u0131rman\u0131n Anahtar\u0131\nG\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda bir web sitesinin h\u0131z\u0131, kullan\u0131c\u0131","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-32635","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n