Skip to main content

Ürün Görselleri ve CDN

Bu yazıda uygulamaya eklenecek yeni bir görselin (kampanya, ürün, banner gibi) nasıl ve ne şekilde eklenmesi gerektiği anlatılmıştır.

Uygulamada görünecek görseller AWS Simple Storage Service (S3) servisinde “bimarket” bucket'ında tutulup buraya upload edilen görseller Medianova CDN üzerinden son kullanıcıya servis edilmelidir. Bimarket bucket'ına bakan CDN dağıtımımızın adresi https://bisu.mncdn.com şeklinde olup upload edilen görselin linki buradan çıkarılmalıdır.

Yeni Görsel Eklemelerinde Dikkat Edilecek Hususlar​

  • Görsel isminde Türkçe karakter, boşluk ve noktalama işaretlerinin olmaması gerekmektedir.

  • Görsel dosya boyutunun max. 100 kB olması gerekmektedir. Eger dosya boyutu 100 kB’tan buyukse bunun compress edilip oyle devam edilmesi gerekmektedir.

  • Banner ve kampanya görselleri uygulama açılış hızını direkt etkilediği için olabildiğince fazla compress edilip yüklenmelidir.

  • Görsel dosya uzantısının .png veya .jpg/.jpeg olması sağlanmalıdır. Ekipten gelen dosya uzantıları değiştirilebilir. Bu dosyaların boyutu düşürüldükten sonra S3'e yüklenmelidir.

  • Ürün detay ekranında (PDP) 720x720, ürün listeleme (kategori, PLP) ekranlarinda 150x150 görseller kullanılmaktadır. Bu sebeple görselin maximum 720x720 ölçeğinde olmasına dikkat edilmelidir. Daha büyük ölçekler sadece dosya boyutunu artırmaktadır.

  • Biri/BiSU Hızlı Teslimat ürün görselleri detay ekranları için Biri_Product tablosunda imageUrl ve listeleme-kategori ekranları için imageThumbnailUrl sütunları kullanılmalıdır.

  • BiSU Bayi Teslimat ürün görselleri için ekstra bir alan bulunmamaktadır, ürün detay görselleri kullanılabilir.

CDN Kullanımı​

Eğer elinizdeki görsel(ler) yukarıda belirtilen hususları sağlıyor ise dosyayı S3'de uygun olan bir dizine yerleştirmeniz gerekmektedir.

Bu noktada dosyayı yerleştireceğiniz dizinin amaca uygunluğuna dikkat edilmelidir. Örneğin bir kampanya görseli biri-products/ dizinine yerleştirilmemelidir. Kampanya görselleri ilgili dizinde yine mümkünse yaratıldığı tarihe göre bir dizine yerleştirilmelidir.

Ürün görselleri ilgili markanın dizinine yerleştirilmelidir.

Uygulama içi assetler yine belirli dizinlerde muhafaza edilmektedir.

Uygun dizini bulduktan sonra (eğer olmadığını düşünüyorsanız dizin oluşturmalısınız) S3'e upload edebilirsiniz. Görselin tüm dünyadan erişilebilmesi için public-read izni ile upload edilmelidir. Aksi takdirde erişilemez.

S3'e yüklenilen görselin dosya yolu ile birlikte şöyle bir link ile erişilebilir olmalıdır:

https://bimarket.s3.eu-central-1.amazonaws.com/biri-products/abant/349.png

Bu S3'den size verilen görsele erişebiliyorsanız dosyayı doğru bir şekilde yükleyebildiğinizi anlayabilirsiniz.

Fakat bu link ile veritabanına yazmamalısınız. S3 bucket'ı Frankfurt'ta bulunmakta lakin bizim kullanıcılarımız Türkiye lokasyonunda bulunmaktadır. Bu sebeple görsellerin yüklenme süresi ve ağ gecikmesi hesaba katıldığında uygulama deneyiminin iyileştirilmesi amacıyla Content Delivery Network (CDN) adı verilen bir yöntem kullanılmaktadır. Bu yöntemde amaç dosyayı kullanıcıya en yakın lokasyondan eriştirmektir. Bu sağlandığında ağ gecikmeleri ve dolayısıyla yüklenme süreleri düşecek ve görsellere kullanıcılar daha hızlı bir şekilde erişebilecektir.

Bu noktada Türkiye lokasyonlu hizmet noktaları (PoP) bulunan bir sağlayıcı olan Medianova CDN'i kullanmaktayız. Bu CDN hizmetini kullanmak için ekstra bir işlem yapmanıza gerek yoktur. S3'den alınan görsel linkini aşağıdaki gibi değiştirerek Medianova'dan görselin getirilmesini sağlayabilirsiniz:

https://bisu.mncdn.com/biri-products/abant/349.png

Artık veritabanına yazılabilir hale geldi. Ek olarak bu görseli istediğimiz boyuta yeniden boyutlandırabileceğimiz bir API'de kullanabiliyoruz örnek olarak bu görseli ürün listeleme ekranında kullandığımız hale getirmek isteseydik:

https://bisu.mncdn.com/mnresize/150/150/biri-products/abant/349.png

Bu şekilde görsel yeniden boyutlandırılıp servis edilebilir hale gelmektedir.

Son olarak Medianova CDN'den alınan .png/.jpg gibi uzantılar sıkıştırılıp webp formatında sunulmaktadır. Bu işlemde URL değişmemektedir.

Bunun için istek header'ında 'Accept: image/webp' değeri gönderilmelidir. Aksi halde dosya uzantısı olduğu gibi gönderilecektir.

Örnek olması açısından, bu örnekte verdiğimiz görselin S3'deki boyutu 111 kB iken, Medianova'dan servis edilen boyutu 28.88 kB'a düşmüştür. 150x150 ölçeğine de indirdiğimizde boyut 6.1 kB'a kadar düşmüştür.

Birincil ve İkincil CDN​

Uzun süreli arıza durumlarında geçilebilecek AWS Cloudfront CDN dağıtımı hala aktif bir şekilde tutulmaktadır.

Bu sebeple bizim için:

  • Birincil CDN: bisu.mncdn.com
  • İkincil CDN: d1mb4aojsgv2gt.cloudfront.net

Acil durumlar haricinde ikincil CDN hizmeti kullanılmamalıdır.

Görsel Optimizasyonu​

Ekipten gelen görseller yukarıdaki şartları sağlayamıyorsa, ilgili görsel elle düzenlenip S3'e yukarıdaki şartları sağlayacak şekilde yüklenmelidir.

Ürün detay ekranları için kullanılan görsellerin sıkıştırılması için için CompressJPEG ile CompressPNG kullanılabilir.

Gerekirse WEBP dönüşümü için ise Convertio kullanılabilir.

Eğer çok fazla görseli aynı anda işlemek gerekirse bu sefer bir CLI aracı kullanılabilir. Örnek olarak optimizt aracını kullanabilirsiniz, aşağıda bulk işlemler için bir yöntem gösterilmiştir.

Hatırlatma

Toplu işlemler daha fazla dikkat gerektirir.

# Bir adet gorselin optimizasyonu icin
optimizt dosya-yolu

# Bulunulan dizindeki tum .png dosyalarin optimizasyonu icin 
# (Diger formatlar icin .png yerine .jpg vd. yazilmasi yeterlidir.)
find . -iname \*.png -exec optimizt {} +

# Bulunulan dizindeki tum dosyalarin WEBP formatina donusturulmesi icin:
optimizt --webp .

# AWS S3'de bimarket bucketindaki biri-home-banners dizinindeki ve onun altindaki dizinlerin dosyalarini lokalinizde bulundugunuz dizine almak icin:
aws s3 cp --recursive s3://bimarket/biri-home-banners .

# Lokalinizdeki bulunulan dizindeki dosyalari S3'e upload edip var olanlari da guncellemek icin:
# Not: Var olan dosyalari da guncelledigini ve dosyalara public erisim verildigini unutmayiniz. 
aws s3 sync . s3://bimarket/biri-home-banners/ --acl public-read

Olası Hata Durumları ve Çözümler​

  • S3'e yüklediğim görsel görünmüyor, ne yapmalıyım?

Görselin S3'deki linkine erişebiliyor ve CDN URL'i üzerinden erişemiyorsan dosya isminde bir hata yapmış olabilirsin. Görsele S3'deki linkinden de ulaşamıyorsan dosyayı yüklerken public erişim iznini vermemiş olabilirsin.

  • Uygulamadaki hiçbir görsel görünmüyor, ne yapmalıyım?

Görsellerden birini S3 linki üzerinden ve ikincil CDN üzerinden kontrol edip hangi serviste sorun olduğunu tespit etmelisin CDN'ler görselleri önbellekleseler de dosya kaynağı S3 olduğundan AWS S3 servisinde oluşabilecek bir sorundan dolayı bu hata yaşanıyor olabilir.

Eğer birincil CDN (Medianova) URL'leri çalışmıyorsa, sorun Medianova'dadır. Firma ile iletişime geçilmeli ve bu süreçte görseller ikincil CDN'e geçirilebilir.

  • Bazı görseller görünüyor fakat bazılarında sorun var, ne yapmalıyım?

Dosya isimlendirmesinde bir hata olmadığını düşünüyorsan ve ikincil CDN'den dosyaya erişilebiliyorsa Medianova tarafında bir önbellekleme sorunu yaşanıyor olabilir. İlk çözüm olarak ilgili dosya(lar) Medianova önbelleğinden silinmelidir. Silinme tamamlandıktan sonra dosyalara hala erişilemiyorsa Medianova ile iletişime geçilip bu dosyalar ikincil CDN ile sunulabilir. Silme işlemi Medianova arayüzü üzerinden gerçekleştirilmektedir.