OkayCMS-এর সমস্ত ছবি কিভাবে WebP-এ রূপান্তর করবেন

কেন OkayCMS? এর জন্য WebP ব্যবহার করা মূল্যবান

Webp ব্যবহার করলে Google Pagespeed Insights-এ "পরবর্তী প্রজন্মের ফর্ম্যাটে ছবি পরিবেশন করুন" সমস্যার সমাধান হয়।

সংক্ষেপে, পুরানো ফর্ম্যাটের (png এবং jpeg)-এর তুলনায় WebP ফাইলটিকে আরও ভালভাবে কম্প্রেস করে, অন্য সব জিনিস সমান - যার মানে এটি হোস্টিং-এ কম জায়গা নেয় এবং পৃষ্ঠাটি দেখার সময় ব্রাউজারে দ্রুত লোড হয়। p>

WebP বাস্তবায়ন Google দ্বারা সক্রিয়ভাবে প্রচার করা হয় - তারা এই ধরনের পরিসংখ্যান প্রদান করে:

• WebP ছবিগুলিকে PNG এর থেকে 26% ভালোভাবে সংকুচিত করে।
• WebP একই স্ট্রাকচারাল সাদৃশ্য সূচক (SSIM) এর সাথে JPEG এর চেয়ে ক্ষতিকারক চিত্রগুলিকে 25-34% বেশি সংকুচিত করে
• WebP শুধুমাত্র 22% এর আকার বৃদ্ধির সাথে ক্ষতিহীন স্বচ্ছতা (আলফা নামে পরিচিত) সমর্থন করে।

যদি ভিজিটরের ব্রাউজার WebP সমর্থন না করে, তাহলে CDN পুরানো ফর্ম্যাট (png/jpeg) ফিরিয়ে দেবে, কিন্তু সংকুচিত (ওয়েবের জন্য অপ্টিমাইজ করা)

ইমেজ কম্প্রেশন কি

ইমেজ অপ্টিমাইজেশান হল একটি গ্রাফিক ফাইলের বিশেষ প্রক্রিয়াকরণ যাতে ভিজ্যুয়াল মানের ক্ষতি না করে এর আকার ছোট করা যায়।

এই পদ্ধতিটি চালানোর জন্য, প্রচুর সংখ্যক মোটামুটি জটিল অ্যালগরিদম রয়েছে। যাইহোক, এগুলি সবই একই ভিত্তির উপর ভিত্তি করে - সেখানে সমস্ত পরিষেবা ডেটা (উদাহরণস্বরূপ, ফাইলটি সংরক্ষণ করে এমন প্রোগ্রামের নাম ইত্যাদি) অবশ্যই গ্রাফিক ফাইল থেকে মুছে ফেলতে হবে, এবং বিশেষ প্রোগ্রামগুলি ব্যবহার করে, মার্জ / মসৃণ অনুরূপ রং.

ফলে, আমরা একই চিত্র পাই, যা দৃশ্যত পরিবর্তিত হয়নি। যাইহোক, বাইটে এই ফাইলটির ভলিউম (ওজন) আসলটির চেয়ে অনেক কম হবে। যদি এই প্রক্রিয়াকরণটি সঠিকভাবে সম্পন্ন করা হয়, তবে চিত্রের গুণমান না হারিয়ে ইমেজ ফাইলটি 98% এ হ্রাস করা যেতে পারে।

এর মানে হল সাইটটির পৃষ্ঠাগুলিতে থাকা ছবিগুলি অপ্টিমাইজেশনের পরে অনেক গুণ দ্রুত লোড হবে৷

আপনার সাইটের জন্য ইমেজ অপ্টিমাইজ করবে কি

• ডিস্কের স্থান সংরক্ষণ করুন।
• পেজ লোড করার গতি বাড়ান।
• সর্বনিম্ন সার্ভার লোড।
• রূপান্তর বাড়ান।
• সার্চ ফলাফলের জন্য আরও ভালো সাইট র‌্যাঙ্কিং।

এটি প্রমাণিত হয়েছে যে ওয়েবসাইট ত্বরণ আচরণগত কারণগুলিকে উন্নত করতে পারে, সেইসাথে ওয়েবসাইট রূপান্তর বাড়াতে পারে (বিক্রয় বাড়াতে)। সাইটের পৃষ্ঠা যত বেশি লোড হবে, তত কম গ্রাহক সেখানে নির্দিষ্ট লক্ষ্য ক্রিয়া সম্পাদন করতে সক্ষম হবেন। ইন্টারনেটে আপনার সাইট যদি যথেষ্ট দ্রুত কাজ না করে, তাহলে আপনার সম্ভাব্য আয় মিস করার প্রতিটি সুযোগ রয়েছে। অনলাইন সম্পদের ত্বরণ রূপান্তরকে উন্নত করার সুযোগ দেবে এবং এর ফলে উল্লেখযোগ্যভাবে রাজস্ব বৃদ্ধি পাবে এবং আরও গ্রাহকদের আকর্ষণ করবে।

অপটিপিক সুবিধাগুলি

• কোন মাসিক পেমেন্ট নেই।
• সম্পূর্ণ অটোমেশন।
• বিনামূল্যে সংযোগ সহায়তা।
• সেবাটি সংযোগ করতে এবং ব্যবহার করতে, আপনার প্রোগ্রামিং বা প্রশাসনে বিশেষ দক্ষতার প্রয়োজন নেই।
• সিস্টেমটিতে ছবির আকারের উপর কোন সীমাবদ্ধতা নেই।
• বন্ধুত্বপূর্ণ প্রযুক্তিগত সহায়তা।

কিভাবে OkayCMS একটি সাইটের জন্য ছবি অপ্টিমাইজ করা যায়?

যেকোন সাইটের একটি পৃষ্ঠা প্রায়শই থাকে:

• ছবি;
• html-কোড (টেক্সট বিষয়বস্তু, লেআউট, মার্কআপ);
• ভিডিও;
• ব্রাউজার থেকে চলমান লজিক সহ জাভাস্ক্রিপ্ট স্ক্রিপ্ট;
• পৃষ্ঠা শৈলী সহ CSS ফাইল।

একটি ছবির মতো একটি আইটেম সাইটের পৃষ্ঠাগুলিতে পুরো ভলিউমের বেশিরভাগ অংশ দখল করে এবং পৃষ্ঠাগুলির "সবচেয়ে ভারী" অংশ। ছবিগুলির হ্রাস (অপ্টিমাইজেশান) নিঃসন্দেহে উল্লেখযোগ্যভাবে যেকোনো অনলাইন সংস্থান ডাউনলোড করা দ্রুততর করে তুলবে।

 

তদনুসারে, আপনি যদি চিত্রের আকার পরিবর্তন করেন (নিচে) তবে সাইটের সমস্ত পৃষ্ঠা অনেক দ্রুত লোড হতে শুরু করবে।

সাইটে থাকা ছবিগুলোকে কম্প্রেস করলে তাদের ভলিউম 75-98% কমানো সম্ভব হবে, তাদের ভিজ্যুয়াল কোয়ালিটি হারানো ছাড়াই।

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

; Automatically add files before PHP document.
; http://php.net/auto-prepend-file
auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php

# OptiPic CDN: insert it into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    resolver 8.8.8.8; # Google DNS
    set $cdn_host_value "cdn.optipic.io";
    set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value
    if ($arg_no_optipic) {
        set $from_optipic "no";
        set $cdn_host_value $host;
    }
    
    proxy_redirect     off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $cdn_host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://$cdn_host_value;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}

#---------------------------------------
# OptiPic CDN 
# Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module`
# Add new 'IfModule mod_rewrite.c' block or inject into exist one
# Get support: https://optipic.io/get-free-help/?cdn=1
<IfModule mod_rewrite.c>
    RewriteEngine On
    SSLProxyEngine On

    RewriteCond %{QUERY_STRING} !no_optipic=
    RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P]
</IfModule>
#----------------------------------------