افزونه تصاویر پرفکت پرمیوم | Meow Perfect Images Pro

افزونه Meow Perfect Images Pro پرفکت ایمیج پرو یک پلاگین برای ساخت تصاویر رتینا در اندازه های مختلف برای دستگاه های با رزولویشن بالا یا High-DPI است. این افزونه (که هسته اصلی آن قبلاً با نام بسیار محبوب WP Retina 2x شناخته می‌شد) یک ابزار تخصصی و قدرتمند برای وردپرس است که بر روی بهینه‌ سازی نحوه نمایش تصاویر در وب‌سایت شما تمرکز دارد، به خصوص برای کاربرانی که از دستگاه‌هایی با نمایشگرهای وضوح بالا (High-DPI یا Retina) استفاده می‌کنند.

وقتی شما تصویری را در وردپرس آپلود می‌کنید، وردپرس اندازه‌های مختلفی از آن تصویر ایجاد می‌کند (مانند Thumbnail, Medium, Large). مرورگر کاربر معمولاً نزدیک‌ ترین اندازه به فضایی که تصویر باید در آن نمایش داده شود را بارگذاری می‌کند. اما نمایشگرهای رتینا (HiDPI) تراکم پیکسلی بسیار بالاتری نسبت به نمایشگرهای استاندارد دارند (معمولاً ۲ یا ۳ برابر)، این بدان معناست که برای نمایش یک تصویر در همان فضای فیزیکی، به پیکس‌های بیشتری نیاز دارند.

اگر وردپرس فقط یک تصویر با اندازه استاندارد (مثلاً 800×600 پیکسل) را برای فضایی که در نمایشگر رتینا به 1600×1200 پیکسل نیاز دارد ارسال کند، تصویر کشیده شده و تار به نظر می‌رسد. این تجربه کاربری ضعیفی ایجاد می‌کند، به خصوص برای وب‌سایت‌هایی که کیفیت بصری اهمیت زیادی دارد (مانند سایت‌های عکاسی، طراحی، نمونه کار، فروشگاه‌های آنلاین و…). هنگامی که شما تصویری را آپلود می‌کنید، افزونه Meow Perfect Images Pro به طور خودکار نسخه‌ هایی با وضوح بالاتر (معمولاً با پسوند @2x و گاهی @3x) از آن تصویر و اندازه‌های مختلف آن (Thumbnail, Medium, Large و…) ایجاد می‌کند.

افزونه Meow Perfect Images Pro سریع، کارآمد و سازگار با سایر افزونه ها بدون ایجاد جداول دیتابیس جدید است. با کمک این افزونه میتوانید اندازه های تصاویر را کنترل کنید، اندازه های تصویر توسط وردپرس، قالب و سایر افزونه‌ های شما ثبت میشوند و همه این اندازه ها برای شما مورد نیاز نیستند و به راحتی میتوانید با کمک این افزونه آنها را غیرفعال بکنید و در فضا و منابع خود صرفه جویی کنید. پلاگین به شما قابلیت جایگزینی تصاویر رسانه را مستقیما از همان داشبورد افزونه می دهد و می توانید گردش کار خود را ساده کنید و از تعویض دستی خودداری کنید.

نکات مهم:

1. افزونه قابلیت تبدیل فرمت تصاویر شما به WebP و AVIF برای نمایش عادی ندارد بلکه از این فرمت ها را برای نمایش رتینا استفاده میکند.
2. برای استفاده از این فرمت ها جهت تصاویر رتینا باید GD(webp) و avif GD در سرور شما فعال باشد، در غیر اینصورت نمیتوان استفاده کرد.

ویژگی های افزونه تصاویر پرفکت پرمیوم | Meow Perfect Images Pro

• ارتقاء مقیاس: وضوح تصویر را بهبود می بخشد و تصاویر کوچک بهتری ایجاد می کند، حتی برای اندازه هایی که قبلا پشتیبانی نمی شد.
• مدیریت اندازه های تصویر: مدیریت تصویر خود را با غیرفعال کردن اندازه های غیر ضروری و ردیابی اندازه های ایجاد شده برای هر ورودی رسانه ساده کنید. به عنوان مثال، می توانید اندازه های تولید شده توسط وردپرس مانند medium_large، 1536×1536 و 2048×2048 را غیرفعال کنید تا در فضا و منابع صرفه جویی کنید. اندازه‌ های تصویر توسط وردپرس، قالب و سایر افزونه‌ های شما ثبت میشوند و همه آن اندازه‌ ها برای هر تصویری که در کتابخانه رسانه خود دارید ایجاد می‌شود، این اندازه ها هیچ جایی نمایش داده نمی شوند خوشبختانه افزونه Meow Perfect Images Pro نه تنها میتواند آن اندازه‌ ها را به شما نشان دهد، بلکه شما می‌توانید آنها را فعال کنید یا غیرفعال کنید.

• تولید مجدد تصاویر کوچک: تصاویر کوچک خود را به راحتی به صورت گروهی بروز کنید. نوار پیشرفت داخلی شما را در جریان قرار میدهد، در حالی که افزونه تمام جزئیات از جمله بازسازی تصاویر رتینا و بروزرسانی متا داده رسانه را کنترل میکند، افزایش مقیاس تضمین می‌کند که می‌توان تصاویر کوچک را حتی برای اندازه‌ هایی ایجاد کرد که قبلاً پشتیبانی نمی شدند.
• تصاویر رتینا/ DPI بالا: اطمینان حاصل کنید که سایت شما در همه دستگاه ها خیره کننده به نظر می رسد. Perfect Images تصاویر آماده شبکیه را به صورت خودکار تولید و ارائه می کند. علاوه بر این، می توانید به صورت دستی تصاویر شبکیه را ایجاد کنید و حتی نسخه های شبکیه را برای تصاویر در اندازه کامل ایجاد کنید. برای اطلاعات بیشتر و آموزش های بیشتر به وب سایت رسمی ما مراجعه کنید.
• غیرفعال کردن آستانه تصویر: مقیاس‌ بندی خودکار تصاویر بزرگ وردپرس را غیرفعال کنید و از ایجاد فایل‌های دارای “-scaled” در نام فایل‌ها جلوگیری کنید. از زمان وردپرس 5.3، تصاویر بزرگتر از 2560 پیکسل به طور خودکار تغییر اندازه داده می شوند و به عنوان پسوند با مقیاس-scale تغییر نام داده می شوند. این معمولاً دردناک است، زیرا وردپرس فایلی را که در ابتدا آپلود کرده‌اید نگه می‌دارد، اما از آن در جایی استفاده نمی‌کند (و اندازه کامل آن متفاوت است). این در واقع برای کاربرانی ساخته شده است که چیز زیادی نمی دانند تا از آپلود اشتباهی تصاویر بزرگ جلوگیری کنند. آن گزینه را فعال کنید تا مطمئن شوید که این ویژگی با سایت شما به هم نمی خورد.

• اقدامات گروهی آسان: با ابزارهایی برای جایگزینی، بازسازی یا ارتقاء کیفیت چندین تصویر در یک حرکت در زمان صرفه جویی کنید.
• بهینه سازی نحوه نمایش برای سرعت: با پشتیبانی از ادغام WebP، AVIF و CDN عملکرد را افزایش دهید.

• مدیریت تصویر بدون درز: به راحتی تصاویر و اندازه ها را جایگزین، بازسازی و مدیریت کنید تا یک کتابخانه رسانه ای تمیزتر و نمایش بهینه تر داشته باشید.
• ادغام CDN: افزونه Meow Perfect Images Pro از طریق مشارکت بسیار منحصر به فرد با سایت Easy IO (EWWW)، اکنون پیشنهاد خود را دارد. ایده این است که یک سرویس همه کاره ارائه کنید که بر نصب شما تأثیری نداشته باشد و واقعاً مقرون به صرفه باشد.

• کاملا قابل تنظیم: تنظیمات تصویر خود را با گزینه‌ هایی برای اندازه‌ های سفارشی، غیرفعال کردن آستانه و موارد دیگر به‌خوبی تنظیم کنید.
• روش تحویل: اگر از افزونه‌های قدیمی (یا با کدگذاری بد) استفاده می‌کنید، ممکن است لازم باشد یک روش جایگزین را انتخاب کنید. PictureFill به طور کلی انتخاب خوبی است. HTML تولید شده توسط وردپرس شما را تجزیه و تحلیل می کند، به دنبال تصاویر می گردد و آن تصاویر را با سیستم Responsive Image جایگزین می کند. علاوه بر این، یک اسکریپت کوچک برای پشتیبانی از مرورگری اضافه میکند که ممکن است هنوز تصاویر ریسپانسیو را مدیریت نکند (اگر احساس می‌کنید بی‌فایده است، می‌توانید این اسکریپت را از طریق گزینه‌ها غیرفعال کنید). Retina.js روش سمت مشتری، در گذشته بسیار محبوب بود. حتی توسط وب سایت اپل استفاده شد! توجه داشته باشید که هیچ یک از این روش ها نمی تواند کامل باشد. وضعیت ایده آل این است که تمام پلاگین ها و موضوعی که استفاده می کنید بر روی سیستم Responsive Images ساخته شده اند و کاملاً کار خواهند کرد. در غیر این صورت، باید روشی را پیدا کنید که به بهترین وجه با سایت شما مطابقت داشته باشد، و قسمت هایی را که با هک های کوچک کار نمی کنند (یا اجازه دهید) تعمیر کنید. در زیر انواع روش های تحویل ذکر شده است:

1. PictureFill: روش Picturefill به منظور استفاده از تگ HTML جدید به نام srcset ، HTML را در لحظه بازنویسی می کند. از آنجایی که هنوز توسط مرورگرها پشتیبانی نمی شود، JS polyfill PictureFill برای بارگذاری تصاویر استفاده می شود. برای هدف سئو، ممکن است بخواهید گزینه های Keep IMG SRC و Use Lazysizes را نیز بررسی کنید. اولی تصویر اصلی را در src نگه می دارد تا بتواند موتورهای جستجوی من (و سایر خدمات) را ببیند. با این حال برای دستگاه های رتینا به این معنی است که تصاویر ممکن است دو بار بارگذاری شوند (تصویر معمولی و سپس تصویر رتینا). Lazysize وارد می‌شود و تنها زمانی فایل‌های رتینا را بارگذاری می‌کند که بازدیدکننده واقعاً به آن تصویر نزدیک‌ تر شود.
2. تصاویر ریسپانسیو: این فقط با وردپرس از نسخه 4.4 کار می کند. از این نسخه وردپرس، src-set به طور خودکار برای تصاویر موجود در پست ها ایجاد می شود و افزونه تصاویر Retina را در آن اضافه می کند. اساساً تجزیه و تحلیل انجام شده توسط PictureFill (بالا) نادیده گرفته می شود، که می تواند عملکرد را افزایش دهد (اما نه آنقدر که به هر حال همه ما از کش استفاده می کنیم). این گزینه باید روی PictureFill فقط در صورتی انتخاب شود که تم شما بسیار خوب ساخته شده باشد، اما صادقانه بگویم من نمونه‌هایی از تم و نصب‌ هایی که به خوبی از باکس 100% Retina فقط با این گزینه کار می‌کنند ندارم.
3. Retina.js: روش Retina JS محلول 100% JS است. HTML تصاویر معمولی را بارگیری می کند، سپس اگر دستگاه رتینا تشخیص داده شود، تصاویر رتینا بارگذاری می شوند. تصاویر دو بار بارگذاری می‌شوند، سپس به تعداد عکس‌ها درخواست می‌شوند (برای بررسی وجود فایل‌های رتینا). برای عملکرد بهترین نیست اما وحشتناک هم نیست. این روش توسط بسیاری از وب سایت های بزرگ در اینترنت مانند اپل استفاده می شود.
4. IMG بازنویسی: روش IMG Rewrite تگ های SRC تصاویر را در لحظه بازنویسی هنگامی که یک دستگاه شبکیه تشخیص داده می شود، بازنویسی می کند. با این حال، از آنجایی که HTML بازنویسی شده است، این روش به خوبی با کش بازی نمی کند.
5. تصاویر رتینا: این روش نیز بسیار شسته و رفته است، اما احتمالاً باید یک کاربر geeky باشید. این افزونه htaccess شما را برای این روش تغییر می‌دهد تا درخواست‌ های بارگیری فایل‌ها را مدیریت کند. در سمت بازدید کننده همه تصاویر یکسان به نظر می رسند، هرگز پسوند @2x وجود نخواهد داشت. فایل ارسال شده توسط سرور به دستگاه بستگی دارد. این یک راه حل منظم است اما برای همه مناسب نیست زیرا ممکن است نیاز به آزمایش و گاهی اوقات اشکال زدایی داشته باشد. همچنین با CDN کار نمی کند.

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

سوالات متداول افزونه تصاویر پرفکت پرمیوم | Meow Perfect Images Pro

• این افزونه چه کاری انجام می دهد؟ این فایل های تصویری مورد نیاز دستگاه های رتینا را ایجاد می کند. در صورتی که وضوح تصاویر اصلی به اندازه کافی بالا نباشد، هشداری را در کتابخانه رسانه خواهید دید که در آن قادر خواهید بود تصاویر بزرگتر را دوباره آپلود کنید، سپس افزونه دستگاه های مختلف را می شناسد و تصاویر مورد نیاز را بر اساس آن ارسال می کند.
• تصاویر رتینا چیست؟ تصاویر جدید از همان نام فایل‌ های اصلی شما استفاده می‌کنند و یک رشته “@2x” درست قبل از برنامه افزودنی اضافه شده است. به عنوان مثال، اگر یک فایل Gundam-150×150.jpg دارید، یک Gundam-150×150@2x.jpg جدید ایجاد می شود، اندازه آن دو برابر خواهد شد. این نامگذاری در واقع از اپل آمده است.
• آیا می توانم همه تصاویر رتینا را به طور همزمان برای کل کتابخانه رسانه خود ایجاد کنم؟ بله، صفحه داشبورد رتینا (در منوی رسانه) را بررسی کنید.
• آیا تصاویر بهینه سازی یا کاهش حجم می شوند؟ خیر، تصاویر از طریق فرآیند استاندارد وردپرس ایجاد می شوند.
• آیا برای سایر دستگاه های با DPI بالا کار می کند؟ بله، البته اگر! 🙂