Web uygulamalarında en çok kullandığımız görsel öğelerin başında resimler ve iconları sayabiliriz. Hem css dosyalarında hem de html içerinde kullandığımız resimler uygulamaların görsel açığını kapatarak bize getiri sağlar bunun yanı sıra her kullandığımız resim serverlarımız için ayrı bir maliyet getirmektedir. Tarayıcılar resimleri önbelleklerinde saklayarak resimlerinin sürekli sunucu üzerinden çağrılmasını minimum seviyede tutsada bu konuyla ilgili bizimde yapabileceklerimiz var. Tarayıcılar bizi bu kadar düşünürken biz kendimizi düşünmesek olmaz. (Bir yandan istersen önbelleğinde saklama tarayıcılar arasında en yavaş çalışan olursun bir anda temelde tabiki kendilerini düşünüyorlar 
). Özellikle veri boyutu küçük resimlerde kullanabileceğimiz farklı bir yöntem bulunmakta aşağıdaki örneklerde bunlardan bahsedeceğim.
Aşağıda bulunan iki resimde birbirinin aynısı ancak tarayıcı üzerinde gösterimlerinde bir farklılık var. ilk resimi oluşturan html kodlarına bakarsak standart src ye resimin bulunduğu path verilmiş ve sitede gösterimi sağlanmış.
<img class="alignnone size-full wp-image-47" title="netscape" src="http://anilgur.com/wp-content/uploads/2011/11/netscape.jpg" alt="" width="38" height="38" />
Diğer resimde ise daha farklı bir yöntem kullanılıyor. Resim url adresi yerine resimi oluşturan kodların base64 ile encode edilmiş hali src olarak verilmiş.
<img class="alignnone size-full wp-image-47" title="netscape" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBggGBQkIBwgKCQkKDRYODQwMDRoTFBAWHxwhIB8cHh4jJzIqIyUvJR4eKzssLzM1OD4ISo9QTw2QTI3ODUBCQoKDQsNGQ4OGTUkHiQ1NTU1NTU1NTQ1NTU1NTU1NTU1NSs1NTU1NCo1NTU1NTUpNSk1NSksNTQ1NSkuNCk0Nv/AABEIACYAJgMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAQQFBgcDCAL/xAA4EAABAwMBBAQLCQEAAAAAAAABAgMEAAURBgchMUESExVRFCQyYXGBhJGUpNMjJTZCVWOho9IX/8QAGQEAAgMBAAAAAAAAAAAAAAAAAQQAAgMF/8QAHxEAAgIBBAMAAAAAAAAAAAAAAAECEQMEEkFREyFx/9oADAMBAAIRAxEAPwDQNXapu1surkS1m2RmYsZqTJlTw4sAOLWhKUpRjm2d+eY3VXf+iXv9d0r8FK+pTjaEfvi+jn2VAUPVJfprYYlr1Vo7wW8NxYkt+WpmNLZYS2emEJUM4xknJ3cTitYxW22K5M0o5NkehTtFvo4XvSp9jk7pG9oeo3nUNs3TSzri1BKUCLJBUTwHl1T5NquGk704242gPtZH2raXG3EnnhQwQfR7jUzqYga7isNsx48eK4wtttllLYHSQhaskDJ39+cVfxoWWrlz3Rq2lrwfdPszJbCI8jrHWXW219JIW24ptRB7iUEj00Uy2fnpaTz3z5x+bepKXOmVjXaHHdVXZppClqXaIYCUjJPjD9RPYc5OhmGlxnWlm5KcAWOgcdUkAjOO41x2zXGdbr9PXbn3WHF2uKkqaJCsdbI5isxf2iX+RanLe5HgGK5kqb7Pb3rI6PWeT5ePzcfPWsZ7VQnl0qyzcm+KNvYS3rCydm3l5hu5xknwaV16FFfmVg57s+/jUPqu0Tm9VOTBFdUxhrDoQSglLSAd484PurAPGf3v5qTsM+5xrvH6l+SgFQBAUrGKiyNMrk0cZxq/ffw9Q7MlFehWFHiqXMPzTtFctlBJ2dQieJflZ+JdorIeQ81DoiHqG4tzzNuFvmIaDJehPBJWgEkJUFBQ3FSuWd9Rh2YNkfijUfxDP0qKKlgo+TssZPHVGoz7Qz9KkOytgjB1NqIg8R4Qzv/qooo2yUi1WSzRNPWdi229Kkx2Aej01lSiVEqUSTzKiT66KKKAT/9k=" alt="" width="38" height="38" />
Pratikte iki kod aynı işlevi görüyor ama önemli farkı ilk resimi sitenizde gösterebilmek için fazladan bir request atıyorsunuz. Çok fazla farklı icon yada resim gösterilen sayfalarda bu durum sunucunuz için ek maliyet demektir. Birkaç requestten ne olur diyebilirsiniz bende bazen kolaya kaçıp aynı şeyi düşünüyorum sonrasında ıkınan bir sunucu ile başbaşa kaldığınızda bu işlem için harcayacağınız emekten çok daha fazlasını optimizasyon için harcıyorsunuz. Sistemli gidip ipleri baştan sıkı tutmakta fayda var. Resimleri base64 ile encode etmek için birçok site mevcut
http://webcodertools.com/imagetobase64converter
http://www.greywyvern.com/code/php/binary2base64 gibi..
Yok ben başkasının yaptığını kullanmam diyorsanız kendiniz çevirin isterseniz birden çok resmi bir dizine toplayın base64 halini dosyalara yazın. Aşağıdaki php kodu ile herhangi bir resmi encode edip deneyebilirsiniz.
<?php
echo base64_encode(file_get_contents("netscape.jpg"));
?>
Ideasoft yazılım departmanı ve Ar-ge sorumlusu. Matematik mühendisi. İnternet üzerine, yazılım ve koda dair her şey hakkında araştırma yapmayı ve bunları denemeyi seviyor. Yazılıma dair yazılar ağırlıklı olmakla birlikte arama motorları, sosyal medya ve teknolojiyle ilgili diğer konularda da yazılar yazıyor. Bazı konular için vakit bulamamaktan şikayetçi..
