نحوه بهینه سازی تصاویر برای وردپرس ، راهنمای کامل

نحوه بهینه سازی تصاویر برای وردپرس ، راهنمای کامل

افراد موجود در وب وقت زیادی برای مصرف داده ندارند – زیرا این دومی بسیار زیاد هستند. داده های زیادی وجود دارد که ما به راحتی وقت خواندن آن را نداریم! به عنوان واسطه گر محتوای وب مدرن ، وظیفه شما این است که حداکثر توان را داشته باشید. هرچه بیشتر با کلمات کمتری ابراز کنید ، در شغل خود بهتر خواهید بود.


چرا تصاویر (خیلی خیلی مهم) مهم هستند?

دلایل بسیاری ، دلایل زیادی وجود دارد که چرا (و باید) از تصاویر در پست ها و مقالات خود استفاده می کنید:

  • تصاویر به عنوان یک محرک بصری برای تماس با عمل (CTA) هستند. CTA می تواند کاری باشد که بازدید کننده شما بتواند انجام دهد. CTA های رایج شامل عضویت در خبرنامه شما ، به اشتراک گذاری مقاله خود در رسانه های اجتماعی یا خرید محصول شما می باشد.
  • تصاویر ارتباطی را که نویسنده در پی برقراری ارتباط با خواننده است ، تقویت می کند.
  • تصاویر بیشتر از طریق کمتر منتقل می شوند.

بنابراین ، بسیار مهم است که ما از تصاویر صحیح در ارائه های خود استفاده کنیم (پست وبلاگ ، گزارش غیررسمی ، ارائه واقعی پاورپوینت و غیره) برای اینکه یک نشانه در ذهن خواننده بگذارد.!

اما صبر کنید! مشکلی وجود دارد!

تصاویر حدود 63٪ از پهنای باند مورد استفاده وب سایتهای مدرن را به خود اختصاص می دهند ، بنابراین به طور فزاینده اهمیت دارد که به درستی برای سرعت بهینه سازی شوند.

یک ثانیه تأخیر در بار بارگیری صفحه می تواند 7٪ نرخ تبدیل را کاهش دهد

ما ثابت کرده ایم که مردم از توجه کوتاهی برخوردار هستند (یکی از پایین آمدن نرخ تولید محتوای مدرن). حتی اگر از تصاویر مناسب استفاده می کنید ، اگر در بازه زمانی قابل قبول بارگیری نشوند ، علاقه از بین می رود.

10 رایج ترین خطای بهینه سازی تصویر

اکثر سایت ها مشکلی دارند – از تصاویر عالی استفاده می کنند ، اما نحوه ارائه تصویر به بازدید کننده ضعیف است. سایز بزرگ ، بهینه سازی ضعیف ، قالب نادرست ، ابعاد غیر ضروری بزرگ (اندازه) ، تصاویر بدون پاسخگو و خطاهای بی دقتی سئو ، از رایج ترین مشکلات وب مدرن هستند. در مقاله امروز ، ما می خواهیم به این موارد بپردازیم!

1. ابعاد بزرگ

“فرهای اضافی” همیشه خوب نیستند

این یک کلاسیک است. فرض کنید در صفحه “تیم” سایت خود به عکس 150 pix 150 پیکسل نیاز دارید. معمولاً از یک هدفون 5MP استفاده خواهید کرد ، کمی آن را ویرایش کنید و در آخر آن را بارگذاری کنید.

آیا متوجه مشکل شدید؟ برخی از افراد مستقیماً تصویر واقعی 5 مگاپیکسلی را بارگذاری می کنند! موضوع وردپرس تصویر 5MP را بارگیری می کند (یعنی 5 x 10 ^ 6 پیکسل) و از مرورگر می خواهد تا آن را به ابعاد مورد نیاز 150x150px کوچک کند. در اصل ، مرورگر فقط 0.0045٪ از تصویر اصلی را نشان می دهد!

در نهایت شما پهنای باند و بازدید کننده خود را هدر می دهید (حتی اگر در حال ارائه تصویر از طریق یک شبکه تحویل محتوا مانند Stackpath CDN هستید) ، فضای هارد دیسک بیشتری را مصرف کرده و زمان بار را افزایش می دهید. هیچ یک از ویژگی های چیزی نیست که شما در سایت خود می خواهید.

همیشه اندازه را تغییر اندازه دهید (و با تغییر اندازه منظورم کم کردن اندازه) تصویر در ابعاد مورد نیاز و سپس بارگذاری آن!

ImageResize.org

برای انجام این کار نیازی به نرم افزار فانتزی ندارید – ابزارهای آنلاین رایگان مانند آن وجود دارد ImageResize.org می توانید برای تغییر اندازه و بهینه سازی تصاویر خود از سریع استفاده کنید. فقط تنظیمات عکس خود را بارگذاری و نیشگون گرفتن و کشیدن کنید. پس از اتمام کار ، تصویر بهینه شده خود را برای استفاده در سایت خود بارگیری کنید. آنها همچنین سریع ارائه می دهند کمپرسور تصویر اگر می خواهید اندازه پرونده را کاهش دهید.

ابزارهای مفید:

  • IrfanView یک نرم افزار عالی برای دسته ای تغییر اندازه تصاویر شما با گزینه های پیشرفته مانند بهینه سازی ، علامت چاپ سفید و مرزها است.
  • ImageMagick یک ابزار منبع باز پیشرفته و پیشرفته است که می تواند در انواع زبان های برنامه نویسی و سیستم عامل ها مورد استفاده قرار گیرد. می توانید برنامه خود را بنویسید یا از طریق خط فرمان به سادگی از آن استفاده کنید.
  • ImageOptim (مک) به شما امکان می دهد تا کل پوشه ها را بکشید و به سرعت چندین تصویر را بهینه کنید.
  • TinyPNG یک ابزار فشرده سازی تصویر آنلاین با API است.

2. قالب نادرست تصویر

shutterstock_108312266

فرمت مورد استفاده برای تصویر نقش اساسی دارد. به عنوان یک قاعده کلی انگشت شست ، استفاده کنید PNG برای گرافیک های برداری و تصاویر تولید شده از رایانه مانند کلیپ آرت و غیره استفاده کنید JPEG برای عکس یا تصاویر با رنگهای مختلف برای توضیح دقیق ، این مورد را بررسی کنید پاسخ عالی StackOverflow.

3. عدم استفاده از JPEG های پیشرو

پایه (عادی) JPG در مقابل JPG مترقی

پایه (عادی) JPG در مقابل JPG مترقی

برای انسان عادی ، JPEG دو نوع هستند – پایه و پیشرو. از نظر بصری ، هر دو یکسان هستند. تفاوت در نحوه بارگیری آنها نهفته است:

  • پایه JPEG فقط یک لایه دارد – شامل کل تصویر. در صورت درخواست ، کل تصویر در یک بار بارگیری می شود.
  • JPEG های مترقی تصویر را با چند لایه ترسیم می کنند. یک تصویر JPEG Progressive توسط یک لایه لایه بارگذاری می شود ، که به تدریج در کیفیت افزایش می یابد ، در نهایت یک نمای بی ضرر به شما می دهد.
IrfanView از تبدیل دسته ای با JPEG مترقی پشتیبانی می کند

IrfanView از تبدیل دسته ای با JPEG مترقی پشتیبانی می کند

کلیه اندازه گیرنده های اصلی تصویر به شما امکان می دهند تصاویر را به عنوان JPEG Progressive ذخیره کنید.

4- عدم استفاده از بار Lazy

بارگذاری تنبل عالی است صرفه جویی در منابع تکنیکی که در آن یک تصویر بارگذاری می شود فقط وقتی بازدید کننده به قسمت قاب تصویر پایین می رود. مقاله ای را در نظر بگیرید – “15 ماشین با سوخت کارآمد در 2014”. طبیعتاً این مقاله حاوی حداقل 15 تصویر خواهد بود. و مهم نیست ارتفاع دستگاه نمایشگر – مانیتور ، تبلت یا تلفن هوشمند ، شما نمی توانید همه 15 تصویر را در قاب نمای قرار دهید. برای دیدن همه تصاویر باید به پایین بروید.

با فعال کردن Lazy Loading ، تصاویر فقط در صورت بازدید کننده در مجاورت تصویر بارگیری می شوند. به عبارت دیگر ، تصاویر هنگام بارگیری به پایین برای مشاهده ، شروع به بارگیری می کنند. با این حال ، چند تصویر اول بارگیری می شوند ، از آنجا که شما در قاب نمای قرار دارید. Lazy Loading ، پهنای باند را در هر دو انتها ذخیره می کند و باعث افزایش زمان بار می شود! می توانید با استفاده از Lazy Loading در WordPress استفاده کنید افزونه بار جی تنبل.

5- عدم استفاده از CDN

شبکه cdn

با استفاده از یک شبکه تحویل محتوا (CDN) تصویر از سروری که از نظر جسمی به محل بازدید کننده نزدیکتر است ، ارائه می دهد. اگر بازدید کننده از هند درخواست تصویری کند ، و CDN دارای یک POP (نقطه حضور یا به سادگی یک سرور) در توکیو و نیویورک باشد ، تصویر از سرور واقع در توکیو ارائه می شود..

وقتی ترافیک قابل توجهی دارید ، باید CDN را با وردپرس تنظیم کنید تا زمان بار خود را پایین بیاورید و عملکرد کلی را بدست آورید. در اینجا در WPExplorer ، توصیه می کنیم Cloudflare. برای سایتهای تازه متولد شده ، لیستی از خدمات رایگان CDN را که می توانید امتحان کنید توصیه می کنیم.

6. اعلام نکردن صفت “alt”

ویژگی “alt” تصویر موتور جستجو را توصیف می کند. در صورت لود شدن تصویر ، متنی که در این زمینه وارد می کنید برای کاربر نمایش داده می شود. افراد زیادی تمایل دارند این زمینه ها را خالی بگذارند. این برای سئو بسیار مضر است و شما در ترافیک از دست می دهید. همیشه باید سعی کنید کلمات کلیدی سایت خود را در برچسب alt تصاویر خود بگنجانید.

7. بهینه سازی تصاویر نیست

مداد-مداد رنگی

تصاویر بهینه شده 40٪ سبکتر از تصاویر معمولی هستند. این باعث افزایش بار و صرفه جویی در پهنای باند می شود. از لیست بهترین گزینه های بهینه سازی تصویر وردپرس ، فردی ، توصیه می کنیم WPSmush.it برای بهینه سازی تصاویر. Kraken.io همچنین گزینه ای عالی برای فشرده سازی تصاویر در فایرفاکس است. ما همیشه از این برنامه در WPExplorer استفاده می کنیم تا تصاویر برجسته را قبل از بارگذاری آنها در پست ها و نمایه های موضوعی بهینه سازی کنیم.

8. تصاویر پاسخگو

طراحی وب پاسخگو در اینجا است

طراحی وب پاسخگو در اینجا است

حتی اگر سایت شما پاسخگو باشد ، به این معنا نیست که تصاویر شما هستند. این بدان معنی است که تصویر هدفی که برای صفحه دسک تاپ 22 اینچی استفاده می کنید ، به یک آیفون 5 اینچی نیز ارائه می شود. وقتی یک تصویر را بارگذاری می کنید ، وردپرس آن را به چندین نسخه تغییر می دهد – تصویر بند انگشتی ، متوسط ​​، اندازه کامل ، و غیره. این توسط برنامه نویس قابل تغییر است. یک تم با کدگذاری مناسب نسخه متوسط ​​”تصویر” را ارائه می دهد و در نتیجه پهنای باند را ذخیره می کند.

Picturefill.WP این افزونه برچسب های تصویر را با یک جایگزین جدید جایگزین می کند عنصری که بر اساس نمایش داده های رسانه ای ، تصاویر مختلفی را ارائه دهد. این آزمایش کاملاً آزمایشی است (یعنی اشکالات وجود دارد) و نباید در یک سایت زنده استفاده شود.

9. شرح تصاویر

زیرنویسها همیشه ضروری نیستند ، اگرچه در بعضی موارد لازم است – از جمله تصاویر در یک آموزش. نوشتن تصاویر به خوانندگان کمک می کند تا ضمن تقویت SEO خود ، موضوع را بهتر درک کنند.

10. نام پرونده

در مورد نام فایل از منظر موتور جستجو فکر کنید. از همان متن موجود در برچسب “عنوان” تصویر استفاده کنید. همچنین ، سعی کنید کلمات کلیدی خود را که مربوط به سایت شما است ، درج کنید.

نتیجه

قهرمان -11

تصویر SEO برای هر وب سایت مهم است – قدیمی یا جدید. افرادی که SEO را پیاده سازی می کنند به درستی (ممکن است در بعضی مواقع کاملاً بی مهربان باشد) ، برای دستیابی به مقدار قابل توجهی از ترافیک ارگانیک (بهترین نوع ترافیک) در بلند مدت.

یک تکنیک بهینه سازی عالی دارید؟ آتش را دور کنید!

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