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

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

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

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

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

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

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

تصاویر حدود 63 درصد از پهنای باند استفاده شده توسط وب‌سایت‌های مدرن را اشغال می‌کنند، بنابراین بسیار مهم است که آنها به‌درستی برای سرعت بهینه شوند.

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

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

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

1. تغییر اندازه تصاویر با ابعاد بزرگ

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

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

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

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

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

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

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

2. از فرمت تصویر صحیح

استفاده کنید

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

3. از JPEG های پیشرو

استفاده کنید

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

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

همه تغییر اندازه‌دهنده‌های اصلی تصویر به شما امکان می‌دهند تصاویر را به صورت پیشرو JPEG ذخیره کنید.

4. Lazy Load

را فعال کنید

Lazy-Loading بسیار عالی است < تکنیک قوی>ذخیره منابع که در آن تصویر تنها زمانی بارگذاری می شود که بازدیدکننده به سمت قاب نمای تصویر حرکت کند. مقاله ای را در نظر بگیرید – «15 خودروی کم مصرف در سال 2014». طبیعتا این مقاله حداقل شامل 15 تصویر خواهد بود. و بدون توجه به ارتفاع دستگاه نمایشگر – مانیتور، تبلت یا تلفن هوشمند، نمی توانید همه 15 تصویر را در قاب دید قرار دهید. برای مشاهده همه تصاویر باید به پایین بروید.

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

5. یک CDN

اضافه کنید

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

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

در اینجا در WPExplorer، ما از Cloudflare استفاده می کنیم، و ما داریم یک لیست اضافه شده از خدمات CDN رایگان توصیه شده که ممکن است بخواهید وارسی. اما راه‌اندازی یک CDN خودتان می‌تواند پیچیده باشد، جایی که یک افزونه می‌تواند مفید باشد.

Media Offload Publitio

یک گزینه عالی، افزونه Publitio Offload Media است که به شما امکان می دهد فایل های رسانه ای خود را در Publitio cloud- ذخیره کنید. مدیر رسانه مبتنی بر. با نصب افزونه، می توانید به راحتی کل کتابخانه رسانه خود را از سرورهای خود خارج کنید و حتی کیفیت تصویر و ویدیو را در زمان انجام بهینه سازی کنید. پس از انتقال، تصاویر به سرعت از CDN Publitio ارائه می شوند. این کار هزاران فضای سرور را آزاد می کند و واقعاً می تواند سرعت سایت شما را افزایش دهد (به خصوص اگر در یک برنامه میزبانی بودجه با فضای محدود هستید). حتی یک دکمه ساده همگام‌سازی اکنون برای اضافه کردن خودکار رسانه‌های جدید به ابر هنگام ویرایش پست‌های جدید وجود دارد. و طرح‌های پریمیوم Publitio شامل ویژگی‌های اضافی برای CNAMEهای سفارشی، چندین واترمارک و حتی رمزگذاری ویدیو می‌شود.

6. مشخصه alt

را اعلام کنید

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

7. فشرده سازی تصاویر

را بهینه کنید

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

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

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

Picturefill.WP افزونه برچسب های تصویر را با یک عنصر

9. شرح تصویر

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

10. نام فایل تصویر

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

نتیجه گیری

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

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