Bu sebeple Google ve di\u011fer arama motorlar\u0131 web sitelerini indekslerken sadece i\u00e7erik veya sayfa d\u00fczeninize de\u011fil sitenin y\u00fcklenme h\u0131z\u0131n\u0131 da dikkate almaya ba\u015flad\u0131. SEO a\u00e7\u0131s\u0131ndan b\u00fcy\u00fck \u00f6nem arz eden ve g\u00f6rsel kalitede kay\u0131p ya\u015famadan Optimize Images \u00e7\u00f6z\u00fcm\u00fc nas\u0131l yap\u0131l\u0131r hep birlikte \u00f6\u011frenelim.<\/p>\n\n\n\n
Kullan\u0131lan G\u00f6rsel (Image) Formatlar\u0131<\/h2>\n\n\n\nJPG<\/h3>\n\n\n\n
En bilindik g\u00f6rsel formatlar\u0131ndand\u0131r. Ay\u0131ca g\u00f6r\u00fcnt\u00fc kalitesi bozulmadan en fazla s\u0131k\u0131\u015ft\u0131rma imkan\u0131 veren formatt\u0131r. JPEG<\/strong> (J<\/strong>oint P<\/strong>hotographic E<\/strong>xperts G<\/strong>roup) olarak da bilinir. Bir depolama alan\u0131nda daha fazla g\u00f6rsel saklayabilme imkan\u0131 tan\u0131d\u0131\u011f\u0131ndan foto\u011fraf makinelerinde en \u00e7ok kullan\u0131lan formatt\u0131r. JPG \u00e7ok say\u0131da bilgiyi k\u00fc\u00e7\u00fck bir dosya boyutu i\u00e7inde depolama i\u015flevi sa\u011flayan bir g\u00f6r\u00fcnt\u00fc format\u0131d\u0131r. JPG format\u0131ndaki g\u00f6rselleri kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma yaparak olduk\u00e7a k\u00fc\u00e7\u00fck boyutlara getirme imkan\u0131n\u0131z vard\u0131r. Bu sebeple internet sitelerinde daha s\u0131k tercih edilir. S\u0131k\u0131\u015ft\u0131r\u0131l\u0131nca olu\u015fan bozulmalardan dolay\u0131, Logo veya grafikler i\u00e7in pek fazla tercih edilmezler.<\/p>\n\n\n\n PNG<\/strong> (P<\/strong>ortable N<\/strong>etwork G<\/strong>raphics) yani ta\u015f\u0131nabilir a\u011f grafikleri olarak adland\u0131r\u0131lan g\u00f6r\u00fcnt\u00fc format\u0131d\u0131r. Logo veya grafik dizayn a\u015famalar\u0131nda \u00e7ok tercih edilir. \u00c7\u00fcnk\u00fc PNG format\u0131nda bir g\u00f6rseli olu\u015fturan bile\u015fenler haricindeki alanlar g\u00f6rsel d\u00fczenleme uygulamalar\u0131 ile a\u00e7\u0131ld\u0131\u011f\u0131nda \u015feffaf olarak g\u00f6sterilir. Bu sayede ilave kesme i\u015flemleri ile u\u011fra\u015fman\u0131za gerek kalmaz. <\/p>\n\n\n\n PNG , GIF\u2019e alternatif olarak olu\u015fturulmu\u015f bir g\u00f6rsel t\u00fcr\u00fcd\u00fcr. Web g\u00f6r\u00fcnt\u00fclerinde s\u0131kl\u0131kla tercih edilir. G\u00f6rselin sahip oldu\u011fu renk yelpazesiyle s\u0131k\u0131\u015ft\u0131rma olana\u011f\u0131 sa\u011flar. Ancak s\u0131k\u0131\u015ft\u0131rma performans\u0131 JPG kadar iyi de\u011fildir.<\/p>\n\n\n\n Hareketli g\u00f6r\u00fcnt\u00fcler olu\u015fturmak i\u00e7in kullan\u0131ld\u0131\u011f\u0131 d\u00fc\u015f\u00fcn\u00fclen GIF format\u0131 asl\u0131nda tek g\u00f6rselden olu\u015fan bir g\u00f6rsel format\u0131 olarak da kullan\u0131l\u0131r. GIF<\/strong> (G<\/strong>rafik I<\/strong>nterchange F<\/strong>ormat) format\u0131ndaki g\u00f6rseller s\u0131k\u0131\u015ft\u0131r\u0131l\u0131rken s\u0131k\u0131\u015ft\u0131rma i\u015flemi kay\u0131ps\u0131z bir \u015fekilde ger\u00e7ekle\u015fir. Bu nedenle de g\u00f6rselin s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f hali JPG kadar k\u00fc\u00e7\u00fclmez. Bu format k\u0131s\u0131tl\u0131 bir renk aral\u0131\u011f\u0131na sahiptir bu nedenle foto\u011fraf\u00e7\u0131l\u0131k i\u015flerinde pek tercih edilmezler. G\u00fcn\u00fcm\u00fczde genel olarak animasyon olu\u015fturmak i\u00e7in tercih ediliyor. <\/p>\n\n\n\n Google taraf\u0131ndan geli\u015ftirilmi\u015f bir g\u00f6rsel format\u0131d\u0131r. Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma olana\u011f\u0131 sa\u011flar. Di\u011fer formatlara g\u00f6re daha fazla s\u0131k\u0131\u015ft\u0131rma olana\u011f\u0131 sa\u011flar. <\/p>\n\n\n\n WebP bi\u00e7imindeki g\u00f6rseller;<\/p>\n\n\n\n G\u00f6rsellerin g\u00f6rd\u00fc\u011f\u00fcm\u00fcz k\u0131sm\u0131 haricinde arka planda saklad\u0131klar\u0131 bilgiler vard\u0131r. Bu detaylar g\u00f6rselin boyutunu da etkileyen fakt\u00f6rlerdendir. G\u00f6rselin boyutunun masa\u00fcst\u00fc veya mobil formatta d\u00fczg\u00fcn g\u00f6r\u00fcnt\u00fclenmesi ziyaret\u00e7ilerinizin hepsine standart bir deneyim sa\u011flamas\u0131 gerekir. SEO<\/strong> (S<\/strong>earch E<\/strong>ngine O<\/strong>ptimization) a\u00e7\u0131s\u0131ndan g\u00f6rselleri boyut, format ve isimlendirme tekniklerine dikkat ederek d\u00fczenlemek sitenizin performans\u0131na do\u011frudan katk\u0131 sa\u011flar.<\/p>\n\n\n\n G\u00f6rselleri kulland\u0131\u011f\u0131m\u0131z alanlara bakarsak, g\u00f6rsel y\u00f6netiminin ne kadar \u00f6zenle ve dikkatli yap\u0131lmas\u0131 gerekti\u011fini daha iyi anlayabiliriz. G\u00f6rselleri s\u0131k\u00e7a kulland\u0131\u011f\u0131m\u0131z alanlar;<\/p>\n\n\n\n Kendimizi o kadar \u00e7ok alanda g\u00f6rselle ifade ediyoruz ki. Bu y\u00fczden g\u00f6rseller \u00fczerinde uzun uzun d\u00fc\u015f\u00fcnmek ve baz\u0131 ayarlamalar yapmam\u0131z gerekmektedir.<\/p>\n\n\n\n G\u00f6rsel boyutu, \u00f6l\u00e7eklendirme ve kaplad\u0131\u011f\u0131 alan olarak iki farkl\u0131 a\u00e7\u0131dan de\u011ferlendirilmelidir. Kaplad\u0131\u011f\u0131 alan k\u00fc\u00e7\u00fck olsa da baz\u0131 dosyalar olduk\u00e7a y\u00fcksek pixel boyutlar\u0131yla ayarlanm\u0131\u015f olabilir. Genelde web siteleri y\u00fcklenen g\u00f6rselleri farkl\u0131 \u00f6l\u00e7eklerde kopyalar\u0131n\u0131 olu\u015fturarak saklar ve y\u00fckleme yaparken bu formatlar\u0131n aras\u0131ndan uygun olan\u0131 se\u00e7erek g\u00f6sterimini yapar. <\/p>\n\n\n\n Ancak bu i\u015flemlerle zaman kaybetmesini \u00f6nlemek i\u00e7in \u00f6l\u00e7eklendirmeye dikkat etmelisiniz.<\/p>\n\n\n\n G\u00f6rsel formatlar\u0131n\u0131n \u00f6zelliklerinden bahsederken kendinize uygun olan format\u0131n hangisi olmas\u0131 gerekti\u011fine karar verdi\u011finizi d\u00fc\u015f\u00fcn\u00fcyoruz. Genel olarak format detay\u0131na pek dikkat etmeden g\u00f6rsel y\u00fckl\u00fcyoruz ancak ne kadar b\u00fcy\u00fck bir fark yarataca\u011f\u0131n\u0131 s\u00f6ylemeye gerek yok. Web sitenize PNG format\u0131nda g\u00f6rsel y\u00fcklemeniz daha yo\u011fun depolama alan\u0131 kullan\u0131m\u0131 ve site y\u00fcklenme h\u0131z\u0131nda sorun ya\u015faman\u0131za neden olacakt\u0131r. Ancak Logo ve di\u011fer baz\u0131 grafikler i\u00e7in PNG en iyi alternatif gibi duruyor. Bu y\u00fczden kullanaca\u011f\u0131n\u0131z g\u00f6rseli amac\u0131na g\u00f6re s\u0131n\u0131flamal\u0131s\u0131n\u0131z.<\/p>\n\n\n\n G\u00f6rsellerle ilgili dikkat edilmesi gereken bir di\u011fer konu g\u00f6rsele ait dosyaya verilen isimdir. Malum Google \u2018\u0131n bir g\u00f6rsel arama sistemi de var. Google bir konu ile ilgili kelime gruplar\u0131n\u0131 kullanarak arama yapt\u0131\u011f\u0131n\u0131zda o kelime gruplar\u0131n\u0131 i\u00e7eren g\u00f6rseller de listelenir.G\u00f6rsele kar\u0131\u015f\u0131k, anlams\u0131z kelime ve rakamlar kullanarak isim verdi\u011finizde Google aranan konu ile g\u00f6rseliniz aras\u0131ndaki ili\u015fkilendirmeyi ger\u00e7ekle\u015ftiremez. <\/p>\n\n\n\n Bir konuyla ilgili g\u00f6rsel y\u00fcklerken konuyla alakal\u0131 isimlendirme yaparsan\u0131z g\u00f6rselin kendisi de arama etiketi i\u015flevi g\u00f6recek ve i\u00e7eri\u011finizin indekslenmesinde daha iyi sonu\u00e7 alman\u0131z\u0131 sa\u011flayacakt\u0131r. Y\u00fckleyece\u011fimiz g\u00f6rseli isimlendirirken, konumuzdan \u00f6rnek verirsek, \u201coptimize-images-cozumu.jpg\u201d<\/strong> bi\u00e7imini kullanmal\u0131y\u0131z. Her kelime aras\u0131na, kelimeleri birbirinden ay\u0131rmak i\u00e7in tire (-) koymal\u0131 ve kelimeler i\u00e7inde T\u00fcrk\u00e7e karakter kullanmamal\u0131y\u0131z.<\/p>\n\n\n\n Bu i\u015flemleri yapman\u0131n birden fazla yolu ve y\u00f6ntemi vard\u0131r. WordPress tabanl\u0131 bir web sitesine sahipseniz eklentiler yard\u0131m\u0131yla da bu i\u015f k\u0131smen \u00e7\u00f6z\u00fcmlenebilir. WordPress<\/a> \u00fczerinde bu i\u015fe yarayan eklentilere \u00f6rnek verirsek;<\/p>\n\n\n\n Web sitenizin kontrol panelinden y\u00fckleyece\u011finiz bu eklentiler (Plugin) yoluyla otomatik olarak g\u00f6rsellerinizi optimize edebilirsiniz. Ancak g\u00f6rselin byte cinsinden k\u00fc\u00e7\u00fclt\u00fclmesinde \u00e7ok fazla bile\u015fen i\u015flev g\u00f6r\u00fcr. Ancak \u00e7o\u011funlukla bu eklentiler sadece s\u0131k\u0131\u015ft\u0131rma i\u015flemi yapmaya odaklan\u0131r. Bu sebeple sadece eklentilere g\u00fcvenmek yerine yapmam\u0131z gereken di\u011fer i\u015flemlere bakal\u0131m.<\/p>\n\n\n\n G\u00f6rsel Optimizasyonu yaparken dikkat edilmesi gerekenler;<\/p>\n\n\n\n Bahsi ge\u00e7en konular\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131na bak\u0131ld\u0131\u011f\u0131nda i\u015flemlerin daha g\u00f6rsel y\u00fcklenmeden yap\u0131lmas\u0131d\u0131r. Y\u00fczlerce g\u00f6rsel i\u00e7eren bir internet sitesindeki optimizasyon profesyonel bilgi ve otomasyon gerektirir.<\/p>\n\n\n\n G\u00f6rsel optimizasyonunda kullan\u0131lan di\u011fer bir y\u00f6ntem sunucu taraf\u0131nda \u00e7al\u0131\u015facak PHP tabanl\u0131 Framework<\/a>lerdir. Bu Frameworkleri kullanabilmek i\u00e7in PHP dilini bilmeniz ve internet sitenize ait PHP kodlar\u0131na eri\u015fiminiz olmas\u0131 gerekiyor. <\/p>\n\n\n\n Y\u00f6ntemi kullan\u0131rken dikkat etmeniz gereken \u015fey genelde API \u015feklinde sunulan bu frameworkleri se\u00e7erken Image Optimization i\u015flemini yapt\u0131ktan sonra optimize edilen g\u00f6rselin <\/p>\n\n\n\n Cache olarak saklanmas\u0131 gereklili\u011fi. Baz\u0131 frameworkler bu deste\u011fi sa\u011flam\u0131yor. <\/p>\n\n\n\n B\u00f6yle bir durumda ise istemci taraf\u0131ndan internet sitesi her g\u00f6r\u00fcnt\u00fcleme yap\u0131lmak istendi\u011finde g\u00f6rsellerin tekrar i\u015flemden ge\u00e7irilmesi, sisteme ait CPU ve RAM kaynaklar\u0131n\u0131 gereksiz yere kullanmak zorunda b\u0131rak\u0131yor. Bu olay\u0131n da farkl\u0131 sorunlara yol a\u00e7aca\u011f\u0131 kesin.<\/p>\n\n\n\n Bu Frameworkler genelde \u00fccretli bir \u015fekilde \u00e7al\u0131\u015f\u0131yor. Birden farkl\u0131 paket se\u00e7ene\u011fi ile optimize edilecek toplam g\u00f6rsel boyutu \u00fczerinden \u00f6deme yapman\u0131z isteniyor.<\/p>\n\n\n\n Bu \u00fc\u00e7 G\u00f6rsel Optimizasyon hizmeti veren API\u2019yi de deneyebilirsiniz.<\/p>\n\n\n\n \u0130nternet sitelerinin sadece yaz\u0131dan olu\u015ftu\u011funu varsayal\u0131m, acaba web siteleri bu kadar \u00e7ekici olabilecek miydi? Tabi ki renkli, canl\u0131 g\u00f6rsellerle desteklenmi\u015f i\u00e7erikler her zaman g\u00f6ze \u00e7arp\u0131yor….<\/p>\n","protected":false},"author":16,"featured_media":6472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45,44],"tags":[],"class_list":["post-6467","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internet","category-nedir-nasil-yapilir"],"yoast_head":"\n![\"\"](\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/gorsel-cesitleri-1024x681.jpg\")
<\/figure>\n\n\n\nPNG<\/h3>\n\n\n\n
GIF<\/h3>\n\n\n\n
WEBP<\/h3>\n\n\n\n
G\u00f6rsellerin SEO A\u00e7\u0131s\u0131ndan \u00d6nemi<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/gorsel-seo-iliskisi.jpg\")
<\/figure>\n\n\n\nG\u00f6rsel Boyutunun \u00d6nemi<\/h3>\n\n\n\n
![\"\"](\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/gorsel-secimin-onemi.jpg\")
<\/figure>\n\n\n\nG\u00f6rsel Format\u0131n\u0131n \u00d6nemi<\/h3>\n\n\n\n
G\u00f6rsel \u0130simlendirmenin \u00d6nemi<\/h3>\n\n\n\n
Optimize Images \u00c7\u00f6z\u00fcm\u00fc Nedir?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/www.niobehosting.com\/blog\/wp-content\/uploads\/optimize-images-1024x636.jpg\")
<\/figure>\n\n\n\nWordPress Eklentileri ile Resimleri Optimize Etme<\/h3>\n\n\n\n
G\u00f6rsel Y\u00fcklerken Dikkat Edilmesi Gerekenler<\/h3>\n\n\n\n
PHP Tabanl\u0131 Frameworkler<\/h3>\n\n\n\n
S\u0131k Kar\u015f\u0131la\u015f\u0131lan Hatalar ve \u00c7\u00f6z\u00fcmleri<\/h2>\n\n\n\n