HTML etiketi kullanarak bir resmi yeniden boyutlandırmak için genişlik (genişlik) ve yükseklik (yükseklik) nitelikleri sağlanır. Değer olarak pikseller kullanılır ve argümanlar resmin fiziksel boyutlarıyla eşleşmelidir. Örneğin, Şek. 10.6, 100x111 piksel boyutlarına sahip bir görüntüyü gösterir.

Şekil: 10.6. Orijinal boyutlu resim

Buna göre, bu şeklin yerleştirilmesi için HTML kodu örnek 10.4'te gösterilmektedir.

Örnek 10.4. Resim boyutları

Görüntünün boyutları açıkça belirtilmişse, tarayıcı bunları belgenin yüklenmesi sırasında görüntüye karşılık gelen boş alanı görüntülemek için kullanır (Şekil 10.7). Aksi takdirde, tarayıcı görüntünün tam olarak yüklenmesini bekler, ardından görüntünün genişliğini ve yüksekliğini değiştirir (Şekil 10.8). Bu durumda, başlangıçta resmin boyutu bilinmediği ve otomatik olarak küçük ayarlandığı için metin yeniden biçimlendirilebilir.

Şekil: 10.7. Resim boyutları belirtilmedi ve henüz yüklenmedi

Şekil: 10.8. Görüntü yüklendi, metin yeniden biçimlendirildi

Görüntünün genişliği ve yüksekliği hem yukarı hem de aşağı değiştirilebilir. Ancak, dosya boyutu değişmeden kaldığından, bu görüntünün yükleme hızını etkilemez. Bu nedenle, görüntüyü küçültürken dikkatli olun, çünkü bu, okuyucular arasında bu kadar küçük bir çizimin yüklenmesi neden bu kadar uzun sürdüğünü karıştırabilir. Ancak boyutun artırılması ters etkiye yol açar - görüntünün boyutu büyüktür, ancak dosya aynı boyuttaki görüntüye göre daha hızlı yüklenir.

İncirde. 10.9, şek. 10.6, ancak genişlik ve yükseklik olarak iki katına çıktı.

Şekil: 10.9. Tarayıcıda büyütülmüş resmin görünümü

Böyle bir şeklin kodu esas itibarıyla değişmeden kalacaktır ve Örnek 10.5'te gösterilmektedir.

Örnek 10.5. Bir resmi yeniden boyutlandır

Bu tür yeniden boyutlandırma, yeniden örnekleme olarak adlandırılır ve tarayıcı algoritması, yetenekleri açısından grafik editörlerine göre daha düşüktür. Bu nedenle, sadece özel durumlarda bu şekilde büyütmek gerekir, aksi takdirde resim kalitesi çok bozulur. Bir grafik programı kullanmak daha iyidir. İstisnalar, dikdörtgen alanlar içeren resimlerdir. İncirde. 10.10, 54 bayt olan ve orijinal boyutu 8'e 8 piksel olan, 150 piksele yükseltilmiş bir desen dosyasını gösterir.

Şekil: 10.10. Büyütülmüş görüntü

Tarayıcılar yeniden örnekleme için iki algoritma kullanır - bikübik (düzgün kenarlar ve yumuşak tonal renk aralığı sağlar) ve en yakın noktalar (orijinal renk kümesini ve kenarların keskinliğini korur). Tarayıcıların son sürümleri bikübik algoritmayı kullanırken, eski tarayıcılar tersine en yakın nokta algoritmasını kullanır.

Fotoğraf, kağıt baskı standartlarına göre DPI cinsinden belirtilen boyut dikkate alınarak santimetre (milimetre, inç) cinsinden belirtilen boyuta göre yeniden boyutlandırılacaktır. Cm, mm ve inç cinsinden boyutlar binde bir hassasiyetle belirtilebilir, örneğin 15x10 format yerine 15.201x10.203 cm olarak ayarlayabilirsiniz.

Dikey (portre) konum için standart fotoğraf boyutlarını içeren tablo:

Standart kağıt levha boyutu a4 boyutu - 300 dpi'de 21x29,7 cm veya 2480x3508 piksel. Diğer sayfa formatlarının boyutları Wikipedia sayfasında görülebilir, ancak boyutların burada milimetre ve inç cinsinden listelendiğini unutmayın. bu sayfadaki ayarlarda uygun değeri seçin.

DPI'yı (inç başına nokta sayısı) dikkate almadan, yani yalnızca belirtilen formatın en boy oranını dikkate alarak bir fotoğrafı yeniden boyutlandırmanız gerekiyorsa, bunun için ayarlarda "DPI'da Boyut" parametresini "0" olarak ayarlamanız gerekir.

Orijinal görüntü hiçbir şekilde değişmez. Size başka bir işlenmiş resim sunulacak.

Talimatlar

Önce, arama motorlarını kullanarak resmi bulmaya çalışın. Sorgunuzu girin ve ardından arama ayarları sekmesini seçin. Örneğin, Google'da "Arama Araçları" düğmesi varken Yandex'de kaydırıcılı bir simge vardır. Ardından "Boyut" öğesini seçmeniz ve kesin değerleri belirtmeniz gerekir. Veya örneğin çözünürlüğü iyi bir fotoğrafa ihtiyacınız varsa Büyük öğesini seçin.

İstenilen boyutta bir resim yoksa, çerçevelere kendiniz ayarlayabilirsiniz. Yollar var. Birincisi, önce istediğiniz boyutta bir belge oluşturmanız ve ardından resmi değiştirmenizdir. İkincisi ise tam tersi - resmi açıp boyutunu değiştirirsiniz. Esasen hiçbir fark yoktur: hepsi tercihlerinize ve hedeflerinize bağlıdır. Adobe Photoshop'ta örnekler ele alınacaktır, ancak başka grafik düzenleyicileri de kullanabilirsiniz.

İlk yol. "Dosya" - "Yeni ..." veya Ctrl + N tuş kombinasyonunu tıklayın. Önünüzde ayarların olduğu bir pencere açılacaktır. Genişlik, yükseklik ve gerekli renk çözünürlüğü parametrelerini burada belirtin. Ardından tarayıcıda beğendiğiniz resmi açın, sağ tıklayın ve "Resmi kopyala" seçeneğini seçin. Ardından programa dönün ve Ctrl + V kombinasyonuna basın.

Resim, grafik düzenleyici penceresinde görünecektir. Ardından "Düzenle" - "Serbest Dönüştür" veya Ctrl + T kombinasyonunu tıklayın. Resmi çalışma penceresinin boyutuna göre ayarlayabileceğiniz anahtar noktalar görünecektir. İstenen sonucu alır almaz (bu arada, çalışma alanının sınırlarının ötesine geçebilirsiniz), "Dosya" - "Farklı kaydet ..." veya Ctrl + S tuş kombinasyonunu tıklayın.

İkinci yol. Önce bilgisayarınıza gitmeli, ardından "Dosya" - "Aç ..." (veya Ctrl + O kombinasyonunu) tıklamanız ve istediğiniz görüntüyü seçmeniz gerekir. Ardından "Görüntü" - "Görüntü boyutu ..." seçeneğini seçin veya Alt + Ctrl + I kombinasyonuna basın. "En boy oranını koru" onay kutusunun işaretini kaldırın ve istediğiniz boyutu seçin. Ardından OK tuşuna basın.

Görüntüler neredeyse tüm web sitelerinin bir parçasıdır, bu nedenle yeniden boyutlandırma önemlidir. Resmin boyutunu 2 şekilde değiştirebilirsiniz: bir grafik düzenleyicide veya programlı olarak css'deki html kodunda.

Css kodundaki görselin boyutunu html olarak ayarlamazsanız, sitedeki yüksekliği ve genişliği orijinal dosya ile piksel olarak aynı olacaktır. Yani, bir görüntüyü css ve html olmadan, yalnızca bir grafik düzenleyici kullanarak yeniden boyutlandırabilirsiniz ve boyutunu belirtmezseniz sitede otomatik olarak yeniden boyutlandırılır. Ancak, css'deki görüntüyü programlı olarak html olarak yeniden boyutlandırmanız gereken durumlar vardır.

1. Grafik düzenleyicide resmi değiştirme

Görüntüyü herhangi bir grafik düzenleyicide (photoshop, gimp, xnview) yeniden boyutlandırabilirsiniz ve sitede orijinal boyutlarına göre otomatik olarak yeniden boyutlandırılacaktır.

Yöntemin avantajları:

Görüntü daha hızlı yüklenir çünkü gereksiz verileri (pikseller) indirmenize gerek kalmaz ve bunlar daha sonra programla sıkıştırılır.

Grafik editörleri, genişliği ve yüksekliği 200 pikselden az olan görüntüleri zayıf bir şekilde sıkıştırır.

Mümkün ve uygun olduğunda, görüntülerin programlı bir değişiklikten daha hızlı yüklenmesi için bir grafik düzenleyicide yeniden boyutlandırmayı deneyin. Hız farkı onlarca kez olabilir.

2. Sitede css kodundaki resmi değiştirme

Artıları:

Boyutu ayarlamak daha hızlı ve daha uygundur. Bu indirgeme yöntemi genellikle kolaylık sağlamak için kullanılır. Örneğin, bir resim birçok farklı boyuta sahip olabildiğinde, bir grafik düzenleyicide düzenlenen bir görüntünün tüm format seçeneklerini yüklemektense, aynı programla değerleri değiştirmek genellikle daha uygundur.

Yüksekliği veya genişliği 200 pikselden az olan küçük resimler, grafik düzenleyicilerden farklı olarak verimli bir şekilde sıkıştırılır. Web sitenizin boyutunun 200 pikselden küçük olmasını istiyorsanız, küçültüldüğünde iyi kaliteyi korumak için orijinal boyutunun% 30-50 (260-300 piksel) daha büyük olması daha iyidir.

Aynı zamanda, siteyi yükleme hızındaki fark hissedilmeyecek, çünkü küçük resimler çok az yer kaplıyor ve boyutlarında% 30 artışla herhangi bir değişiklik fark etmeyeceksiniz. Ancak kalite farkına dikkat edin.

Program aracılığıyla sıkıştırılan görüntülerin yüklenmesi daha uzun sürer çünkü yeniden boyutlandırma yalnızca orijinal sürüm indirildikten sonra gerçekleşir. Bu nedenle, resmin boyutu genişlik veya yükseklik olarak 200 pikselden fazlaysa, sitenin daha hızlı çalışmasını sağlamak için bir grafik düzenleyicide sıkıştırmak daha iyidir.

CSS kullanılarak html'de resim nasıl yeniden boyutlandırılır

Css özelliklerini kullanarak görüntüleri html'de yeniden boyutlandırmak için kullanılır genişlik ve yükseklik stil niteliğinin içinde. Yalnızca genişlik veya yükseklik yazabilirsiniz ve kalan belirtilmemiş değer, resmin en boy oranı korunurken otomatik olarak değişecektir. Örneğin, genişliği kullanarak bir görüntünün yalnızca genişliğini belirlediğinizde, en boy oranı korunarak yüksekliği otomatik olarak değişecektir. Ve bunun tersi de, yalnızca yüksekliği belirtirseniz, genişliği de otomatik olarak değişecek ve resmin en boy oranını koruyacaktır.

Görüntü boyutlarını belirtmeden örnek kod

Tarayıcıdaki sonuç

Sayfa kodu

.Css biçiminde yeniden boyutlandırılan örnek kod

Tarayıcıdaki sonuç

Sayfa kodu

style \u003d "width: 150px;"\u003e

Yukarıda gösterilen her iki örnekte de aynı görüntü 300x184px (genişlik ve yükseklik) boyutunda kullanılmıştır. 1 örnekte, css'de genişlik ve yükseklik belirtilmediğinden, resim tarayıcıda orijinal 300x184px boyutunda değişiklik yapılmadan görüntülendi. Ve 2. örnekte, resim tarayıcıda 2 kat küçültüldü, genişlik 150 piksel olduğundan, yükseklik buna göre otomatik olarak 92 piksele değiştirildi. Gördüğünüz gibi, genişlik ile orantılı olarak otomatik olarak değiştiği için yükseklik özelliğinin hiç belirtilmesine gerek yoktur.

Her iki parametreyi de sağlarsanız: genişlik (genişlik), yükseklik (yükseklik) ve oranlara karşılık gelmeyeceklerse, resim tam olarak bu boyuta sahip olacak, ancak değerlere bağlı olarak sıkıştırılmış veya uzatılmış biçimde olacaktır.

Resimleri büyütmek neden istenmiyor?

Önemli: Resmin boyutunun artırılmasına kalite kaybı eşlik eder Herhangi bir şekilde değiştirirken, değerleri orijinal görüntüdekinden daha düşük ayarlamak önemlidir, yani sadece azaltın.

Boyutu orijinal görüntüden daha büyük piksel olarak ayarlarsanız, kalite bozulur. Ve kalite kaybı açıkça görülecektir, çünkü bilgisayar yeni pikseller ekleyemez, yalnızca mevcut olanların boyutunu artırabilir. Resim, orijinal değerden ne kadar büyütülürse, kalitesi o kadar kötü ve daha net görülebilen kare pikseller.

Soruyu cevaplamadan önce " hTML'ye nasıl resim eklenir?», Web sayfalarını çok miktarda grafik materyali ile aşırı yüklemeye değmeyeceğine dikkat edilmelidir, çünkü bu, yalnızca kullanıcının kaynağın görsel algısını iyileştirmekle kalmaz, aynı zamanda sayfa yükleme süresini de artırır.

PNG, GIF ve JPEG grafik biçimleri çoğunlukla web siteleri oluşturmak ve görüntülerle tasarım çalışmaları için kullanılır - görüntülerin kalitesini kaybetmeden sıkıştırmak ve yeniden boyutlandırmak için zengin yeteneklere sahip olan Adobe Photoshop grafik düzenleyicisi, web geliştirme için inanılmaz derecede önemlidir.

HTML'ye nasıl resim eklerim?

Bir HTML sayfasına bir resim eklemek için tek bir basit etiket kullanılır:

,

burada xxx, resim adresidir. Resim, sayfayla aynı dizindeyse, etiket şu şekilde görünecektir:

Bununla birlikte, yüksek hızlı ve istikrarlı İnternet henüz dünyanın her köşesine ulaşmadı ve bu, web sitesindeki görüntü basitçe yüklenmiyor. Bu tür durumlar için alternatif bir metin kavramı vardır.

Kullanılamadığında, yüklendiğinde veya "resim yok" tarayıcı modunda göründüğünde resmin yerine gösterilir. Etiketinin alt özelliği kullanılarak eklenir .

Bir grafik dosyasına alternatif metin eklemeye bir örnek:

HTML'de görüntüleri boyutlandırma

Bir grafik dosyasının görüntü boyutlarını değiştirmek için, yükseklik ve genişlik etiketlerini kullanın; burada yükseklik, yükseklik ve genişlik, piksel cinsinden ölçülür.

Bu öznitelikleri kullanırken, tarayıcı önce grafik içeriği için alan ayırır, genel sayfa düzenini hazırlar, metni görüntüler ve ardından görüntünün kendisini yükler.

Resim, belirtilen boyutlarda bir dikdörtgene yerleştirilir ve parametreler orijinalinden daha az veya daha fazlaysa, resim uzatılır veya küçültülür.

Yükseklik ve genişlik nitelikleri kullanılmazsa, tarayıcı görüntüyü hemen yükleyerek metnin ve diğer sayfa öğelerinin görüntülenmesini geciktirir.

Bu parametreler hem piksel olarak (resmin boyutu sabittir ve kullanıcının ekran çözünürlüğüne bağlı değildir) hem de yüzde olarak (resmin boyutu ekran çözünürlüğüne bağlıdır) belirtilebilir.

Örneğin:

Resmi yeniden boyutlandırdığınız anda en-boy oranını korumanız gerektiğini unutmayın.

Bunu yapmak için, parametrelerden yalnızca birinin değerini belirtmek yeterlidir ( genişlik veya yükseklik) ve tarayıcı saniyenin değerini otomatik olarak hesaplayacaktır.

HTML'de resim konumu

Birçok HTML etiketinde olduğu gibi, görseli hizalayan align niteliğini uygulayalım:

- resim metnin üzerinde bulunur;

- resim metnin altında yer alır;

- resim, metnin solunda yer alır;

- resim metnin sağında yer alır.

Bağlantı resmi

Bu şu şekilde yapılır:

Gördüğünüz gibi, bir grafik eki bir bağlantı olabilir ve tıklandığında, tam veya kısaltılmış biçimde kaydedilmiş herhangi bir adrese yönlendirilebilir.

HTML'de bir resmi nasıl arka plan yapabilirim?

Görsel sadece görünür bir nesne olarak sayfaya eklenemez, aynı zamanda arka plan da yapılabilir. Bir resmi arka plan olarak tanımlamak için etikete background \u003d "xxx" niteliğini yazmak gerekir; burada xxx, yukarıdaki örneklerde olduğu gibi belirtilen resim adresidir.

Örneğin, aşağıdaki doku görüntüsünü arka plan görüntüsü olarak ayarlayalım:

Resmi hazırlanmış bir sayfa içeren bir klasöre kaydedin ve aşağıdaki satırları yazın:

Metin ile arka plan.

Sayfadaki arka plan resmi ayarlanmıştır.