Bildirimler

Html İçine Resim Gömme - Base64

5 Görüntülenme 2018-11-25 base64
Html İçine Resim Gömme - Base64

Çok küçük resimler için yeni resimler oluşturup html'den link vermek; site yüklenme süresini uzatırken, dosya karmaşasını da arttırır. Bunu önlemek için base64 ile resimleri html kodlarının içine gömebilirsiniz.

Html belgesine resim eklenmek istendiğinde yazılan kod bellidir. İmg elementi kullanılır ve src özelliğinin içine yazdığınız resmi yükler.

<img src="resim/yolu.png">

Bir site yüklenirken her resim için siteye tekrar bağlanılıp src özelliğinde bulunan dosya yolundaki resmi ister. Bu da bir vakit aldığından; özellikle küçük resimler için resim haritası, fontlar gibi yollara başvurulur. Bir diğer çözüm ise resmi, html kodlarının içine yazmaktır. Böylece site yüklenirken resim de beraberinde yüklenmiş olur.

Bazen de bir sayfa yaparsınız ve içinde çok az resim vardır. O sayfayı bir yere gönderceğinizde sayfayla beraber resmi de taşımanız gerekir. Resimleri de Html kodlarının içine gömmenin yolu, base64 tekniği kullanmaktır.

Base 64

Base64, 8 bit'lik verileri 64 bit'e çeviren bir kodlama tekniğidir. Herşey bu teknikle kodlanabilir. Aynı şekilde resimleri de bu mantıkla kodlayabilirsiniz. Kodladığınızda artık elinizde bir metin belgesi vardır. Bu metni doğru şekilde src kısmına yazdığınızda, resmi html belgesinin içine koydunuz demektir.

8 bit'ten 64 bit'e çevrilirken dosya boyutu yaklaşık 1/3 oranında büyür.

Bu sitede de yorum yapma kısmında "bilgi" anlamında "i" sembolü, çok küçük bir resim. Bunun için yeni bir resim dosyası oluşturmamak, site yüklenirken bu resmin de ayrıca yüklenmesini engellemek için base64 formatına çevirip koydum. Öğeyi inceleyerek görebilirsiniz.

Base64 Resmi Ekleme

Resimlerinizi öncelikle base64 formatına çevirmeniz gerekli. Bunun için javascript kodu yazabilir, Php dilindeki base64_encode fonksiyonunu kullanabilir, veya https://www.base64decode.org/ gibi sitelerden online çeviri yapabilirsiniz. Ve sonucunda bir yazınız oluşur.

Bu oluşan yazının base64 olduğunu anlaması için, yazının başına "data:image/png;base64," eklemeniz gerekir. Aşağıda örnek resim ve kodunu görüyorsunuz.

Base64 resim <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gkECgAwPmRQdQAABLBJREFUWMO1l11sFFUUx39n5s4OW2j5KP1Y2CKUUhOCtQEMMfpgotHEB42JCTz4IlUSgzEhAk+KSI0P2saHhpgQJCHxofBi4qsmxsiDTahiYjRZaKntQruUCk0p7O7cmePDbEub0nZb6k0mc+fr/P/n3HP+c66wyNh6ZoKBQ5WkLqjrDvXvR3UfsBfYgWo1ACJjwFXgMkiPTTV2j7wl0ZYzkwweWr2gfVmMQMNXQym1xc/Q6CBLGeKcE5P4aOhIw/BCrzmPBO0cACDd0d+lQf7mksEBNDqoQf5muqO/a6bNRSNQf/I3TFVNHbZwBbSeFRkygvFb7Z3R3Ej77vkJ1J/oxVtfs0ODwp9AgpUdRTH+ruDu7asjp3bPJdDQeR0VU4fND/4P4NMkMKu2SGRzQ0e3zY1A+otrwysX9vmXI3u8KTUnCdMdfV1LBZdlEdD6GKtkY8vpW0TF+ymC4OZSzASR8sLWCobvWfr+DZZMRlxvk6yqGnYGD9eCte1L+tpxebs5pHv/Zn5ue4LUGrOMKrXtg4c34KS/VQfVtvL1xZDPXMIff1jXxlnOSmhb+jt1DMP9B8oHd3mQuYTNXeXzC38zcT/PjTU7GRx3cJaTENf6DxjQfeV6/iBzCRnrx/M81hmXiwM+iZSHI+EyK0L3GWBPuZ7fvvYHd78/xdrVyVnPq9ozrF21nHVgjwGaF0u4fF8PNpchmfT55PyP+J6LjSIOv/YsjalqRJYtCs1m+pc6D3jwz+/YsUHES+I7Rc7/0AtAIbC88dwuGlPVy9ck1WpngbgT3PgLe3cY8XzEeIhjVlwXHZCxR4Hb0T6ie7cR4yOuB45ZeRIiYwYhg1IzEzy8kyWaHAc3ASiCgipaOotVwK4EhYwD9M5gRDQxSpSfjL01Xux96RDHIK6J5+KuBIFeA9IDCghRfgIN8ojxSncUNIofa4SqxpqvGhN7jPQvedzj0NTYDYKGBYhCMInYQ2PAKc1dg5gExktQs76SmvVrqd1QRcLEUaipcNlY4bJxtYu7FElMNXYLQPrLa2fVBm2ERdQWUBugYRGCIhoWURsfT9Ym+eXk6wvafPHcIJmxYjnSejZ7bPu7kj59CyneT2kQ3FQbQFhEwwIaBNPg2JjIGqO82pIiDAI0shCGEJXmkeK4wk/6NPcKi0uzeN4mNRXDMqshCcP3p0HDoOR5YdY1M0nZYilacdRWP/NmnLCLFr/TlT26/YNHt2Qa1k8ZpmT4IZFShGwBDQPUFsAGaGhJtryCuOW0kvO0ZA0d18H4rYhTkFlJaIivE/E9Ny5NcQ3iJhDPJ/nUy2WCU8D4renO63M3JkNHtxGOZnNi/BYctzBVCbEOmJiIkyjpwFSlJPB3PI8YvyxwMX5LcTSby364bf6+su7EZbx1dXXYwhUNi/Wz1jucOQ/wNu8sT5pFRnD91mA8l8t9unfhrVnu1F5Eo1z2eFNKTKJrSglnq6Ihkd5VHrjjdmWPNaVEwzngZXXW6c6Bei1OtmtQeGeqHN2qOhBn0ToXk/h46EjDyOPtjr+eYOi9SmovqmP+6j3gJCv34bh7gObZ23PJgPYi8qttbbww8pJEW755wGBbckH7/wHfNTJ6memVpwAAAABJRU5ErkJggg==">

Ayrıca resmin linkine buradan ulaşabilirsiniz. Bu bağlantıya internetiniz olmasa bile tıkladığınızda resmi görürsünüz. Çünkü resmin içeriği url'de yazıyor.

Önerilen Gönderiler

Yorum Bölümü
İsim:
Mail:
Yorum: