آموزش بهینه سازی تصاویر در وردپرس [نکات عملی]

منظور از بهینه سازی یک تصویر چیست؟

بهینه سازی تصاویر به صورت کاملاً ساده یعنی استفاده از ابعاد صحیح با کمترین حجم ممکن و البته بدون افت کیفیت تصویر. هدف از بهینه سازی تصاویر، افزایش سرعت صفحات سایت است.

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

اهمیت بهینه سازی عکس های سایت

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

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

گام اول: تعیین سایز و ابعاد مناسب برای تصاویر

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

بهترین سایز تصاویر برای ووکامرس و وردپرس چقدر است؟

اولین سوال برای اصلاح سایز تصاویر این است که چه سایزی برای تصاویر مناسب است؟ آیا می توان ابعاد خاصی را برای همه سایت ها پیشنهاد کرد؟

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

بسیاری از وب سایت های ووکامرسی که برای فروش محصول به کار می روند معمولاً دارای تصاویری با سایز مربعی هستند و میتوانید از ابعادی نظیر 300*300 تا 600*600 برای آنها استفاده کنید اما حتماً قبل از هر اقدامی ابعاد نمایشی تصاویر را در وب سایت خود بدست آورید.

چگونه ابعاد صحیح تصاویر سایت را تشخیص دهیم؟

برای اینکه ابعاد تصاویر و بنرها را تشخیص دهید کافیست به این شیوه عمل کنید.

صفحه را در مرورگر دسکتاپ باز کنید. بر روی صفحه مرورگر راست کلیک کنید و گزینه Inspect را انتخاب کنید. (می توانید از کلیک F12 نیز برای این کار استفاده کنید). پنجره جدید در پایین یا سمت راست مرورگر شما باز خواهد شد.

روی آیکون Pick an Element کلیک کنید (می توانید از کلیدهای ترکیبی ctrl+shift+c استفاده کنید). حال کافیست موس خود را بر روی تصویر مورد نظر ببرید تا ابعاد نمایشی تصویر به شما نمایش داده شود.

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

گام دوم: آشنایی با فرمت های تصویری

دومین قدم در بهینه سازی یک تصویر انتخاب فرمت مناسب است. در وب سایت های اینترنتی معمولاً 3 فرمت تصویری بیشترین مورد استفاده را دارند.

• فرمت PNG
• فرمت JPG یا JPEG
• فرمت WEBP

مزایا و معایب فرمت PNG

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

مزایا و معایب فرمت JPG

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

نکته منفی تصاویر JPG زمینه آنهاست. شما نمی توانید تصاویر ترنسپرنت با فرمت جی پی جی ایجاد کنید. اگر فرمت تصاویر ترنسپرنت PNG را به JPG تغییر دهید زمینه آنها سفید خواهد شد.

مزایا و معایب فرمت WEBP

فرمت WEBP فرمت جدیدی از تصاویر است که توسط گوگل در سال 2010 معرفی شد. این فرمت مانند PNG به صورت ترنسپرنت ارائه می شود و حجم بسیار پایین تری دارد. بنابراین از این فرمت تصویری می توانید برای تمامی تصاویر سایت خود بجای JPG و PNG استفاده کنید.

گوگل اعلام کرده است که فرمت وب پی در مقابل PNG در حدود 26 درصد و در برابر JPG بین 25 تا 35 درصد حجم نهایی تصویر را کاهش خواهد داد.

گام سوم: تغییر ابعاد و کاهش حجم تصاویر به کمک ابزارها

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

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

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

برای این کار ابتدا از روش گفته شده در گام اول سایز مناسب تصویر را مشخص کنید. سپس به مسیر File > New بروید و یک سند جدید ایجاد کنید. در پنجره باز شده در سمت راست طول و عرض تصویر را وارد کنید. (همان ابعادی که از مرحله دوم بدست آوردیم). دقت کنید واحد اعداد بر روی pixel باشد.

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

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

File > Export > Save for Web (Legacy)

با کلیک بر روی گزینه Save for Web پنجره ای به شکل زیر برای شما باز خواهد شد که در آن می توانید فرمت نهایی، سایز و کیفیت تصویر را تغییر دهید.

ابتدا مشخص کنید فرمت خروجی تصویر شما چیست. اکثر اوقات jpg بهترین گزینه است. خصوصاً زمانی که می خواهید بهینه سازی به صورت دستی انجام شود. البته اگر تصویر شما ترنسپرنت است می بایست گزینه png را انتخاب کنید.

اگر فرمت نهایی را jpg انتخاب کنید گزینه Quality به شما نمایش داده خواهد شد. با استفاده از این اهرم می توانید کیفیت تصویر نهایی را مشخص کنید. هرچقدر کیفیت تصویر کمتر شود حجم نهایی نیز کاهش خواهد یافت. این وسط هنر شماست که کیفیتی را انتخاب کنید که کمترین افت ظاهری را شاهد باشید و حجم به مقدار مناسبی نیز کاهش یافته باشد، طوری که نه سیخ بسوزد نه کباب!

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

با هر تغییری که در بخش quality اعمال می کنید حجم نهایی تغییر خواهد کرد. در همین پنجره پیش بینی فتوشاپ را از حجم نهایی را می توانید مشاهده کنید. مثلا در تصویر زیر حجم نهایی با کیفیت 60 حدود 56 کیلوبایت است.

حسب تجربه کیفیت 50 تا 60 معمولاً باعث کاهش حجم نهایی تصاویر خواهد شد ولی تفاوت فاحشی در ظاهر تصویر ایجاد نخواهد کرد.

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

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

البته همه چیز به این سادگی نیست و ظرافت هایی نیز دارد. پیشنهاد می کنیم حتماً ویدئوی بهینه سازی تصاویر در فتوشاپ که ابتدای مقاله درج شده است را مشاهده نمایید.

استفاده از ابزارهای آنلاین برای بهینه سازی تصاویر

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

وب سایت Resize Pixel

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

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

وب سایت های tinypng و imagecompressor: این وب سایت ها معروف ترین ابزارهای آنلاین بهینه سازی تصاویر و کاهش حجم هستند. کار با آنها بسیار راحت است و می توانید با آپلود تصویر یا تصاویر خود سریعاً خروجی نهایی با کاهش حجم زیادی را در اختیار داشته باشید.

نکته مهم برای این دو وب سایت، کاهش حجم تصاویر png است. در فتوشاپ خیلی امکان کاهش تصاویر png نیست ولی این دو ابزار گاهی تا 70 درصد، حجم یک تصویر png را بدون افت کیفیت، کاهش می دهند

گام چهارم: بهبود سئوی تصاویر با عنوان و توضیحات مناسب

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

برای بهبود سئوی تصاویر نیاز است که علاوه بر بهینه سازی ابعادی و حجمی، نام و توضیحات مناسبی نیز برای آنها انتخاب کنید.

انتخاب عنوان مناسب برای سئو و بهینه سازی تصاویر

سعی کنید از نام پیش فرض فایل های تصویری نظیر dcmimage01.jpg استفاده نکنید. برای هر تصویر عنوانی مرتبط با خودش انتخاب کنید.

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

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

تکمیل بخش توضیحات یا alt تصاویر

گوگل از بخش alt تصاویر برای فهمیدن موضوع عکس استفاده می کند؛ بنابراین با تکمیل این توضیحات می توانید به گوگل بفهمانید که تصویر چه می گوید.

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

استفاده از افزونه های بهینه سازی تصاویر (در شرایط خاص)

مثل همیشه افزونه هایی نیز برای بهینه سازی تصاویر سایت موجود هستند که می توانید از آنها استفاده کنید.

• Imagify
• Smush WP
• EWWW Cloud
• ShortPixel

ما در پشتیبانی وردپرس نوین ادمین استفاده از افزونه برای بهینه سازی تصاویر را به چند دلیل پیشنهاد نمی کنیم:

فایل های اضافی تولید می کند

افزونه های بهینه سازی تصاویر، نسخه اصلی عکس ها را تغییر نمی دهند. بلکه یک نسخه از آن کپی می کنند و تغییرات را بر روی آن اعمال می کنند.

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

درای محدودیت است و یا نیاز به لایسنس دارد

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

کیفیت خروجی همیشه مناسب نیست

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

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

سایر راهکارهای عملی (پیشنهادات نوین ادمین)

غیر از گام های عنوان شده، راه کارهای دیگری برای بهینه سازی وب سایت و لود بهتر تصاویر وجود دارد که در ادامه عنوان می کنیم.

فعال کردن لود تنبل تصاویر

در فرآیند لود تنبل یا Lazy Load هدف این است که هرچه سریعتر قسمت بالایی سایت لود شود و کاربر آن را مشاهده کند. سپس ادامه تصاویر صفحه زمانی لود شود که کاربر به سمت پایین اسکرول می کند.

اگر از افزونه wp rocket استفاده می کنید می توانید این قابلیت را در وب سایت خود به راحتی فعال کنید.

آموزش کار با افزونه WPRocket [فیلم آموزشی]

استفاده از رنگ بجای تصویر

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

درج عرض و ارتفاع برای تصاویر (دایمنشن)

تصاویر دارای عرض و ارتفاع مشخصی هستند و به صورت فنی می بایست عرض و ارتفاع آنها برای مرورگر مشخص باشد تا فضای کافی را برای جایگذاری عکس در نظر بگیرد. اگر از افزونه wp rocket استفاده می کنید. حتماً گزینه ابعاد تصویر را فعال کنید.