Portföyümde 10 MB'lık Bir İndirimi Nasıl Gerçekleştirdim

Django tabanlı bir portföy sitesine sahip olmak, projelerinizi ve çalışmalarınızı göstermek için harika bir yoldur. Ancak, büyük boyutlu görseller yüklediğinizde, site hızınız olumsuz etkilenebilir. PageSpeed Insights bana 91 olan masaüstü hızımı ve 63 olan mobil hızımı gösteriyordu. Görsellerin yüklenmesini iyileştirmek için bazı adımlar attım, ancak hala bir sorun vardı: PNG formatındaki görseller.

PNG'lerin Portföydeki Sorunu

Portföyünüzü oluştururken, çalışmalarınızı ekran görüntüsü olarak kaydedersiniz ve bunları admin paneline yüklersiniz. Bu ekran görüntüleri genellikle PNG formatındadır ve kaybı olmayan, tam boyutlu ve doğrudan ekranınızdan alınan görüntülerdir. Ancak, "görünmesi iyi" ile "hızlı yüklenmesi" aynı şey değildir. 1,4 MB boyutundaki bir PNG dosyası, WebP formatına dönüştürüldüğünde 175 KB'a düşer ve aynı görsel sonucu verir.

Bir Defaya Mahsus Geri Dönüşüm Çözümü: Yönetim Komutu

İlk olarak, zaten S3'te bulunan tüm görselleri dönüştürmek için bir yönetim komutu oluşturdum. Bu komut, üretim konteynırında çalışır ve Django ORM ve yapılandırılmış depolama arka ucuna tam erişim sağlar, böylece dosyaları okumak ve yazmak için bunları S3, yerel disk veya başka bir yerde olduğunun bilincine gerek duymaz.

from io import BytesIO
from django.core.files.base import ContentFile
from django.core.management.base import BaseCommand
from PIL import Image
from backend.projects.models import AudioWork, Project
def _to_webp(field_file, quality: int = 85) -> tuple[ContentFile, str] | None:
    try:
        with field_file.open("rb") as f:
            img = Image.open(f)
            img.load()
    except OSError as exc:
        return None, str(exc)
    mode = "RGBA" if img.mode in ("RGBA", "LA", "P") else "RGB"
    img = img.convert(mode)
    buf = BytesIO()
    img.save(buf, format="WEBP", quality=quality, method=6)
    buf.seek(0)
    old_name = field_file.name
    new_name = old_name.rsplit(".", 1)[0] + ".webp"
    return ContentFile(buf.read(), name=new_name), new_name

Kalıcı Çözüm: Yükleme Anında Otomatik Dönüştürme

Yönetim komutu, geçmişteki görselleri dönüştürür. Ancak, gelecekte yükleyeceğim yeni projeler için ne yapacağım? Her defe yönetim komutunu manuel olarak çalıştırmak istemiyorum. Bu nedenle, modeli, gelecekte yüklenen tüm görselleri otomatik olarak WebP formatına dönüştürecek şekilde güncelledim.

Gelecekte, portföy sitenizin hızını iyileştirmek için görsellerinizi WebP formatına dönüştürebilir ve bu şekilde kullanıcılarınızın daha iyi bir deneyim yaşamasını sağlayabilirsiniz.