როგორ მოვიყვანოთ მასშტაბური სურათები WordPress- ში (პუნქტი GTmetrix- ში)

საჭიროა ემსახურებოდეს მასშტაბურ სურათებს WordPress- ში?


ეს ნიშნავს იმას, რომ დიდი ზომის სურათების ზომის შეცვლა გჭირდებათ.

GTmetrix გითხრათ, რომელი სურათების დასაზომად საჭიროა და მათი ზუსტი ზომები, რისთვისაც ისინი უნდა მოჭრათ ან შეცვალონ. შემდეგი, სურათის ზომის შეცვლა (მასშტაბის) და შეცვალეთ ძველი სურათების ახლები.

ემსახურეთ მასშტაბურ სურათებს

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

შემიძლია მოდული გამოვიყენო სურათების ავტომატურად დასაზომად?
Სავარაუდოდ არა. სურათის ოპტიმიზაციის მოდულების უმეტეს ნაწილში შეგიძლიათ დააყენოთ მაქსიმალური სიგანე + სიმაღლე. მაგრამ თქვენი საიტის სხვადასხვა სფერო სპეციფიკურ ზომებს ითხოვს (სურათების შესაბამისად უნდა მასშტაბური იყოს).

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

Contents

1. იპოვნეთ გადაჭარბებული სურათები GTmetrix– ში

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

ემსახურეთ მასშტაბური სურათები GTmetrix

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

სურათის მისამართის კოპირება

შემდეგი, ჩასვით გამოსახულების URL ახალ ბრაუზერში ჩანართში. თუ თქვენს ვებ – გვერდზე ნაჩვენები სურათი შეადარებთ თქვენს გამოსახულების URL- ს, ნახავთ, რომ შესამჩნევია განსხვავებული ზომა. ეს ნიშნავს, რომ გამოსახულების მასშტაბირებაა საჭირო. თქვენი სურათის ორი ვარიაციის ერთმანეთთან შედარების საშუალებით, თქვენ ხედავთ, რამდენად დიდია რეალურად გამოსახულება (და რატომ არის მისი გვერდი, რომელიც ძალიან იტვირთება)..

მასშტაბური vs Unccaled სურათი

2. ზომის შეცვლა ზომების გასწორების მიზნით

ჩამოტვირთეთ ძველი სურათი და გახსენით იგი თქვენი სურათის რედაქტირების ინსტრუმენტში (მე ვიყენებ GIMP). სურათის ზომის შეცვლა და / ან გადატანა GTmetrix- ის მიერ რეკომენდებული ზომებით. სურათების რედაქტირების მრავალი საშუალება საშუალებას გაძლევთ შეკუმშოთ სურათები და ამოიღოთ EXIF მონაცემები რაც კიდევ უფრო სწრაფად დააჩქარებს გამოსახულების დატვირთვას.

გამოსახულების მასშტაბის GIMP

ასევე შეგიძლიათ სურათების მოჭრა და ზომის შეცვლა პირდაპირ WordPress- ში:

გამოსახულების სკალირება WordPress Media რედაქტორში

3. ძველი სურათი შეცვალეთ ახლით

ატვირთეთ თქვენი ახალი სურათი WordPress- ში, შემდეგ შეცვალეთ ძველი სურათი ახალი.

Unccaled ვიჯეტის სურათი

მასშტაბური ვიჯეტის სურათი

4. გადაამოწმეთ გვერდი GTmetrix– ში

გადახედეთ გვერდს GTmetrix– ში და აღარ უნდა გქონდეთ მასშტაბური გამოსახულების შეცდომები.

100% ემსახურეთ მასშტაბური სურათები

5. მიირთვით მასშტაბური სურათები მობილურით

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

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

Ნაბიჯი 1: გაუშვით თქვენი საიტი GTmetrix- ის Android ტესტის საშუალებით:

GTmetrix მობილური ტესტი

მიირთვით მასშტაბური სურათები მობილურით

ნაბიჯი 2: იპოვნეთ თქვენი მობილური ფონის ზომები, რომლებიც გათვალისწინებულია GTmetrix– ს მიერ:

ფონის მაქსიმალური სიგანე

ნაბიჯი 3: დააინსტალირეთ ადაპტირებული სურათები მოდულიდან მოკლე პიქსელი ან ადაპტური სურათები.

ShortPixel ადაპტირებული სურათები

ნაბიჯი 4: დააყენეთ GTmetrix– ით გათვალისწინებული ზომები, როგორც ფონის მაქსიმალური სიგანე.

ფონის მაქსიმალური სიგანე

ნაბიჯი 5: გამოიყენეთ თქვენი საიტი GTmetrix– ის მობილური ტესტის საშუალებით, რათა დარწმუნდეთ, რომ შეცდომები არ არის.

GTmetrix მობილური ტესტი

ნაბიჯი 5: კონფიგურაციური კონფიგურაციის სხვა პარამეტრების კონფიგურაცია (ShortPixel მოიცავს WebP მხარდაჭერას, ზარმაცი დატვირთვის სურათებს, ჭკვიან დაჭრას და EXIF ​​მონაცემების ამოღებას). ამათაც შეუძლიათ დახმარება.

6. სურათების ზომის შეცვლა მრავალ გვერდზე

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

Ნაბიჯი 1: დააინსტალირეთ უკეთესი ძებნა შეცვალეთ მოდული.

ნაბიჯი 2: დააკოპირეთ ძველი სურათის HTML- ს და ჩასვით იგი “ძებნა მოძებნეთ” ველში უკეთეს ჩანაცვლებაზე დამატებით. შეგიძლიათ გამოიყენოთ WordPress ტექსტის რედაქტორი სურათის HTML- ის სანახავად. შენიშვნა: უკეთესი ძებნის ჩანაცვლება შეცვლის მხოლოდ იმ სურათს, თუ იგი შეიცავს ზუსტი HTML- ს, რომელშიც შესულია მოდული.

ნაბიჯი 3: დააკოპირეთ ახალი სურათის HTML და ჩასვით იგი “შეცვალეთ” ველში.

ემსახურეთ მასშტაბური გამოსახულების HTML

ნაბიჯი 4: შეარჩიეთ ცხრილები (მაგ. პოსტები) გსურთ დასკანირებული და წაშალოთ მშრალი სკანირება.

ნაბიჯი 5: დააჭირეთ “ძებნა / შეცვლას” და მოდული შეცვლის ძველ სურათს ახალს.

7. შექმენით გამოსახულების ზომები Cheat Sheet

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

მაგალითი:

  • სლაიდერის სურათები: 1900 (w) x 400 (სთ)
  • კარუსელის სურათები: 115 (w)
  • ვიჯეტის სურათები: 414 (w)
  • სრულად ბლოგი ბლოგზე განთავსებული სურათები: 680 (w)
  • პოპულარული სურათები: 250 (w) x 250 (სთ)
  • Yoast Facebook OG სურათი: 1200 (w) x 628 (თ) – ნაბიჯი 11
  • Yoast Twitter OG სურათი 1024 (w) x 512 (თ) – ნაბიჯი 11

680 პიქსელის სიგანე მართკუთხედი

ჩემი ბლოგის სიგანე 680px, ასე რომ ამ პოსტის ყველა სურათი შეიცვალა 680px.

8. WordPress მოდელები მასშტაბური სურათების დასადგენად

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

გაწურავს

ზომის შეცვლა Smush

წარმოიდგინე

სურათების ზომის შეცვლა წარმოიდგინეთ

EWW გამოსახულების ოპტიმიზატორი

სურათების ზომის შეცვლა EWWW

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

მე დავწერე სრული სამეურვეო შესახებ სურათების ოპტიმიზაცია WordPress- ში რომელიც შეიცავს:

  • შეკუმშვის სურათები
  • სურათების მომსახურება CDN- ის საშუალებით
  • ზომის შეცვლა GIFS
  • EXIF მონაცემების წაშლა
  • ზარმაცი დატვირთვის სურათები + ვიდეო
  • Cloudflare Mirage, პოლონური, Hotlink დაცვა

გამოსახულების ოპტიმიზაცია GTmetrix- ში

ვეძებთ WordPress- ის სიჩქარის გაკვეთილებს?
აქ არის სხვა გაკვეთილები, რომლებიც დავწერე:

  • როგორ დავაყენოთ WP სარაკეტო (ქეშის მოდული გირჩევთ)
  • Cloudways vs. SiteGround (ორი საუკეთესო მასპინძელი, რომელსაც გირჩევთ)
  • როგორ მივიღე 100% GTmetrix ქულები (WordPress სიჩქარის სახელმძღვანელო)

ასევე მაქვს შესანიშნავი ვიდეო WordPress– ის სიჩქარის ოპტიმიზაციასთან დაკავშირებით:

ხშირად დასმული შეკითხვები

&# x2705; შემიძლია გამოვიყენო მოდული, რომ მოემსახუროთ მასშტაბური გამოსახულებები?

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

&# x2705; რა არის სურათის მასშტაბის მარტივი მეთოდი?

გადმოწერეთ სურათი, გადაიტანეთ / შეცვალეთ იგი პროგრამაში, როგორიცაა Photoshop ან Gimp, შემდეგ შეცვალეთ ძველი სურათი ახალი.

&# x2705; რომელი სურათები უნდა დავიწყოთ ჯერ სკალირების გაკეთებას?

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

&# x2705; სად ვპოულობ გამოსახულების სწორ ზომებს?

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

&# x2705; როგორ გავაუმჯობესო სურათი?

შეაფასეთ ის სწორ განზომილებებამდე, შეკუმშეთ იგი და ამოიღეთ EXIF ​​მონაცემები გამოსახულების პროგრამის ან მოდულის გამოყენებით, შემდეგ დარწმუნდით, რომ HTML– ში მიუთითეთ გამოსახულების ზომები (დააყენეთ გამოსახულების სიგანე და სიმაღლე)..

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

Გაუმარჯოს,
ტომ

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map