შესვლა

HTML › დამწყები › სურათები

სურათის ფორმატები

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#JPEG#PNG#SVG#WebP

რას ისწავლი

  • ხუთი ყველაზე გავრცელებული სურათის ფორმატი და მათი თვისებები
  • რომელი ფორმატი აირჩიო ფოტოსთვის, ლოგოსთვის და ანიმაციისთვის
  • რატომ ახდენს ფაილის ზომა გავლენას გვერდის სიჩქარეზე

რატომ არსებობს ბევრი ფორმატი

სურათი კომპიუტერში სხვადასხვანაირად შეიძლება შეინახოს. ზოგი ფორმატი წერტილებად ინახავს, ზოგი ფორმულებად. ზოგი ზომას ამცირებს ხარისხის ნაწილის დათმობით, ზოგი ყველა დეტალს ინახავს. სწორი ფორმატი ნიშნავს ლამაზ სურათს და სწრაფ გვერდს, არასწორი კი დაბინდულ ლოგოს ან ათჯერ მძიმე ფაილს.

წერტილოვანი და ვექტორული

ჯერ ორი დიდი ოჯახი:

  • წერტილოვანი (raster) სურათი პატარა ფერადი კვადრატებისგან, პიქსელებისგან (pixels) შედგება, როგორც მოზაიკა. 192×192 სურათს 36 864 პიქსელი აქვს. თუ მას ძალიან გაადიდებ, კვადრატები გამოჩნდება და სურათი „დაიკბიჩება“. ფოტოები ყოველთვის წერტილოვანია.
  • ვექტორული (vector) სურათი ფორმულებად ინახება: „აქ წრეა ამ რადიუსით, აქ ხაზი ამ წერტილიდან იმ წერტილამდე“. ის ნებისმიერ ზომაზე იდეალურად მკვეთრია, ტელეფონზეც და ბილბორდზეც. ლოგოები, ხატულები და მარტივი ილუსტრაციები ხშირად ვექტორულია.

ფორმატები

ფორმატისახეკარგიაშენიშვნა
JPEG (.jpg)წერტილოვანიფოტოებისთვისზომას ამცირებს ხარისხის ნაწილის დათმობით; გამჭვირვალობა არ აქვს
PNG (.png)წერტილოვანილოგოებისთვის, სკრინშოტებისთვის, ტექსტიანი სურათებისთვისყველა დეტალს ინახავს; აქვს გამჭვირვალე ფონი; ფოტოებისთვის მძიმეა
GIF (.gif)წერტილოვანიმარტივი ანიმაციებისთვისმხოლოდ 256 ფერი; დღეს ხშირად ვიდეოთი იცვლება
SVG (.svg)ვექტორულილოგოებისთვის და ხატულებისთვისნებისმიერ ზომაზე მკვეთრია, ფაილი პატარაა
WebP (.webp)წერტილოვანითითქმის ყველაფრისთვისთანამედროვე ფორმატი: JPEG-ზე და PNG-ზე პატარაა მსგავსი ხარისხით

როგორ აირჩიო

  • ფოტო: JPEG ან WebP.
  • ლოგო, ხატულა, მარტივი ნახატი: SVG, თუ ასეთი ფაილი გაქვს; თუ არა, PNG.
  • სკრინშოტი, დიაგრამა ტექსტით: PNG: JPEG-ში ტექსტის კიდეები ბინდდება.
  • გამჭვირვალე ფონი: PNG, SVG ან WebP. JPEG ფონს ყოველთვის თეთრით ან სხვა ფერით ავსებს.
  • მოძრავი სურათი: მოკლე ანიმაციისთვის GIF ან WebP, გრძელისთვის ვიდეო.

ზომა და სიჩქარე

ტელეფონით გადაღებული ფოტო ხშირად 3–5 მეგაბაიტია და 4000 პიქსელზე ფართოა. თუ ასეთ ფოტოს გვერდზე პირდაპირ ჩასვამ, მომხმარებელი რამდენიმე წამს დაელოდება, მობილური ინტერნეტით კი მის ტრაფიკსაც დახარჯავ, თუმცა ეკრანზე სურათი სულ რაღაც 600 პიქსელის სიგანისაა. გამოქვეყნებამდე:

  1. შეამცირე ზომა იმ სიგანემდე, რომლითაც სურათი გვერდზე გამოჩნდება, დაახლოებით ორჯერ მეტი მკვეთრი ეკრანებისთვის.
  2. შეკუმშე: უფასო ონლაინ ხელსაწყოები და ფოტორედაქტორები ფაილს ხშირად ხარისხის შესამჩნევი დანაკარგის გარეშე ამცირებს.

კარგი ორიენტირი: ფოტო გვერდზე 200 კილობაიტზე ნაკლები, ხატულა რამდენიმე კილობაიტი.

სცადე თავად

აქ ორი წერტილოვანი PNG სურათია: 192 და 512 პიქსელის. ორივე ერთნაირ ზომაზე, 160 პიქსელზე ჩანს. შეადარე მათი სიმკვეთრე, მერე პატარა სურათი 400 პიქსელამდე გაადიდე და ნახე, როგორ დაბინდდა.

HTML · სცადე თავად

ხშირი შეცდომები

  • ლოგო JPEG-ში. კიდეები ბინდდება და გამჭვირვალე ფონი თეთრი ხდება. გამოიყენე SVG ან PNG.
  • ფოტო PNG-ში. ფაილი რამდენჯერმე მძიმე იქნება იგივე ხარისხით. ფოტოსთვის JPEG ან WebP.
  • ტელეფონის ფოტოს პირდაპირ ატვირთვა. ჯერ შეამცირე ზომა და შეკუმშე.

სავარჯიშო

საიტზე სამი სურათი უნდა ჩასვა. თითოეულისთვის აბზაცში დაწერე, რომელ ფორმატს აირჩევდი და რატომ: (1) ექსკურსიის ფოტო; (2) სკოლის ლოგო, რომელიც ფერად ფონზე უნდა იდოს; (3) კომპიუტერის ეკრანის სურათი კოდით.

HTML · სცადე თავად
💡 მინიშნება

ფოტოსთვის JPEG ან WebP. ფერად ფონზე მდებარე ლოგოს გამჭვირვალობა სჭირდება. ეკრანის სურათში ტექსტი მკვეთრი უნდა დარჩეს.

✅ ამოხსნის ნახვა
HTML
<h2>ჩემი არჩევანი</h2>
<p>ექსკურსიის ფოტო: JPEG ან WebP, რადგან ფოტოებს ისინი ყველაზე კარგად კუმშავს.</p>
<p>სკოლის ლოგო: SVG, ან თუ ის არ მაქვს, PNG, რადგან ორივეს აქვს გამჭვირვალე ფონი და მკვეთრი კიდეები.</p>
<p>ეკრანის სურათი კოდით: PNG, რადგან ტექსტის კიდეები არ დაბინდდება.</p>

მინი-ქვიზი

1რომელი ფორმატია ყველაზე შესაფერისი ფოტოსთვის?

2რომელი ფორმატი რჩება მკვეთრი ნებისმიერ ზომაზე?

3ლოგო ფერად ფონზე უნდა იდოს. რომელი ფორმატი არ გამოდგება?

შეჯამება

  • წერტილოვანი სურათი პიქსელებისგან შედგება, ვექტორული ფორმულებისგან და ნებისმიერ ზომაზე მკვეთრია.
  • ფოტო: JPEG ან WebP. ლოგო და ხატულა: SVG ან PNG. ტექსტიანი სურათი: PNG.
  • გამჭვირვალე ფონი აქვს PNG-ს, SVG-ს და WebP-ს, JPEG-ს არა.
  • გამოქვეყნებამდე სურათი შეამცირე და შეკუმშე.
📝 ჩემი შენიშვნა