رفتن به مطلب

آموزش بهینه سازی تصاویر در وردپرس


پست های پیشنهاد شده

بهینه سازی تصاویر تحت یک وبسایت از وظایف مهم یک طراح و برنامه نویس تلقی می شود. شما مختارید تا برای افزایش کارایی هر چه بیشتر وبسایت خود، از تصاویر محدود، فشرده شده، اسپرایت ها و.. استفاده کنید.

 

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

 

اندازه تصاویری که قرار است در صفحات وردپرس مورد استفاده قرار گیرد بسیار مهم است‌‌، چرا که این تصاویر به صورت خودکار بنا به اندازه تعیین شده توسط شما در زمان بارگذاری ایجاد می شوند. این قضیه سبب می شود تا حتی اگر شما یک تصویر اصلی با عرض 3000 پیسکل داشته باشید در صورتی که یک تصویر 600 پیکسل کافی باشد آن تصویر 3000 پیکسلی هرگز مورد استفاده قرار نگیرد. به طور مطلوب یک فضا با عرض 600 پیسکل باید از یک تصویر با عرض 600 پیسکل استفاده کند. در غیر این صورت مجبوریم مقیاس صفحه را برای مشاهده تصویر بزرگ، کوچکتر کنیم.

 

 

سیستم مدیریت محتوای وردپرس چگونه تصاویر را مدیریت می کند:

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

زمانی که شما تصویری را از طریق وردپرس بارگذاری می کنید، سیستم وردپرس به صورت خودکارنسخه های مختلفی از این تصاویر را ایجاد کرده و آنها را به صورت جداگانه ذخیره می کند. به عنوان مثال اگر شما یک تصویر با اندازه 1200×800 را بارگذاری کنید بنا به نسخه وردپرس و تنظیمات آن ممکن است تصاویری با اندازه های 100×100، 600×400 و 900×600 ایجاد شود. به این ترتیب زمانی که شما یک تصویر را در وردپرس درج کرده و حالت تصویر medium را برای آن در نظر می گیرید، وردپرس با کاهش اندازه تصویر اصلی ، نسخه اندازه واقعی medium را مورد استفاده قرار خواهد داد.

 

این فرایند، فوق العاده برای وبمستر و البته کاربران(بازدیدکننده ها) مفید خواهد بود چرا که پهنای باند و زمان پردازش سرور را به طور قابل توجهی کاهش خواهد داد. همه میدانیم که یک تصویر 600×400، سریعتر از تصویری با اندازه 1200×800 در مرورگر کاربران بارگذاری خواهد شد.

 

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

 

 

 

تصویر مناسب در مکان مناسب:

هدف نهایی ما این است که بگوییم همیشه باید از تصاویر با اندازه های مناسب استفاده کنیم. به عنوان مثال اگر به یک تصویر با اندازه 440×380 نیاز دارید، دقیقاً عین این اندازه را مورد استفاده قرار دهید. به طور کلی دو نقطه هستند که شما تصاویر خود را در یکی از این دو نقطه قرار می دهید. یکی قسمت تصاویر برجسته(featured images) و مشخص که در ابتدای پست ها قرار می گیرد و دیگری در لابه لای پستها. پیشنهاد من این است که اول تمرکز اصلی خود را روی تصاویر featured قرار دهید.

 

در تمامی مقالات، به خصوص آنهایی که از بیشترین تصاویر کمکی برای کمک به درک مطلب استفاده می کنند، هیچ اهمیتی ندارد که یک تصویر میان پستی از عرض 220 یا 245 پیکسل برخوردار باشد. هر کدام از این دو اندازه را که به کار ببرید فرق خاصی مشاهده نمی شود.

تصاویر برجسته(Feautured Images) در حالت عادی در اندازه های متداول نمایش داده می شوند. به عنوان مثال برای لیست مقالات، ممکن است شما از یک تصویر بندانگشتی با اندازه 178×178 پیسکل استفاده کرده و یا مثلاً برای هدرهای مقاله مورد نظرتان از تصویری با عرض 1200×600 پیسکل بهره ببرید.

 

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

 

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

 

 

 

ایجاد تصاویر با اندازه های مورد نیاز وبسایت:

با استفاده از تابع add_image_size() function شما می توانید تمامی اندازه هایی که سایت شما از یک عکس را نیاز دارد تعیین کنید. به عنوال مثال اجازه دهید تا دو نمونه اندازه مطرح شده در بالا را با این کد عملاً اجرایی کنیم.

برای این منظور فقط کافی است که کد زیر را در یکی از فایل های functions.php یا plugin متعلق به قالب وردپرس قرار دهید.

 

 

add_image_size( 'featured_thumbnail', 178, 178, true );add_image_size( 'featured_wide', 1200, 600 );

 

همانطور که در کد می بینید، این تابع تعداد 4 پارامتر را به عنوان ورودی از شما می پذیرد. پارامتر اول به شما این امکان را می دهد تا برای اندازه مورد نظر یک نام دلخواه در نظر بگیرید. پارامتر دوم حداکثر اندازه عرض تصویر و پارامتر سوم نیز حداکثر اندازه ارتفاع تصویر را مشخص می کند. و پارامتر چهارم هم hard cropping تصویر را مشخص می کند. در صورتی True تنظیم شود، اندازه تصویر دقیقاً به همان اندازه ای خواهد بود که شما مشخص کرده اید.

 

بعد از اینکه کد بالا را به یکی از فایل های گفته شده اضافه کردید، دو تصویر با خصوصیات مختلف توسط وردپرس ایجاد خواهد شد.

 

 

 

استفاده از تصاویر ایجاد شده با اندازه های مختلف:

این تصاویر ایجاد شده در اندازه های مختلف می توانند در یک سری توابع مرتبط با دریافت مدیا مورد استفاده قرار گیرند. اجازه دهید اول به نحوه استفاده از تصاویر برجسته نگاهی بیندازیم. با ما همراه باشید.

از تابع the_post_thumbnail() به طور متداول به منظور نمایش یک تصویر برجسته در پست استفاده می شود. برای این منظور می توانید از کد نمونه به صورت زیر در حلقه وردپرس استفاده کنید.

 

 

 

the_post_thumbnail( 'featured_thumbnail' );

 

اولین و در واقع تنها پارامتر این تابع به شما این امکان را می دهد تا اندازه تصویر مورد نظر برای استفاده را مشخص کنید. در کد بالا چون من از featured_thumbnail استفاده کرده ام، تصویر نهایی با اندازه 178×178 از تصویر اصلی مورد استفاده قرار خواهد گرفت.

 

البته جدای از این تابع، توابع دیگری نظیر wp_get_attachment_image() و wp_get_attachment_image_src() نیز وجود دارند که به مانند قبلی از یک پارامتر برای تعیین اندازه تصویر بهره می برند. به طور کلی هر زمان که نیاز داشتید از چنین توابعی

 

استفاده کنید همیشه باید اندازه مورد نیاز خود را به عنوان پارامتر برای آن در نظر بگیرید.

 

 

 

:تولید مجدد تصاویر بندانگشتی

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

البته جای هیچ نگرانی ای وجود ندارد چرا که با وجود پلاگینی با نام Regenerate Thumbnails همه مسائل و ناسازگاری های موجود حل خواهد شد. این پلاگین قادر است تصاویر بندانگشتی از پیش ذخیره شده در سیستم را را مجددا تولید کرده و به یک باره تمامی اندازه های تعیین شده توسط شما را به آنها اعمال کند. همچنین این تابع این قابلیت را دارد تا فقط برخی تصاویر مورد نظر شما را تحت تاثیر قرار دهد.

بعد از اینکه تصاویر بندانگشتی مجددا تولید شدند شما باید نسخه های بهینه شده آنها را که در سایتتان بارگذاری شده است ببینید. شما می توانید با بررسی منبع و سرس اصلی تصویر، به درستی انجام کار پی ببرید. به عنوان مثال اگر شما تصویر ‘example.jpeg’ را آپلود کرده بودید و حال شما باز هم ‘example.jpeg’ را در سرس بخش تصاویر برجسته(featured image ) می بینید بدانید که کار به درستی انجام نشده است. اما اگر نام تصویر در سرس به نام “example-178×178.jpeg” و یا ابعاد اینچنینی دیگر تغییر پیدا کرده، بدانید که همه چیز به درستی انجام شده و تصویر مورد نظر شما بهینه شده است.

 

 

 

تصاویر واکنشگرا:

یک مشکل اساسی در نگهداری یک سایت بهینه سازی شده، واکنشگرایی آن است. زمانی که شما یک مقاله را تحت آیپد خود مشاهده می کنید، یک تصویر میانپستی با اندازه بزرگ در آن به اندازه کوچک تبدیل خواهد شد، چرا که حداکثر اندازه عرض آن به عنوان مثال 768 پیکسل در نظر گرفته شده است.

آسان ترین راه حل برای این مشکل استفاده از پلاگینی به مانند Hammy است. این پلاگین مبتنی بر عرض محتویات تم شما یا به عبارتی عرض پنجره مرورگرتان کار می کند. به این معنا که تصاویر بهنیه سازی شده را بنا به عرض مرورگر موجود مورد استفاده قرار می دهد. این قابلیت مخصوصاً برای کاربران موبایلی که مشکلات پهنای باند و توان پردازشی دارند می تواند مفید واقع شود.

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...