Როდესაც გამოიყენეთ JPG, GIF, PNG და SVG ფორმატები თქვენი ვებ გვერდებისათვის

არსებობს მთელი რიგი ფაილები, რომლებიც შეიძლება გამოყენებულ იქნას ვებ გვერდებზე. ზოგიერთი საერთო მაგალითებია GIF , JPG და PNG . SVG ფაილი ასევე გამოიყენება საიტებზე დღეს, რაც ვებ დიზაინერებს კიდევ ერთი ვარიანტი ონლაინ გამოსახულება.

GIF სურათები

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

GIF ფორმატში არ არის შესაფერისი ფოტოგრაფიული სურათების ან სურათების გრადიენტი ფერები. იმის გამო, რომ GIF ფორმატში აქვს შეზღუდული რაოდენობის ფერები, gradients და ფოტოების დასრულდება up ერთად banding და pixelation როდესაც შენახული GIF ფაილი.

მოკლედ, თქვენ გამოიყენებთ GIF- ებს მხოლოდ უბრალო სურათებისთვის მხოლოდ რამდენიმე ფერის გამოყენებით, მაგრამ ასევე შეგიძლიათ გამოიყენოთ PNG- ებიც (რაც უფრო მალე).

JPG სურათები

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

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

JPG გამოსახულებები საუკეთესოა ფოტოსურათებისა და სურათებისთვის, რომლებსაც აქვთ უამრავი და უამრავი ბუნებრივი ფერი.

PNG სურათები

PNG ფორმატში შემუშავდა GIF ფორმატის ჩანაცვლება, როდესაც აღმოჩნდა, რომ GIF გამოსახულება ექვემდებარება ჰონორარის საფასურს. PNG გრაფიკული აქვს უკეთესი შეკუმშვის მაჩვენებელი, ვიდრე GIF გამოსახულება, რომელიც იწვევს პატარა გამოსახულებებს, ვიდრე იმავე ფაილის შენახულია, როგორც GIF. PNG ფაილი გთავაზობთ ალფა გამჭვირვალობის, რაც იმას ნიშნავს, რომ თქვენ შეიძლება ჰქონდეთ თქვენი სურათების სფეროები, რომლებიც ან მთლიანად გამჭვირვალე ან ალფა გამჭვირვალობის სპექტრიც იყენებენ. მაგალითად, წვეთი ჩრდილი იყენებს გამჭვირვალობის ეფექტურობის ეფექტებს და შეიძლება იყოს PNG- ისთვის შესაფერისი (ან უბრალოდ შეგვიძლია გამოვიყენოთ CSS- ის ჩრდილების გამოყენება).

PNG სურათები, როგორიცაა GIFs, არ არის კარგად შეეფერება ფოტოსურათი. შესაძლებელია ირგვლივ გაბრტყელებული საკითხების ირგვლივ, რაც გავლენას ახდენს ფოტოების გადაწერაზე, როგორც GIF ფაილები ჭეშმარიტი ფერის გამოყენებით, მაგრამ ეს შეიძლება გამოიწვიოს ძალიან დიდი სურათებით. PNG სურათების ასევე არ არის კარგად მხარდაჭერილი ხანდაზმული მობილური ტელეფონები და ფუნქცია ტელეფონები.

ჩვენ ვიყენებთ PNG ნებისმიერი ფაილისთვის, რომელიც მოითხოვს გამჭვირვალობას. ჩვენ ასევე ვიყენებთ PNG-8 ნებისმიერი ფაილისთვის, რომელიც GIF- ისთვის შესაფერისი იქნება, ამ PNG ფორმატის ნაცვლად.

SVG სურათები

SVG დგას Scalable ვექტორული გრაფიკით. JPG, GIF და PNG- ის რასტრული დაფუძნებული ფორმატებისგან განსხვავებით, ეს ფაილი ვექტორების გამოყენებას ძალიან მცირე ზომის ფაილების შესაქმნელად, რომელთა საშუალებითაც შესაძლებელია ნებისმიერი ზომა გაეცნოთ ფაილის ზომის ზრდის ხარისხის დაკარგვას. ისინი შექმნილია ილუსტრაციებისთვის, როგორიცაა ხატები და ლოგოებიც.

მომზადება სურათები ვებ მიწოდება

მიუხედავად იმისა, თუ რომელი სურათის ფორმატი გამოიყენოთ, და თქვენი საიტი დარწმუნებულია, რომ გამოიყენოთ მთელი რიგი სხვადასხვა ფორმატები მთელს გვერდებზე, უნდა უზრუნველყოთ, რომ ვებ-გვერდის ყველა სურათი მზად იყოს . ძალიან დიდი სურათები შეიძლება გამოიწვიოს საიტი აწარმოებს ნელა და აისახება საერთო შესრულება. ამ ბრძოლის შესაჩერებლად, ეს სურათები უნდა იყოს ოპტიმიზირებული იმისათვის, რომ იპოვოთ ბალანსი მაღალხარისხოვან და ყველაზე დაბალ ფაილურ ზომს შორის ხარისხის დონეზე.

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

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard.