როგორ მოვახდინოთ სურათების ოპტიმიზაცია ინტერნეტისთვის

 როგორ მოვახდინოთ სურათების ოპტიმიზაცია ინტერნეტისთვის

Patrick Harvey

არ გიყვარს სურათები?

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

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

მაგრამ, თუ ფრთხილად არ იქნებით, სურათებმა შეიძლება შეადგინოს თქვენი ვებ გვერდის მთლიანი ზომის ნახევარზე მეტი (ან მეტი). სულ რამდენიმე წლის წინ, ვებგვერდის საშუალო ზომა იყო 600–700K. ახლა, საშუალოდ არის 2 მბ და ის ყოველწლიურად იზრდება.

ეს ძალიან დიდია!

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

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

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

რატომ გჭირდებათ სურათების ოპტიმიზაცია

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

კვლევები აჩვენებს, რომ 40%-მდე ვიზიტორები დააწკაპუნებენ უკანა ღილაკს, თუ საიტის ჩატვირთვას სამ წამზე მეტი დრო სჭირდება.

Იხილეთ ასევე: ინსტაგრამის ჰეშტაგები: სრული გზამკვლევი

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

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

არასაჭირო დიდი სურათები ასევე იკავებს ადგილს თქვენს ჰოსტინგის ანგარიშზე. მიუხედავად იმისა, რომ ზოგიერთ თქვენგანს შეიძლება ჰქონდეს ჰოსტინგი „შეუზღუდავი“ შენახვის სივრცით, ბევრი პრემიუმ ჰოსტინგის პროვაიდერი გიზღუდავთ დაახლოებით 10 გბ მეხსიერებით ქვედა დონის გეგმებზე. ეს შეიძლება სწრაფად შეივსოს, განსაკუთრებით იმ შემთხვევაში, თუ თქვენ მასპინძლობთ რამდენიმე საიტს, რომელიც ასახავს სურათებს ერთსა და იმავე ანგარიშზე.

მაშ, როგორ შეგიძლიათ გაიგოთ, რომ თქვენი სურათები ანელებს თქვენს საიტს? შეამოწმეთ თქვენი საიტის სიჩქარე Google PageSpeed ​​Insights-ით.

თუ Google აცნობებს არაოპტიმიზებულ სურათებს პრობლემად, აი, რა უნდა იცოდეთ მის გამოსასწორებლად.

სურათების ოპტიმიზაციის საფუძვლები

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

მოდით, უფრო დეტალურად განვიხილოთ თითოეული ეს სფერო.

ფაილის ტიპი

<. 0>ვებზე გამოსახულებები ჩვეულებრივ ინახება PNG ან JPEG ფაილის ფორმატში – ან GIF ანიმაციისთვის. ვის არ უყვარს ის მხიარული ანიმაციური GIF-ები, რომლებიც მცურავია ინტერნეტში!

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

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

მაშ, რატომ არის განსხვავებული ფორმატები ?

კარგი, PNG ტრადიციულად გამოიყენება ლოგოებისა და გრაფიკის შესანახად, რადგან ის ინარჩუნებს გამოსახულების ორიგინალურ ხარისხს – არავის სურს ბუნდოვანი ტექსტი და პიქსელირებული ფორმები. მაგრამ, თუ ფოტოს PNG ფორმატში შენახვას ცდილობთ, ის საოცრად გამოიყურება, მაგრამ შედეგად ფაილის ზომა იქნება არასასიამოვნო.

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

შეკუმშვის შესახებ უფრო დეტალურად განვიხილავთ მოგვიანებით, მაგრამ ახლა თუ გახსოვთ მხოლოდ ორი რამ, გახსოვდეთ: JPEG ფოტოებისთვის და PNG ტექსტისთვის/გრაფიკისთვის.

სურათის ზომები

ოდესმე ჩატვირთეთ ვებ გვერდი და შეგიმჩნევიათ, რომ პატარა სურათი (შესაძლოა, თავსატეხი, მაგალითად) ჩამოტვირთავს f-o-r-e-v-e-r? ასე ნელა ხედავთ თითოეულ ხაზს, რომელიც შემოდის? თქვენ თვითონ ფიქრობთ, როგორ შეიძლება ამდენი ხანი დასჭირდეს ამხელა სურათის ჩამოტვირთვას?

და როცა ეს დიდ სათაურ სურათს ემართება, ეს კიდევ უფრო უარესია, რადგან მას შეუძლია შეაჩეროს მთელი გვერდის დატვირთვა.

ამის მიზეზი არის ის, რომ ბლოგერს სათანადოდ არ შეუცვლია ზომა და ოპტიმიზაცია არ გაუკეთებია თავის სურათს და ჩვენი headshot მაგალითის შემთხვევაში, შესაძლოა ატვირთა სრული გარჩევადობის JPEG პირდაპირ მისი DSLR კამერიდან.

და ეს უზარმაზარი ფაილია!

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

ახლა ზოგიერთი ვებ გამოქვეყნების პლატფორმა ავტომატურად შექმნის თქვენი სრული გარჩევადობის გამოსახულების მრავალ ვარიაციას სხვადასხვაში. ზომები, მაგრამ თუ არა, წინასწარ უნდა შეცვალოთ თქვენი სურათების ზომა გამოსახულების რედაქტორში, როგორიცაა Photoshop, Lightroom, Pixlr – ან თუნდაც MS Paint. ეს შეიძლება ნიშნავს განსხვავებას50K ფაილსა და 5MB ფაილს შორის.

WordPress, მაგალითად, ავტომატურად შექმნის თქვენი ატვირთული სურათის სამ (ან მეტს, თქვენი თემიდან გამომდინარე) – ყველა სხვადასხვა განზომილებით, რომელიც შეგიძლიათ გამოიყენოთ. ბლოგის პოსტებში, ვიდრე ყოველთვის გამოიყენოთ სრული ზომის სურათი.

თუ თქვენ გაქვთ ჩვევა ატვირთოთ უზარმაზარი ფოტოების სურათები და გსურთ დაზოგოთ სივრცე თქვენს ჰოსტინგის ანგარიშზე, WordPress დანამატი Imsanity-ს თქვენი ზურგი აქვს.

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

გააქტიურების შემდეგ, Imsanity-ს შეუძლია მოძებნოს თქვენი არსებული სურათები და შესაბამისად შეცვალოს ზომები.

თქვენი სურათების სერვისი

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

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

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

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

Blogging Wizard იყენებს Sucuri-ს (ის შეიცავს Firewall-ს უსაფრთხოებისთვის და ასევე CDN-ს), მაგრამ არის სხვა ხარისხის პროვაიდერები. როგორიცაა Amazon-ის Cloudfront ან KeyCDN. თუნდაც პოპულარული CloudFlare, რომელიც არ არის მკაცრად CDN, გთავაზობთ CDN-ს უფასოდ და ადვილად დასაყენებელია უმეტეს საერთო ჰოსტინგის პაკეტებში.

სურათის შეკუმშვა

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

სურათების რედაქტირების ხელსაწყოების უმეტესობა, როგორიცაა Visme ან Photoshop, შეინახავს ფაილებს დაკარგვის JPEG შეკუმშვის გამოყენებით, რადგან მას აქვს ფაილის ზომის საუკეთესო შემცირება. ასე რომ, მიუხედავად იმისა, რომ სურათის ხარისხი ოდნავ შემცირებულია, გამოსახულების დაკარგვით შეკუმშვის გამოყენებით, უზარმაზარი სურათები მცირდება ვებ ზომით.

დარწმუნებული ვარ, ბევრმა, ვინც იყენებს Photoshop-ს, შეიძლება ნახოს მისი ფუნქცია Save for Web . როგორც გამოსახულების ოპტიმიზაციის ყველა და ბოლოს. და კიდევ ონლაინ სურათების რედაქტირების ხელსაწყოები, როგორიცაა PicMonkey ან Visme, ასევე ოპტიმიზაციას უკეთებს თქვენს სურათებს.

მაგრამ იცოდით, რომ არსებობს ინსტრუმენტები, რომლებსაც შეუძლიათ თქვენი „ოპტიმიზებული“ სურათის აღება Photoshop-დან ან სხვა რედაქტირების ხელსაწყოებიდან, შეკუმშვა და შეკუმშვა. კიდევ 40%-ით (ან მეტით),და ჯერ კიდევ ის თითქმის იდენტურია ადამიანის თვალისთვის?

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

Desktop ინსტრუმენტები

ImageAlpha / ImageOptim

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

პრო რჩევა : ტექნიკური მცოდნეებისთვის არის ImageOptim– CLI, სადაც შეგიძლიათ სურათების მთელი საქაღალდის ოპტიმიზაცია ერთდროულად.

ImageAlpha არის დანაკარგი PNG კომპრესორი და შეუძლია სასწაულების მოხდენა PNG ფაილების შემცირებაში, ხოლო ImageOptim ახორციელებს გაფართოებულ უზარმაზარ შეკუმშვას (დაკარგვის ოფციით) - და ის აშორებს არასაჭირო მეტამონაცემებს PNG, JPEG და GIF ფაილებიდან.

ჩემი PNG სურათებისთვის მე პირველად გავუშვი ImageAlpha-ის მეშვეობით:

აქ, მან შეამცირა ჩემი ეკრანის სურათი 103K-დან 28K-მდე.

Იხილეთ ასევე: 11 საუკეთესო შვილობილი პლატფორმები და ქსელები შედარებით (2023)

შემდეგ გავუშვი ImageOptim-ის მეშვეობით და დავზოგე დამატებითი 10%.

JPEGmini

ჩემი JPEG ფაილებისთვის მე მათ ოპტიმიზაციას ვახორციელებ დესკტოპის JPEGmini აპით, ხელმისაწვდომია. როგორც Mac-ისთვის, ასევე Windows-ისთვის.

Lite ვერსია საშუალებას გაძლევთ დღეში 20-მდე სურათის ოპტიმიზაციას უფასოდ და 19,99$ ღირს ლიმიტის მოსახსნელად.

Pro რჩევა : მოწინავე მომხმარებლებს, რომლებსაც სურთ JPEGmini Photoshop-ში ან Lightroom-ში მოდულის საშუალებით ინტეგრირება, შეუძლიათ შეიძინონ Pro ვერსია$99,99.

ონლაინ / ღრუბლოვანი / SaaS ინსტრუმენტები

TinyPNG

თუ თქვენ ეძებთ მაღალი ხარისხის ონლაინ გამოსახულების შეკუმშვის ხელსაწყოს, TinyPNG (ის ოპტიმიზებს JPEG-ს ფაილებიც სახელის მიუხედავად) არის ვებ აპი, რომელიც საშუალებას გაძლევთ გადაიტანოთ 20 5 მბ ან უფრო მცირე ზომის სურათები თქვენს ბრაუზერში და ერთდროულად მოახდინოთ მათი ოპტიმიზაცია.

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

TinyPNG გაძლევს 500 უფასო გამოსახულების ოპტიმიზაციას თვეში და ამის შემდეგ იხდის 0,002-0,009$ თითო სურათზე, მოცულობის მიხედვით.

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

EWWW Image Optimizer

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

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

შენიშვნა: სრული მიმოხილვისთვის, იხილეთჩვენი პოსტი სურათის შეკუმშვის ინსტრუმენტებზე.

მისი შეფუთვა

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

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

ყურადღება მიაქციეთ თქვენი სურათის ზომებს და შეცვალეთ ნებისმიერი ზედმეტად დიდი ზომის ფოტო ან სურათი ციფრული კამერიდან შესაბამისზე ქვემოთ. ზომა.

შემდეგ, ისარგებლეთ გამოსახულების თანამედროვე შეკუმშვით დესკტოპის აპებით, როგორიცაა JPEGmini, ან ღრუბლოვანი ხელსაწყოებით, როგორიცაა TinyPNG ან Kraken – შეცვალეთ ისინი WordPress-ში დანამატით, თუ ეს შესაძლებელია.

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

მსგავსი კითხვა: 7 გზა შემცირების მიზნით PDF ფაილების ზომა.

Patrick Harvey

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