Giriş Servis Durumu

Imageus, web site, mobil uygulama ve benzeri projelerinizde kullanılan görsellerin backend kodu yazmadan kolayca entegre edilmesine olanak sağlayan, görsel işleme servisidir.

Sol menüdeki adımları takip ederek kolayca projenize entegre edebilirsiniz.

Kurulum

Imageus iki şekilde çalışır ve bu iki çalışma tipinin de kurulumu çok kolaydır

Kullanım Url Builder Kurulumu

Aşağıdaki script dosyasını sayfanızın en altına body etiketi kapanışından öncesine ekleyin

<script src="https://img.imageus.dev/imageus.js"></script>

Eğer çalıştığınız sayfada görseller sonradan render oluyorsa window.initImageUs() komutunu çalıştırmanız yeterli olacaktır. Bu yöntem daha çok ajax ile getirilen içeriklerde işinize yarayacaktır.

Eğer Url Builder kullanmadan sadece url üzerinden işleme yapılacak ise bu adım es geçilebilir.

Url Builder Kullanımı

Örnek kullanım;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-mode="contain" />

Url Builder özelliği kullanımı anlaşılır hale getirmektedir, sizin adınıza url komutu üretir. Dilerseniz Url şeklinde de kullanabilirsiniz. Url Builder'ın ürettiği Url kodu, Url kullanımı kısmında mevcuttur.

Url Kullanımı

Örnek kullanım;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=contain

Url Builder özelliği kullanımı anlaşılır hale getirmektedir, sizin adınıza url komutu üretir. Dilerseniz Url şeklinde de kullanabilirsiniz. Url Builder'ın ürettiği Url kodu, Url kullanımı kısmında mevcuttur.

Kullanım Modları

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=contain

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-mode="contain" />
  • contain: En / boy oranını koruyarak görseli verdiğiniz ölçülerde bir imaj içerisine sığdırın, firma logosu vb kullanım alanları için idealdir.
  • fill: En / boy oranını göz ardı ederek verdiğiniz ölçülerde boyutlandırma yapar.
  • inside: En / boy oranını koruyarak, görüntüyü mümkün olduğunca büyük olacak şekilde yeniden boyutlandırırken, boyutlarının belirtilenlerin her ikisine eşit veya daha küçük olmasını sağlayın.
  • outside: En / boy oranını koruyarak, görüntüyü mümkün olduğunca küçük olacak şekilde yeniden boyutlandırırken boyutlarının belirtilenlerin her ikisine eşit veya daha büyük olmasını sağlayın.

Mod: Cover

cover: (varsayılan) En / boy oranını koruyarak verdiğiniz görseli ilgili ölçülerde kesin.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=cover

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-mode="cover" />

Mod: Cover with Position

position: En / boy oranını koruyarak verdiğiniz görseli ilgili ölçülerde keserken ne yöne odaklanacağınızı tercih edin. Bu parametre sadece cover moduyla çalışabilir.

Alabileceği Değerler :

  • center(varsayılan) : Görselin merkez kısmına odaklanarak kırpma işlemini sağlar.
  • top: Görselin üst kısmına odaklanarak kırpma işlemini sağlar.
  • bottom: Görselin alt kısmına odaklanarak kırpma işlemini sağlar.
  • left: Görselin sol kısmına odaklanarak kırpma işlemini sağlar.
  • right: Görselin sağ kısmına odaklanarak kırpma işlemini sağlar.

İkili Değerler Vererek Kullanılabilir (Örnek):

  • right top: Görselin sağ üst kısmına odaklanarak kırpma işlemini sağlar.
  • left top: Görselin sol üst kısmına odaklanarak kırpma işlemini sağlar.
  • right bottom: Görselin sağ alt kısmına odaklanarak kırpma işlemini sağlar.
  • left bottom: Görselin sol alt kısmına odaklanarak kırpma işlemini sağlar.

Aşağıda belirtilen modlarıUrl kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&position=right top&mode=cover

Aşağıda belirtilen modlarıUrl Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-position="right top"
imageus-mode="cover" />

Mod: Contain

contain: En / boy oranını koruyarak görseli verdiğiniz ölçülerde bir imaj içerisine sığdırın, firma logosu vb kullanım alanları için idealdir.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=contain

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-mode="contain" />

Mod: Contain with Background Color

contain: En / boy oranını koruyarak görseli verdiğiniz ölçülerde bir imaj içerisine sığdırın, firma logosu vb kullanım alanları için idealdir. Arka plan rengi kullandığınız görsellerin zemini için uygulanabilir, örneğin png bir görsel gri bir arkaplanda kullanıyorsanız. Webp formatında alacağınız çıktının zeminine istediğiniz rengi verebilirsiniz ya da renk belirtmeyerek yine transparan bir çıktı alabilirsiniz.

background kullanımı için başında # olmadan HEX renk kodu girilmelidir, örnek: e73338

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=contain&background=e73338

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="e73338"
imageus-mode="contain" />

Mod: Fill

fill: En / boy oranını göz ardı ederek verdiğiniz ölçülerde boyutlandırma yapar.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=fill

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-mode="fill" />

Mod: Inside

inside: En / boy oranını koruyarak, görüntüyü mümkün olduğunca büyük olacak şekilde yeniden boyutlandırırken, boyutlarının belirtilenlerin her ikisine eşit veya daha küçük olmasını sağlayın.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=inside

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-mode="inside" />

Mod: Outside

outside: En / boy oranını koruyarak, görüntüyü mümkün olduğunca küçük olacak şekilde yeniden boyutlandırırken boyutlarının belirtilenlerin her ikisine eşit veya daha büyük olmasını sağlayın.

En / boy oranını koruyarak, görüntüyü mümkün olduğunca küçük olacak şekilde yeniden boyutlandırırken boyutlarının belirtilenlerin her ikisine eşit veya daha büyük olmasını sağlayın. Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&mode=outside

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-mode="outside" />

Mod: Extract

extract: Verdiğiniz görseli ilgili ölçülerde keserken ne yöne odaklanacağınızı, hangi kısmını ne ölçüde keseceğinizi tercih edin. Bu parametre ancak diğer modlarla birlikte çalışabilir, extract kullanılacak bir imaj için mutlaka cover, contain vb bir mod ve en boy bilgisi verilmelidir.

Sol, Üst, En, Boy değerlerini almaktadır. Örneğin 10,0,200,100 değerlerini verdiğimizi var sayarsak işlem yaptığımız görsel üzerinde soldan 10 piksel uzaklaştıktan sonra görselin kalan kısımından yatak olarak 200 piksel ve dikey olarak 100 piksel mesafeyi kes demiş oluruz. Dolayısıyla Imageus çıktı olarak 200x100 piksel ölçülerinde bir görsel çıktı verecektir.

Aşağıda belirtilen modlarıUrl kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=500&extract=205,205,200,200&mode=cover

Aşağıda belirtilen modlarıUrl Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="500"
imageus-background-color="000000"
imageus-extract="205,205,200,200"
imageus-mode="cover" />

Aynalama Dikey

flip: Verdiğiniz görseli ilgili ölçülerde keserken dikey olarak aynalama yapmanıza olanak sağlar. 1 ve 0 olmak üzere iki değer alabilirler. Flip ve flop değerleri aynı anda birlikte kullanılabilir.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&flip=1&mode=cover

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-flip="1"
imageus-mode="cover" />

Aynalama Yatay

flop: Verdiğiniz görseli ilgili ölçülerde keserken yatay olarak aynalama yapmanıza olanak sağlar. 1 ve 0 olmak üzere iki değer alabilirler. Flip ve flop değerleri aynı anda birlikte kullanılabilir.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&flop=1&mode=cover

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-flop="1"
imageus-mode="cover" />

Döndürme

rotate: Verdiğiniz görseli ilgili ölçülerde keserken 2 boyutlu eksen üzerinde 360 derecelik açısal düzlemde döndürmenize olanak sağlar. 0 ile 360 arasında olmak üzere rakamsal bir değer alarak çalışır, 360 açısal olarak başladığı noktaya dönmüş olmasından dolayı default değeridir.

Aşağıdaki örnekte bulunan komutlarda, 250x250 piksel olarak kesilmiş bir resimi 125 derece döndürüp zeminine siyah renk eklenmesi istenmiş, bu sebepten dolayı çıktı olara kverilen görsel 250 piksel en veya boy dan daha büyük ölçüde olacaktır.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=250&height=250&rotate=145&mode=cover

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="250"
imageus-height="250"
imageus-background-color="000000"
imageus-rotate="145"
imageus-mode="cover" />

Filtre : Blur (Bulanıklık)

blur: Görsel üzerinde bulanıklık efekti uygulamak için kullanabilirsiniz. 0 ile 100 arasında rakamsal bir değer alarak çalışır.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&blur=5

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-blur="5" />

Filtre : Siyah-Beyaz

grayscale: Görselleri siyah-beyaz şekilde dönüştürmek için bu efekti kullanabilirsiniz. 0 (pasif) ve 1 (aktif) olmak üzere rakamsal bir değer alarak çalışır.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&grayscale=1

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-grayscale="1" />

Filtre: Negatif

negate: Görselleri negatif şekilde dönüştürmek için bu efekti kullanabilirsiniz. 0 (pasif) ve 1 (aktif) olmak üzere rakamsal bir değer alarak çalışır.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&negate=1

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-negate="1" />

Filtre : Parlatma

brightness: Görsellerin ışık dengesini değiştirmek için bu efekti kullanabilirsiniz. 1.0 ie 100.0 arasında olmak üzere ondalıklı rakamsal bir değer alarak çalışır.

Aşağıda belirtilen modları Url kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&brightness=1.8

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-brightness="1.8" />

Filtre : Gama

gamma: Görsellerin gama dengesini değiştirmek için bu efekti kullanabilirsiniz. 1.0 ile 3.0 arasında olmak üzere ondalıklı rakamsal bir değer alarak çalışır.

Aşağıda belirtilen modları Urlkod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&gamma=1.8

Aşağıda belirtilen modları Url Builderkod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-gamma="1.8" />

Filtre : Hue

hue: Görsellerin renk dengesini değiştirmek için bu efekti kullanabilirsiniz. Hue renk çarkında açısal derece ile görsel üzerindeki renk değerlerini dönüştürür 0 kırmızı ton, 120 yeşil ton ve 240 mavi tona karşılık gelir. 0 ile 360 arasında olmak üzere rakamsal bir değer alarak çalışır, 360 açısal olarak başladığı noktaya dönmüş olmasından dolayı default değeridir.

Aşağıda belirtilen modlarıUrl kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&hue=240

Aşağıda belirtilen modlarıUrl Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-hue="240" />

WebP Özelliğini Kapatmak

disablewebp: Imageus defaul olarak verilen işlerin çıktılarını WebP formatında vermektedir, güncel internet teknolojileri için en uygun teknik şu an için webp ile kullanımdır. 0 (pasif) ve 1 (aktif) olmak üzere rakamsal bir değer alarak çalışır. Fakat eski cihazlar için uyumluluk veya gif kullanım alanları için bu komutla özelliği kapatabilirsiniz. WebP iptal edildiğinde verilen imajın formatı ne ise o şekilde çıktı veriliyor olacaktır.

WebP Nedir?

WebP hem kayıplı hem de kayıpsız sıkıştırma kullanan bir görüntü formatıdır. Güncel olarak Google'ın elinde bulunan, On2 Technologies'in Google tarafından satın alınmasıyla edinilen teknolojiye dayanılarak geliştirilmiştir. VP8 video formatının bir türevi olarak, WebM multimedya taşıyıcı formatının kardeş projesidir.

https://img.imageus.dev/https://imageus.dev/theme/media/cat.jpg?width=500&height=250&mode=cover&disableWebP=1

Aşağıda belirtilen modları Url Builder kod satırındaki renkli kısımları değiştirerek tanımlayabilirsiniz;

<img imageus
imageus-src="https://imageus.dev/theme/media/cat.jpg"
imageus-width="500"
imageus-height="250"
imageus-background-color="000000"
imageus-mode="cover"
imageus-disablewebp="1" />

SEO (Search Engine Optimization)

Imageus sisteminin SEO konusunu nasıl ele aldığını anlayabilmek için okumaya devam edin.

Nasıl Çalışıyor?
Imageus kullandığınızda, resimlerinizin URL'sinin artık sizin yerine imageus.dev etki alanı aracılığıyla gösterildiğinin farkındayız. Google gibi arama botlarının, resimlerinizin imageus.dev alanında olmadığını bilmesine yardımcı olmak için, Google'ın resimlerinizin standart URL'sini takip edebilmesi için bir HTTP yanıt başlığı ekliyoruz.

Aşağıdaki resim url'si için bir örnek:

https://img.imageus.dev/https://benimsitem.com/theme/media/cat.jpg?width=500&height=500&mode=contain

HTTP Header bilgileri aşağıdakine benzer şekilde olacaktır:

HTTP/1.1 200 OK
Content-Type: image/jpeg
Vary: Origin
Cache-Control: public, max-age=26297438, s-maxage=26297438
Link: <http://benimsitem.com/theme/media/cat.jpg>; rel="canonical"
CF-Cache-Status: HIT
Server: Digital Ocean
CF-RAY: 47bd2eb82ca8a8db-CDG

Link kısmı aslında bu resim imageus.dev adresine ait olmadığını <http://benimsitem.com/theme/media/cat.jpg> adresine sahip olduğunu söyler.

CDN (Content Delivery Network)

Resminiz oluşturulduktan sonra, hızı en üst düzeye çıkarmak ve gecikmeyi azaltmak için iki katmanlı bir CDN kullanıyoruz.

Yeni çevrimiçi ürünler piyasaya sürerken yapılan en büyük hatalardan biri, insanların web'in tüm dünyada mevcut olduğunu fark etmemeleridir. Her yerde ürününüze erişen potansiyel müşterileriniz var, bu nedenle resimlerinizin (ve genel olarak varlıklarınızın) müşterilere yakın olması sayfa yükleme hızınızı hızlandırabilir ve hız, daha fazla satışla yakından bağlantılıdır.

Güvenlik

Imageus resimlerinizi işlemek için önceden hesaba tanımlanmış domain isimlerine ihtiyaç duyar. Resimleriniz için güvenli bir proxy görevi görür ve kaynaklarınızın kaynağını internete maruz bırakmadan resimlerinizi teslim etmenizi sağlar.

Destek

Aklınıza takılan herhangi bir soru olması durumunda 7/24 Canlı Desteğimize yazabilir veya support@imageus.dev adresine yazabilirsiniz. Mümkün olan en kısa süre içerisinde size dönmeye çalışacağız.