Mehmet Köse

Mehmet Köse

As a self-taught developer, I’ve been around web technologies for ten years and still counting. I truly believed the web, passionately waited to be improved the web standards and capabilities of web browsers. Interested in real-time technologies, used WebSockets. I've Involved open-source movement, built some packages in Javascript and Python. Eversince websites became proper apps with state management, routing, etc... I learned React.js and focused on frontend development. Since the day I started doing front-end, I'm building Progressive Web Applications.

Web'de Img Etiketini Efektif Kullanmak

Yıllardır kullandığımız img etiketi süreç içinde oldukça duyarlı hale geldi. Logo gibi imaj dosyalarını responsive yapmak yıllardır uygulanan bir şeydi. Kod seviyesinde düşünürsek standartların da günceli yakaladığını söyleyebiliriz.

Bu yazıda değinilen iki konu var aslında; resim performansı ve resim deneyimi.

Aşağıdaki koda bakacak olursanız, srcset attribute’ü ile cihaz genişliğine göre resim versiyonu girilebildiğini görebilirsiniz. Resimler pek dikkat etmediğimiz ama bizi büyük performans kaybına uğratan şeyler. Birkaç versiyonunu tutmak ve bu şekilde sunmakta fayda var. Ayrıca asıl src kısmına da küçük olan resmin girildiğini de görüyorsunuz. Sayfa yüklenme sürelerini arttıran bir unsur.

Diğer bir konu da loading=lazy attribute’ü. Bu tarayıcılara yeni yeni gelen bir konu. Önceside native olarak yapmanın imkanı yoktu.

Checklistlere ekleyin, performans, SEO, adına ne derseniz deyin.. Bakılacak kısımlardan biri de img etiketleri artık.

<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf" loading="lazy">