Angular ile Görüntü Kesme Noktalarını Yönetme

Web geliştiricileri olarak, genellikle duyarlı ve medya açısından zengin uygulamalar oluşturmamız gerekir. Bu tür gereksinimlere sahip olmak, son kullanıcılara en iyi deneyimi sağlamak istediğimizden, medya sorgularının yanı sıra görüntü kesme noktalarıyla çalışmamız gerektiği anlamına gelir. Gereksinimler listesine ek olarak, SPA'lar ve diğer uygulama türleri oluşturmak için harika olan Angular gibi bir ön uç çerçeve kullanmamız gerekebilir.

Bu makalede, görüntü kesme noktalarına, kullanım durumlarına ve uygulamalı bir örnek üzerinden inceleyeceğiz; bunları Angular'ın kendi BreakPoint Observer'ını kullanarak bir Angular uygulamasında uygulayacağız. Bu yaklaşımı kullanırken, bu popüler çerçevenin yukarıda bahsedilen tekniklerle sorunsuz bir şekilde çalışmamıza neden yardımcı olduğunu da vurgulayacağız.

Görüntü Kesme Noktaları ve Duyarlı Görüntüler

Duyarlı düzenler çağında (görünüm alanı boyutuna göre kesme noktaları yakaladığımız ve sayfa düzenini kesme noktasına göre değiştirdiğimiz), ayrıca bir düzenden sonra bile görüntülerin doğru boyutlarda görüntülenebildiğinden emin olmamız gerekir. değiştirmek. Modern responsive web siteleri için doğru görseli seçmek oldukça zordur.

Geliştiricilerin şu anda kullanabileceği iki seçeneği tartışalım.

srcset

srcset , görüntülenen <img> boyutuna ve ekranın yoğunluğuna bağlı olarak tarayıcının aralarında geçiş yaptığı bir görüntü listesi tanımlamamıza izin verir.

Bir örneğe bakalım:

 <img src="tuscany.jpg" />

Yukarıda, görüntü için piksel genişliğini gösteren w ile 3 görüntü belirtiyoruz. Yukarıdakileri srcset ile kullanırken, size özniteliğini de belirtmemiz gerekir (bu gereklidir, çünkü belirtim, sizes ve w kullanırsak bir srcset özniteliğine de sahip olmamız gerektiğini zorunlu kılar). Bu özelliğin amacı nedir? Tarayıcıların, sayfayı düzenlemeden önce (resmin ne kadar büyük olacağını bilmeden önce) bir kaynak kümesinden hangi kaynağın yükleneceğini seçmesi gerekir. sizes tarayıcıya, yerleşimden sonra görüntünün görünüm alanının %100'ünü kaplayacağına dair bir ipucu olarak düşünebiliriz ( vw bunu ifade eder). Tarayıcı, yükleme sırasında gerçek görünüm genişliğini (görüntünün DPR'sinin yanı sıra) bilir, böylece hangi boyutta kaynağa ihtiyaç duyduğunu bulmak ve kaynak kümesinden birini seçmek için matematiği yapabilir.

<picture> ve <source media=""> eleman kombinasyonları, mizanpaj kesme noktalarındakiler gibi medya sorgularına yanıt olarak görüntü kaynaklarını değiştirmemize izin verir.

Buna da bir örnek verelim:

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

Yukarıdaki kodu yerel olarak küçük, orta ve büyük boyutta seçtiğiniz bir resimle değiştirin. Tarayıcıyı yeniden boyutlandırarak nasıl farklı bir görüntü elde ettiğinize dikkat edin.

Yukarıdakilerin hepsinden temel çıkarım, görüntüleri belirli kesme noktalarında değiştirmek istiyorsak, medya sorgularını doğrudan işaretlemeye koymak için <picture> öğesini kullanabiliriz.

Not : <picture> ve srcset + size arasındaki farkları keşfetmekle ilgileniyorsanız, Eric sizes harika makalesini okumanızı tavsiye ederim: sizes srcset .

Şimdiye kadar, saf HTML ortamında medya sorguları ile birlikte görüntü kesme noktalarının nasıl kullanılacağını tartıştık. Görüntü kesme noktaları oluşturmanın uygun, neredeyse yarı otomatik bir yolunun yanı sıra kesme noktaları için karşılık gelen görüntüleri medya sorgularını belirtmek zorunda kalmadan bile olsa çok daha iyi olmaz mıydı? Neyse ki Angular'ın bize yardımcı olacak yerleşik bir mekanizması var ve ayrıca bir üçüncü taraf hizmeti kullanarak belirli koşullara dayalı olarak uygun görüntüleri dinamik olarak oluşturmaya da göz atacağız.

Açısal Düzen Modülü

Angular, CDK (Bileşen Geliştirme Kiti) araç setinde bulunan bir Düzen Modülü ile birlikte gelir. Angular CDK, bileşen geliştirmeye yardımcı olmak için iyi test edilmiş araçlar içerir. CDK'nın bir parçası, BreakpointObserver içeren Düzen Modülüdür. Bu yardımcı, medya sorgusu kesme noktalarına erişim sağlar; bu, bileşenlerin (ve içeriklerinin) tarayıcı boyutu (ekran boyutu) sezgisel olarak değiştirildiğinde değişikliklere uyum sağlayabileceği anlamına gelir.

Önerilen okuma : Düzen Modülü

Artık teoriyi ortadan kaldırdığımıza göre, hadi işe başlayalım ve duyarlı görüntü kesme noktalarını uygulayacak bir uygulama oluşturalım. Bu ilk yinelemede, uygulamanın kabuğunu Angular CLI: ng new bpo aracılığıyla oluşturacağız ve gerekli seçenekleri belirleyeceğiz.

BreakpointObserver kullanmak için npm: npm i @angular/cdk aracılığıyla yapabileceğimiz Angular'ın CDK Düzen Modülünü de kurmamız gerekiyor.

Kurulumdan sonra, istediğimiz herhangi bir bileşene gerekli import ifadelerini ekleyebileceğiz:

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

BreakpointObserver kullanarak görüntü alanı genişliğindeki değişikliklere abone olabiliriz ve Angular bize uygun erişimciler sağlar, bu da medya sorgularını hiç kullanmamıza gerek olmadığı anlamına gelir! Devam edelim ve şunu deneyelim:

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

Daha önce belirtildiği gibi, yukarıdaki erişimci özellikleri medya sorgularını aşağıdaki şekilde yansıtır:

• Breakpoints.XSmall : maksimum genişlik = 599,99 piksel
• Breakpoints.Small : minimum genişlik = 600 piksel ve maksimum genişlik = 959.99 piksel
• Breakpoints.Medium : minimum genişlik = 960 piksel ve maksimum genişlik = 1279,99 piksel
• Breakpoints.Large : minimum genişlik = 1280 piksel ve maksimum genişlik = 1919,99 piksel
• Breakpoints.XLarge : minimum genişlik = 1920 piksel

Artık her şeye sahibiz, yani uygun görüntüleri oluşturmaya başlayabiliriz.

Görüntüler için Duyarlı Kesme Noktaları

Duyarlı görüntüler oluşturmak için birkaç seçeneğimiz var:

1. Duyarlı Görüntü Kesme Noktaları Oluşturucu
   Bu aracı kullanarak, herhangi bir görüntüyü yükleyebilir, çeşitli seçenekler ayarlayabiliriz, örneğin oluşturmak istediğimiz görüntü sayısı. Aracı çalıştırdıktan sonra, oluşturulan görüntüler hakkında görsel bir temsilimiz olacak ve bunları, daha önce bahsedilen <picture> öğesini kullanan bazı oluşturulmuş kodlarla birlikte bir zip dosyası olarak indirebiliriz.
2. Başka bir çözüm, projemiz için, gulp-responsive veya grunt-responsive-images gibi NPM deposunda bulunan bazı paketler aracılığıyla kesme noktaları oluşturmak üzere bir inşa adımı oluşturmak olacaktır. Bunların her ikisi de işletim sistemimiz için yüklememiz gereken ek kitaplıklara bağlıdır. (Ek bilgi için lütfen uygun depoları kontrol edin.)
3. Yine başka bir çözüm, görüntüleri depolamak ve yalnızca istenen kaynağın URL'sini değiştirerek ihtiyaç duyduğumuz bir boyut ve biçimde sunmak için Cloudinary gibi bir hizmet kullanmak olacaktır. Bu bize en fazla esnekliği sağladığı için yaklaşımımız olacaktır.

Önerilen okuma : Duyarlı Görüntü Kesme Noktaları Oluşturucu ile Sanat Yönetmenliğini Otomatikleştirme, Eric Portis

Orijinal görüntüyü Cloudinary hesabıma yükledim, bu da o görüntüye aşağıdaki URL üzerinden erişebileceğim anlamına geliyor:

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

Bu, üzerinde çalışacağımız tam boyutlu, ham, orijinal ve değişmemiş görüntüdür.

Çok daha küçük bir sürüm oluşturmak için görüntünün URL'sini değiştirebiliriz. Örneğin, 600 piksel genişliğinde bir görüntüye sahip olmak istiyorsak, Cloudinary URL'sini* aşağıdaki gibi güncelleyebiliriz:

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* URL'ye eklenen w_600 not edin.

Umarım, bu noktada, tüm bunların nereye gittiğini görürsünüz. Yukarıdaki yaklaşıma dayanarak, doğru kesme noktası için doğru görüntüyü çok hızlı bir şekilde oluşturmaya başlayabiliriz.

Cloudinary kullanmak, aynı görüntünün birden fazla sürümünü oluşturmamız, depolamamız ve yönetmeniz gerekmediği anlamına gelir - bu, Cloudinary tarafından anında yapılır.

Kodumuzu güncelleyelim:

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>

 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

Daha önce bahsedilen listeden gözlemlemek için herhangi bir sayıda kesme noktası seçebiliriz ve bir Gözlemcimiz olduğu için değişikliklere abone olabilir ve bunlara göre hareket edebiliriz:

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

Cloudinary'deki farklı görüntülerin seçeneklerini ele almak için takip etmesi çok kolay olacak bir yaklaşım kullanacağız. Her durum için bir seçenekler değişkeni oluşturacak ve nihai Cloudinary URL'sini güncelleyeceğiz.

Bileşen tanımının en üstüne şunu ekleyin:

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

Ve aşağıdakileri de ilk if ifadesine ekleyin:

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

Sonuç, güncellenmiş bir Cloudinary URL'si olacak:

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

Burada belirlediğimiz seçenekler nelerdir?

• c_thumb (görüntünün küçük resmini oluşturur);
• g_auto (en ilginç kısma odaklanır; küçük resimde katedrali görüyoruz);
• f_auto (belirli bir tarayıcı için en uygun biçimi, yani Chrome için WebP'yi sunar);
• q_auto (görselleri etkilemeden görüntünün kalitesini ve dolayısıyla genel boyutunu azaltır);
• w_400 (görüntünün genişliğini 400 piksele ayarlar).

Merak uğruna, orijinal görüntü boyutunu bu yeni oluşturulan görüntüyle karşılaştıralım: 2,28 MB ve 29,08 KB!

Artık basit bir işimiz var: farklı kesme noktaları için farklı seçenekler yaratmamız gerekiyor. Hemen test edebilmeniz için StackBlitz'de örnek bir uygulama oluşturdum (burada bir önizleme de görebilirsiniz).

Çözüm

Günümüz web'inde masaüstü ve mobil cihazların çeşitliliği ve kullanılan medya miktarı olağanüstü bir sayıya ulaştı. Web geliştiricileri olarak, herhangi bir cihazda çalışan ve görsel deneyimi etkilemeyen web uygulamaları oluşturma konusunda ön saflarda olmalıyız.

Doğru görüntünün doğru cihaza yüklenmesini sağlayan çok sayıda yöntem vardır (veya bir cihazı yeniden boyutlandırırken bile). Bu makalede, duyarlı görüntülerle başa çıkmak için bize güçlü bir arayüz sağlayan BreakPoint Observer adlı yerleşik Açısal özelliği kullanan bir yaklaşımı inceledik. Ayrıca, buluttaki görüntüleri sunmamıza, dönüştürmemize ve yönetmemize olanak tanıyan bir hizmete de baktık. Elimizde bu kadar zorlayıcı araçlara sahip olsak da, ziyaretçi kaybetmeden sürükleyici görsel web deneyimleri yaratabiliriz.