Görüntüleri 10,000 Küçük HTML Elemanına Dönüştürdüm, Neden Olmasın ki?

En iyi projeler, kimsenin yaşamadığı sorunları çözenlerdir.

Geçen hafta sonu ekranıma bakarken, görüntüler hakkında düşünmeye başladım. Üretken bir şekilde değil. “Görüntü yüklemelerini nasıl optimize edebilirim?” ya da “Web için en iyi format hangisi?” diye değil; çok daha anlamsız bir düşünceyle:

Ya her piksel küçük bir HTML elementi olsaydı?

Ve böylece, IMGML doğmuş oldu.

Premis

Kavram şu: bir resmi al, piksel piksel oku ve her pikselin, orijinal pikselin arka plan rengiyle eşleşen 1×1

elementi olarak temsil edildiği bir HTML dosyası oluştur.

Bu kadar. Tüm mesele bu.

Hiç etiketleri yok. Hiç yok. Hiç SVG yok. Sadece, bir görüntüyü taklit etmeye çalışan, bir ızgara düzenine yerleştirilmiş; mikro boyutlarda yatay kuralların binlercesi var.

Çalışıyor Mu?

Teknik olarak? Evet.

Pratikte? Bu oldukça güçlü bir kelime.

100×100 piksel bir resmi yüklediğinizde 10,000 HTML elementi elde edersiniz. 200×200 bir görüntü mü? 40,000 element. Tarayıcınız bunu render edecektir. Ancak, tarayıcınız aynı zamanda “Bunu neden yaptınız?” diye sorabilir.

Ama şu var ki — görüntü gerçekten de benziyor. HTML dosyasını açtığınızda, işte o, stilize edilmiş

etiketlerinden tamamen yeniden inşa edilmiş fotoğrafınız. Karmaşık ama bir şekilde tatmin edici bir güzellikte.

Neden Peki?

Cevaplarım: çünkü yapabilirim, kullanım durumu yok, ve tartışmalı.

Bu bir “ya ne olursa” projesi. Merak ve tartışmalı bir muhakeme arasında var olan bir proje. Bakıyorsunuz “Bunu yapabilir miyim?” diye sormadan önce, “Bunu yapmalı mıyım?” sorusunu kendi kendinize soruyorsunuz.

Bazıları bunu zaman kaybı olarak değerlendirebilir. Ben ise onu absürtlük içinde bir öğrenme deneyimi olarak görüyorum.

Teknoloji

Merak edenler için geliştirme, Laravel 12 ve Livewire ile yapıldı. Bir resmi yükleyin, backend her pikseli işliyor ve yeni oluşturduğunuz HTML canavarı indiriyorsunuz.

Çıktının nasıl göründüğüne dair bir örnek — her birinin inline arka plan rengi olan bir dizi

etiketi:

  
 style="background:#cad5d9" />
  
 style="background:#c5ced3" />
  
 style="background:#cdd6db" />
  
 style="background:#dde4ea" />
  
 style="background:#e4ebf1" />
  
 style="background:#e1e6ec" />
  
 style="background:#dadfe5" />
  
 style="background:#d7dadf" />
  ...

Optimizasyon Tüneli

Bu absürt fikre kendimi adamamla, her pikseli mümkün olan en küçük hale getirme takıntısı geliştirdim. İşte böyle gitti:

Deneme 1: RGB

 style="background:rgb(255, 255, 255)">

Çalışıyor, ama çok fazla yer kaplıyor. Tüm bu karakterler birikiyor.

Deneme 2: Hex

 style="background:#c5ced3"/>

Daha kısa. Hex kodları RGB’den daha kompakttır.

Deneme 3: Kapanış eğik çizgiyi atla

 style="background:#c5ced3">

HTML5’te isteğe bağlıdır. Her bayt önemlidir.

Deneme 4: Alıntı işaretlerini kaldır

 style=background:#c5ced3>

Ayrıca geçerli bir HTML. Minimuma iniyoruz.

Deneme 5: bgcolor niteliği

 bgcolor="#c5ced3">

Artık geçersiz, ve neden olduğu belirsiz bir şekilde sadece üzerinde çalışıyor. Bir çıkmaz sokak.

Deneme 6: color niteliği

 color=#c5ced3>

Bu çalışıyor. Geçersiz, önerilmiyor, ve bu proje için mükemmel.

Deneme 7: Hashtagi kaldır

 color=c5ced3>

Görünüşe göre # hex renklerde isteğe bağlı. Bir karakter daha kayboldu.

Her pikseli bu kadar küçültmenin en kısa yolunu buldum. Eğer daha kısa bir yol biliyorsanız, gerçekten merak ediyorum.

Kod basit. PHP’nin görüntü fonksiyonları piksel okumayı hallediyor:

// Daha yönetilebilir hale getirmek için boyutlandır
$image = $this->resizeImage($path, 200, 200);
$resource = imagecreatefromjpeg($image);

$width = imagesx($resource);
$height = imagesy($resource);
$pixels = [];

// Her pikselde döngü
for ($y = 0; $y  $height; $y++) {
    for ($x = 0; $x  $width; $x++) {
        // Bu koordinattaki renk indeksini al
        $color = imagecolorat($resource, $x, $y);

        // RGB dizisine dönüştür
        $rgb = imagecolorsforindex($resource, $color);

        // Hex formatında (hashtag olmadan) formatla
        $hex = sprintf('%02x%02x%02x', $rgb['red'], $rgb['green'], $rgb['blue']);

        $pixels[] = $hex;
    }
}

Her satırı, her sütunu döngüye al, rengi yakala, hex formatına çevir, işte bu kadar. Livewire yükleme/indirme akışını yönetir. Hiçbir şey devrimsel değil — sadece makul araçların, makul bir fikre uygulanması.

Aslında Öğrendiklerim

Absürtlüğüne rağmen, IMGML’nin geliştirilmesi bana birkaç önemli şeyi hatırlattı:

1. Sınırlamalar yaratıcılığı doğurur. Kendimi sadece HTML öğeleri ile sınırlamak, render konusunda farklı düşünmemi sağladı.

2. Performans her yerde önemlidir. Görüntüleri pikselle işlemek, gerçek görüntü kütüphanelerinin yaptığı işi takdir etmemi sağladı.

3. Yan projelerin amaca ihtiyacı yoktur. Her şeyin teslim edilmesi, ölçeklenmesi ya da gerçek bir sorunu çözmesi gerekmiyor. Bazen, tuhaf bir şey yapar ve sadece gülümseriz.

Bunu Kullanmalı Mısınız?

Kesinlikle hayır.

Peki, belki. Eğer şunları yapmak istiyorsanız:

• Bir web geliştiricisini şaşırtmak
• Dünyanın en verimsiz görüntü formatını yaratmak
• HTML’in Turing tam olduğunu kanıtlamak (değil ama buna benzer bir şey hissediliyor)
• Bir Cumartesi günü vakit öldürmek

O zaman evet, IMGML sizin için.

Kendiniz Deneyin

Proje açık kaynak. Klonlayın, çalıştırın, bir resmi yükleyin ve png’nizi bir

ile birer birer render ederken tarayıcınızın yaşam kararlarını sorguladığını izleyin.

Dünyayı değiştirecek mi? Hayır.

Ancak, sizleri “vay be, bu ne kadar aptal” hissine kısa bir süre de olsa sokacak mı? Neredeyse kesin.

Ve bazen bu yeterlidir.

İşte GitHub avatarımın IMGML formatındaki versiyonu, eğer etkisini görmek isterseniz.

Not:

 color="c5ced3" />

Firefox’ta çalışmaz. Bu örnek aşağıdaki yapıyı kullanır:

 style="background:#07040b" />

IMGML, GitHub‘da mevcut. Absürtlüğü takdir ediyorsanız yıldızlayın.