Fotografia va fi redimensionată în funcție de dimensiunea specificată în centimetri (milimetri, inci), precum și dimensiunea specificată în DPI, conform standardelor de imprimare pe hârtie. Dimensiunile în cm, mm și inci pot fi specificate cu o precizie de miimi, de exemplu, în loc de formatul 15x10, puteți seta 15,201x10,203 cm.

Tabel cu dimensiuni standard pentru fotografii într-o poziție verticală (portret):

Format fotografie în centimetri (cm)	Dimensiune în milimetri (mm)	Dimensiunea în pixeli (pentru tipărire 300 dpi)	Raportul de aspect (în orientare peisaj)
3x4 (dupa taiere manuala)	30x40	354x472	4:3 (1.33)
3,5x4,5 (dupa taiere manuala)	35x45	413x531	4:3 (1.33)
9x13	89x127	1063x1535	10:7 (1.43)
10x15	102x152	1181x1772	3:2 (1.5)
13x18	127x178	1535x2126	7:5 (1.4)
15x20(≈A5)	152x203	1772x2362	4:3 (1.33)
15x21	152x216	1772x2480	4:3 (1.33)
18x24	178x240	2126x2835	19:14 (1.36)
20x25	203x254	2362x2953	5:4 (1.25)
20x30(≈A4)	203x305	2362x3543	3:2 (1.5)
30x40	305x406	3543x4724	4:3 (1.33)
30x45	305x457	3543x5315	3:2 (1.5)

Dimensiunea standard a colilor de hârtie format A4- 21x29,7 cm sau 2480x3508 pixeli la 300 dpi. Dimensiunile altor formate de foi pot fi văzute pe pagina Wikipedia, dar nu uitați că dimensiunile sunt enumerate acolo în milimetri și inci, de exemplu. în setările de pe această pagină, trebuie să selectați valoarea corespunzătoare.

Dacă trebuie să redimensionați o fotografie fără a lua în considerare DPI (puncte pe inch), adică respectând doar proporțiile formatului specificat, atunci pentru aceasta trebuie să setați parametrul „Dimensiune în DPI” la „0” în setări.

Imaginea originală nu este modificată în niciun fel. Vi se va oferi o altă imagine procesată.

1) Specificați o imagine în format BMP, GIF, JPEG, PNG, TIFF:

2) introduce formatul dorit fotografia în centimetri, milimetri sau inci
Format necesar: X în milimetri (mm) centimetri (cm) inci (inci)
(Formatul implicit este 15x10 care se potriveste pentru peisaj fotografie (orizontală), pentru portret fotografie (verticală), aceste valori ar trebui schimbate, adică să specificați 10x15, așa cum este indicat în tabel) Dimensiune în DPI: (0 = „ignorați DPI, randați în funcție de raportul de aspect pe baza formatului specificat”)
(Dimensiunea imaginii jpg originale în DPI este posibilă prin citirea metadatelor) Tip de redimensionare exact la dimensiunile specificate:
Păstrarea proporțiilor și tăierea marginilor în exces
Întinderea sau îngustarea cauciucului, fără tăiere
Fără decupare, cu roșu roz violet albastru teal cer verde lime galben portocaliu negru gri alb fundal în jurul marginilor Fixați la: sus stânga centru jos dreapta imaginii

Imaginile sunt componente ale aproape oricărui site, așa că redimensionarea este indispensabilă. Există 2 moduri de a redimensiona o imagine: editor grafic sau programatic cod html pe css.

Dacă în cod css pe html nu setați dimensiunea imaginii, atunci înălțimea și lățimea acesteia pe site vor fi aceleași în pixeli ca în fișier sursă. Adică poți redimensiona o imagine fără css și html, folosind doar un editor grafic și se va schimba automat pe site dacă nu îi specifici dimensiunea. Dar există cazuri când este necesar să se schimbe programatic dimensiunea unei imagini în css în html.

1. Schimbarea imaginii în editorul grafic

Puteți modifica dimensiunea imaginii în orice editor grafic (photoshop, gimp, xnview) și se va schimba automat pe site în conformitate cu dimensiunea originală.

Avantajele metodei:

Imaginea se încarcă mai repede, deoarece nu trebuie să descărcați date suplimentare (pixeli), care vor fi apoi comprimate programatic.

Minusuri:

Editorii grafici comprimă slab imaginile de mai puțin de 200 de pixeli în lățime și înălțime.

Ori de câte ori este posibil și adecvat, încercați să o redimensionați în editorul grafic, astfel încât imaginile să se încarce mai repede decât cu modificarea programului. Diferența de viteză poate fi de zeci de ori.

2. Schimbarea imaginii în codul css de pe site

Pro:

Mai rapid și mai convenabil pentru a seta dimensiunea. Aceasta metoda reducerea imaginii este de obicei folosită pentru comoditate. De exemplu, atunci când o imagine poate avea mai multe dimensiuni diferite, este adesea mai convenabil să schimbați valorile aceleiași în mod programatic decât să încărcați toate formatele unei imagini editate într-un editor grafic.

Imagini mici comprimate calitativ, cu mai puțin de 200 de pixeli în înălțime sau lățime, spre deosebire de editorii grafici. Dacă doriți ca dimensiunea imaginii de pe site să fie mai mică de 200 px, este mai bine ca dimensiunea originală să fie cu 30-50% (260-300 px) mai mare pentru a salva calitate bună când scade.

În același timp, diferența de viteză de încărcare a site-ului nu se va simți, deoarece imaginile mici ocupă foarte puțin spațiu și dacă le măriți dimensiunea cu 30%, nu veți observa nicio modificare. Dar observați diferența de calitate.

Minusuri:

Încărcarea imaginilor comprimate prin program durează mai mult, deoarece redimensionarea are loc numai după descărcarea versiunii originale. Prin urmare, dacă dimensiunea imaginii este mai mare de 200 de pixeli în lățime sau înălțime, atunci este mai bine să o comprimați într-un editor grafic, astfel încât site-ul să funcționeze mai repede.

cum să redimensionați imaginea html folosind css

Pentru a redimensiona o imagine în html css sunt utilizate proprietăți lățime (lățime) și înălțime (înălțime)în interiorul atributului stil. Puteți scrie doar lățimea sau înălțimea, iar valoarea rămasă nespecificată se va schimba automat, menținând raportul de aspect al imaginii. De exemplu, specificând doar lățimea unei imagini folosind lățimea, înălțimea acesteia se va schimba automat, păstrând raportul de aspect. Și invers, atunci când specificați doar înălțimea (înălțimea), lățimea acesteia se va schimba automat, păstrând raportul de aspect al imaginii.

Exemplu de cod fără a specifica dimensiunile imaginii

Rezultat în browser

Codul paginii

Exemplu de cod cu redimensionarea imaginii în .css

Rezultat în browser

Codul paginii

style="width:150px; ">

Ambele exemple de mai sus folosesc aceeași imagine cu o dimensiune de 300x184px (lățime și înălțime). În 1 exemplu, imaginea a fost afișată în browser fără modificări cu dimensiunea originală 300x184px deoarece lățimea și înălțimea nu au fost specificate în css. Și în al 2-lea exemplu, imaginea a fost afișată în browser redusă de 2 ori, deoarece lățimea era de 150 px, înălțimea s-a schimbat în mod corespunzător la 92 px. După cum puteți vedea, este posibil ca proprietatea înălțime să nu fie specificată deloc, deoarece se schimbă automat proporțional cu lățimea.

Dacă oferiți ambele opțiuni: latime(latime), inaltime(inaltime) si nu vor corespunde proportiilor, atunci tabloul va avea exact aceeasi dimensiune, ci intr-o forma comprimata sau intinsa, in functie de valori.

De ce nu este de dorit să mărești pozele

Important: Creșterea dimensiunii imaginii este însoțită de o pierdere a calității. Când schimbați în orice fel, este important să setați valorile mai puțin decât în ​​imaginea originală, adică să reduceți doar.

Dacă setați dimensiunea pixelilor să fie mai mare decât imaginea originală, calitatea se va deteriora. Și pierderea calității va fi clar vizibilă, deoarece computerul nu poate adăuga noi pixeli, poate doar să mărească dimensiunea celor existenți. Cu cât mărirea imaginii este mai mare față de valoarea inițială, cu atât calitatea acesteia este mai slabă și pixelii pătrați mai clar vizibili.

Pentru a redimensiona o imagine folosind HTML pentru o etichetă sunt furnizate atributele lățimea (lățimea) și înălțimea (înălțimea). Pixelii sunt folosiți ca valoare, iar argumentele trebuie să se potrivească cu dimensiunile fizice ale imaginii. De exemplu, în fig. 10.6 arată o imagine care are dimensiuni de 100x111 pixeli.

Orez. 10.6. poza de dimensiune originala

În consecință, codul HTML pentru plasarea acestei figuri este prezentat în exemplul 10.4.

Exemplul 10.4. Dimensiunile desenului

Dacă dimensiunile imaginii sunt specificate în mod explicit, atunci browserul le folosește pentru a afișa zona goală corespunzătoare imaginii în timpul încărcării documentului (Fig. 10.7). În caz contrar, browserul așteaptă ca imaginea să se încarce complet înainte de a modifica lățimea și înălțimea imaginii (Figura 10.8). În acest caz, poate apărea reformatarea textului, deoarece inițial dimensiunea imaginii nu este cunoscută și este setată automat la mică.

Orez. 10.7. Dimensiunea imaginii nu este specificată și nu s-a încărcat încă

Orez. 10.8. Imaginea a fost încărcată, textul a fost reformatat

Lățimea și înălțimea imaginii pot fi modificate atât în ​​sus, cât și în jos. Cu toate acestea, acest lucru nu afectează în niciun fel viteza de descărcare a imaginii, deoarece dimensiunea fișierului rămâne neschimbată. Prin urmare, reduceți imaginea cu prudență, deoarece. acest lucru poate provoca confuzie în rândul cititorilor, de ce un desen atât de mic durează atât de mult să se încarce. Dar creșterea dimensiunii duce la efectul opus - dimensiunea imaginii este mare, dar fișierul este încărcat mai repede față de imaginea de aceeași dimensiune.

Pe fig. 10.9 prezintă aceeași imagine ca cea din fig. 10,6, dar dublat în lățime și înălțime.

Orez. 10.9. Vedere a imaginii mărită în browser

Codul pentru un astfel de desen va rămâne aproape neschimbat și este prezentat în Exemplul 10.5.

Exemplul 10.5. Redimensionarea unei imagini

O astfel de redimensionare se numește reeșantionare, iar algoritmul browserului este inferior ca capabilități editorilor grafici. Prin urmare, este necesară creșterea imaginii în acest fel numai în cazuri speciale, altfel calitatea imaginii se deteriorează prea mult. Este mai bine să folosiți un fel de program grafic. Excepție fac desenele care conțin zone dreptunghiulare. Pe fig. Figura 10.10 prezintă un fișier model care are 54 de octeți și are o dimensiune originală de 8 pe 8 pixeli, scalat până la 150 pixeli.

Orez. 10.10. Imagine mărită

Browserele folosesc doi algoritmi pentru reeșantionare - bicubic (oferă margini netede și o gamă tonală netedă de culori) și punctele cele mai apropiate (păstrează setul original de culori și margini ascuțite). Versiunile recente de browsere folosesc un algoritm bicubic, în timp ce browserele mai vechi, dimpotrivă, folosesc un algoritm de cel mai apropiat punct.

Înainte de a răspunde la întrebare cum se inserează o imagine în html?”, trebuie remarcat faptul că nu merită să supraîncărcați paginile web cu o cantitate imensă de material grafic, deoarece acest lucru nu numai că va îmbunătăți percepția vizuală a resursei de către utilizator, ci va crește și timpul de încărcare a paginii.

La crearea site-urilor web, cele mai frecvent utilizate formate grafice sunt PNG, GIF și JPEG, iar pentru lucrările de proiectare cu imagini, editorul grafic Adobe Photoshop, care are caracteristici bogate pentru comprimarea și redimensionarea imaginilor fără pierderi de calitate, ceea ce este incredibil de important pentru dezvoltarea web. .

Cum se inserează o imagine în HTML?

Pentru a insera o imagine într-o pagină HTML, se folosește o singură etichetă simplă:

,

unde xxx este adresa imaginii. În cazul în care imaginea se află în același director cu pagina, eticheta va arăta astfel:

Cu toate acestea, internetul de mare viteză și stabil nu a ajuns încă în toate colțurile globului și se întâmplă ca imaginea de pe site pur și simplu să nu se încarce. Pentru astfel de cazuri, există conceptul de text alternativ.

Este afișat în locul imaginii în momentul indisponibilității, încărcării sau în modul „fără imagini” al browserului. Este adăugat folosind atributul alt al etichetei. .

Un exemplu de adăugare de text alternativ la un fișier grafic:

Atribuirea dimensiunilor imaginilor în HTML

Pentru a modifica dimensiunile de afișare ale unui fișier imagine, utilizați etichetele înălțime și lățime, unde înălțimea este înălțimea și lățimea este lățimea, măsurată în pixeli.

Când utilizează aceste atribute, browserul alocă mai întâi spațiu pentru conținutul grafic, pregătește aspectul general al paginii, afișează textul și apoi încarcă imaginea în sine.

Poza este plasată într-un dreptunghi cu dimensiunile specificate, iar dacă parametrii sunt mai mici sau mai mari decât cei originali, imaginea este întinsă sau comprimată.

Dacă nu sunt folosite atributele înălțime și lățime, browserul încarcă imaginea imediat, întârziind afișarea textului și a altor elemente ale paginii.

Acești parametri pot fi specificați atât în ​​pixeli (dimensiunea imaginii este constantă și nu depinde de rezoluția ecranului utilizatorului), cât și în procente (dimensiunea imaginii depinde de rezoluția ecranului).

De exemplu:

Trebuie amintit că în momentul în care modificați dimensiunea originală a imaginii, este necesar să-i mențineți proporțiile.

Pentru a face acest lucru, este suficient să specificați valoarea unuia dintre parametri ( latime sau inaltime), iar valoarea celui de-al doilea browser se va calcula automat.

Locația imaginii în HTML

Ca și în cazul multor etichete HTML, aplicați atributul align, care aliniază imaginea:

- poza este situată deasupra textului;

- poza se află sub text;

- poza este situată în stânga textului;

- poza este situată în dreapta textului.

Legătură poză

Acest lucru se face după cum urmează:

După cum puteți vedea, o inserție grafică poate fi un link și, atunci când se face clic, redirecționează către orice adresă scrisă complet sau prescurtat.

Cum pot face o imagine un fundal în HTML?

O imagine nu poate fi doar inserată într-o pagină ca obiect vizibil, ci și făcută o imagine de fundal. Pentru a defini o imagine ca fundal, trebuie să adăugați atributul background="xxx” la etichetă, unde xxx este adresa imaginii, specificată în același mod ca în exemplele de mai sus.

De exemplu, să setăm următoarea imagine de textură ca imagine de fundal:

Salvați imaginea în folderul cu pagina pregătită în prealabil și scrieți următoarele rânduri:

Fundal cu text.

Imaginea de fundal de pe pagină este setată.

Nu știți cum să măriți dimensiunea imaginii? Aceasta este o sarcină foarte simplă, deoarece tot ce aveți nevoie este deja instalat pe computer. Citiți acest ghid și veți învăța cum să redimensionați o fotografie cu 5 instrumente simple.

Metoda 1: Cum să redimensionați o imagine în Microsoft Paint

1. Găsiți și lansați MS Paint. Este preinstalat pe toate versiunile sistemului de operare Windows. Start > Toate programele > Accesorii > Paint:

1. Trageți imaginea în fereastra Paint sau utilizați Meniu > Deschide (Ctrl+O).
2. În meniul principal al programului, găsiți elementul „Redimensionare”Și selectați-l:

1. Se va deschide panoul pentru redimensionarea imaginii și raportul de aspect. Puteți specifica valoarea în pixeli. Nu uitați să bifați caseta " păstrează proporțiile". În caz contrar, imaginea va fi deformată:

1. Pentru a mări dimensiunea imaginii, faceți clic pe butonul OK și salvați fotografia.

Sfat:

• Dacă nu vă puteți mări fotografia fără a o întinde, puteți utiliza instrumentul Decupare pentru a elimina marginile nedorite. Cum se face acest lucru este descris în paragraful 3;
• Pentru a deschide o fotografie mai repede, faceți clic dreapta pe ea și selectați „ Deschide cu Paint»;
• Cel mai bine este să salvați imaginea în același format ca originalul.

Metoda 2. Cum să redimensionați o imagine în Galeria foto MS

1. Dacă Microsoft Photo Gallery nu este instalată pe computer ( Start > Galerie foto), trebuie să îl descărcați și să îl instalați ca parte a Windows Essentials 2012 ;
2. Lansați MS Photo Gallery și găsiți fișierul dvs. grafic;
3. Faceți clic dreapta pe el și selectați „Redimensionare...”:

1. Alegeți o presetare: " Mic 640 pixeli”, „Medium 1024”, „Large 1280”, etc.

1. Faceți clic pe " Redimensionați și salvați". După ce măriți dimensiunea imaginii, imaginea va fi plasată în același folder, și originalul va rămâne în el.

Sfat:

• Dacă doriți să setați dimensiunea exactă a imaginii, în meniul derulant, selectați „ Personalizat» și setați dimensiunea pentru partea mai mare a fotografiei;
• Pentru a redimensiona mai multe fotografii în același timp, selectați-le în timp ce țineți apăsată tasta Ctrl.

Metoda 3. Cum se redimensionează o imagine în Photoscape

Puteți redimensiona o imagine în Photoshop. Sau folosiți Photoscape pentru asta.

1. Descărcați Photoscape și instalați-l. Rulați programul;
2. Accesați fila „Editor” și găsiți fotografia pe care doriți să o editați:

1. În partea de jos a imaginii este butonul „Redimensionare”, faceți clic pe el.
2. Setați o nouă dimensiune a fotografiei. Asigurați-vă că opțiunea " Menține raportul de aspect este activat și apăsați butonul OK:

1. Salvați imaginea editată.

Sfat:

• Dacă trebuie să redimensionați mai multe imagini, utilizați „ Editor de loturi". Adăugați un folder și redimensionați toate fotografiile din el;
• Dacă nu știți dimensiunea exactă, puteți seta „Procent” din dimensiunea originală.

Metoda 4. Cum se redimensionează o imagine în IrfanView

1. Instalați IrfanView - un instrument excelent pentru vizualizarea și creșterea dimensiunii unei imagini;
2. Adăugați o fotografie trăgând-o în fereastra programului sau făcând clic pe primul buton din bara de instrumente:

1. Accesați fila „Imagine”, selectați „ Redimensionare/proporționare» ( ctrl+r);
2. Setați noua dimensiune în pixeli, centimetri, inci sau un procent din imaginea originală:

1. Salvați imaginea.

Sfat:

• Puteți utiliza dimensiuni standard: 640 pe 480 pixeli, 800 pe 600 pixeli, 1024 pe 768 pixeli etc.;
• Pentru a menține fotografii de înaltă calitate, asigurați-vă că setarea DPI este setată la cel puțin 300.

Metoda 5. Cum să redimensionați o imagine online

1. Pentru a mări dimensiunea unei imagini online, accesați site-ul web PicResize.
2. Faceți clic pe butonul Naviga” pentru a selecta o fotografie. Faceți clic pe " Continua»:

1. Selectați un procent din imaginea originală, cum ar fi cu 50% mai mic. Instrumentul va afișa dimensiunea imaginii de ieșire. Alternativ, puteți introduce dimensiunea exactă selectând „ marime personalizata»: