ওয়ার্ডপ্রেস ইমেজগুলি ঝাপসা - কেন এটি ব্যাখ্যা করে

ইমেজ আপনার ওয়েবসাইট শোভাকর অনুমিত হয়. ঝাপসা ছবি বিপরীত কাজ.

আপনার ওয়ার্ডপ্রেস ইমেজ অস্পষ্ট হলে, একটি সমাধান প্রয়োজন খুঁজে পাওয়া যায়, এবং দ্রুত. এটি না হওয়া পর্যন্ত, আপনার ব্যবহারকারীরা অদৃশ্য হয়ে যাবে।

অসংখ্য উদাহরণের ফলে ছবি ঝাপসা হতে পারে কিন্তু খুব কমই এটি শুধুমাত্র ওয়ার্ডপ্রেসের ডিফল্ট সেটিংসের সাথে করা হয়।

প্রায়শই, এটি হয় কারণ আসল চিত্রের আকার এটি হওয়া উচিত তার চেয়ে ছোট ছিল।

যেকোনো অনলাইন কন্টেন্ট ম্যানেজমেন্ট সিস্টেমে, ব্যবহারকারীর স্ক্রিনের আকারের সাথে মেলে ছবির আকার পরিবর্তন করা হয়।

ছবির মানের সমস্যা মোবাইলের চেয়ে ডেস্কটপে বেশি হয়।

কারণ হল যে ডেস্কটপ ভিউতে বড় স্ক্রীনের মাপ সবচেয়ে ছোট ছবিগুলিকে স্ক্রিনের পূর্ণ আকারে উড়িয়ে দেওয়ার অনুমতি দেয়।

যখন আপনি লক্ষ্য করেন যে আপনার ছবিগুলি অস্পষ্ট, মোবাইল ভিউতে স্যুইচ করুন এবং আপনি সম্ভবত দেখতে পাবেন যে এটি ততটা ঝাপসা নয়৷ এটি প্রতিক্রিয়াশীল ওয়েব ডিজাইনের নেতিবাচক দিক।

ওয়ার্ডপ্রেস ইমেজ ঝাপসা

WP-তে খারাপ-মানের চিত্রের দুটি সাধারণ কারণ হল মিডিয়া ফাইলগুলি আপলোড করা যা গুণমানের জন্য সম্পাদনা করা হয়নি বা আপনার থিম যা প্রদর্শন করতে পারে তার থেকে ভিন্ন আকার আপলোড করা। ইমেজ এডিটিং ব্যতীত, যখন ইমেজটি বড় পর্দায় ফিট করার জন্য প্রসারিত করা হয় তখন ক্ষুদ্রতম অসঙ্গতিটি প্রসারিত হয়।

আপনার থিমের ডিফল্ট আকার খুঁজুন

প্রতিটি ওয়ার্ডপ্রেস থিমে functions.php ফাইলে কোড করা ডিফল্ট সাইজিং নিয়ম থাকে।

আপনার থিম এডিটরে যান, functions.php ফাইলটি খুলুন এবং কাস্টম চিত্রের আকারের জন্য কোডটি দেখুন।

যে কোডটি খুঁজতে হবে তা হল 'ছবির আকার যোগ করুন'।

এটা এই মত হবে

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'gridme-1222w-autoh-image', 1222, 9999, false );
add_image_size( 'gridme-922w-autoh-image', 922, 9999, false );
add_image_size( 'gridme-480w-360h-image', 480, 360, true );
}

উপরের নমুনা কোডে, এটি তিনটি চিত্রের আকার দেখায়, যার মধ্যে দুটি মিথ্যা সেট করা হয়েছে এবং চূড়ান্তটি '480, 360, সত্য' হিসাবে সেট করা হয়েছে।

ছবির আকারগুলিকে 'মিথ্যা' হিসাবে সেট করা মানে সেই আকারগুলি প্রয়োগ করা হবে না। চিত্রের আকারগুলিকে 'সত্য'-এ সেট করা রিসাইজ করার নিয়মগুলি প্রয়োগ করবে।

যখন আকারের নিয়মগুলি উচ্চতা বা প্রস্থ প্রসারিত করার জন্য সেট করা হয়, তখন ফলাফলটি অস্পষ্টতা।

যদি আপনার থিম স্বয়ংক্রিয়ভাবে চিত্রের আকার বড় করে, তাহলে সেই ক্রিয়াটি নিষ্ক্রিয় করতে আপনার থিম functions.php ফাইলে 'সত্য' থেকে 'মিথ্যা' পরিবর্তন করুন।

প্রতিক্রিয়াশীল ওয়েব ডিজাইনের কারণে WP থিমগুলির বিশাল সংখ্যাগরিষ্ঠতা আর এটি করে না।

প্রাক-2012 যুগে, মোবাইল ওয়েব ডিজাইন কিছুটা মূলধারায় পরিণত হওয়ার আগে, এই স্বয়ংক্রিয় আকারের নিয়মগুলি WP বিকাশকারী সম্প্রদায়ে অপ্রচলিত হয়ে পড়েছিল।

তবুও, পুরানো থিমগুলিতে, এটা সম্ভব যে আপনার থিম কোড বর্তমান ওয়েব ডেভেলপমেন্ট মানগুলির জন্য পুরানো। যখন এটি হয়, স্বয়ংক্রিয় আকারের নিয়মগুলিকে 'মিথ্যা' তে সেট করুন।

সেরা টিপ

সঠিক আকার আপলোড করে ঝাপসা ছবি এড়িয়ে চলুন। যদি তা সম্ভব না হয়, সবচেয়ে বড় ইমেজ ফাইল আপলোড করুন এবং ওয়ার্ডপ্রেসকে সঙ্কুচিত করতে দিন।

অস্পষ্টতা ঘটে যখন আপলোড করা ছবিগুলি প্রদর্শিত আকারের চেয়ে ছোট হয়৷ একটি ছবিকে বড় করার চেয়ে সঙ্কুচিত করা ভালো।

আপনি যখন একটি ছোট ইমেজ ফাইল বড় করেন, তখনই ওয়ার্ডপ্রেসে ছবিগুলি ঝাপসা হয়ে যায়। এটি একটি ছোট স্কেলে পিক্সেলেশন করে, বড়। এইভাবে, আরো সুস্পষ্ট.

থিম পরিবর্তনের পর ওয়ার্ডপ্রেস ইমেজগুলো এখন ঝাপসা

সমস্ত ওয়ার্ডপ্রেস থিম ভিন্নভাবে কোড করা হয়। প্রতিটি ছবির জন্য বিভিন্ন ব্রেকপয়েন্ট আছে. আপনি আপনার ইমেজ গ্যালারি সেটিংসে যা সেট করেন তা সবসময় একটি WordPress functions.php ফাইলে প্রতিফলিত হয় না।

একটি পার্শ্ব নোট হিসাবে: একটি ব্রেকপয়েন্ট হল সর্বাধিক প্রস্থ বা উচ্চতার বাইরে একটি চিত্রের আকার যা ব্যবহারকারীর স্ক্রিনে প্রদর্শিত হতে পারে।

আপনি যখন থিমগুলি পরিবর্তন করেন, সর্বাধিক চিত্রের আকারগুলি (সাধারণত) পরিবর্তিত হবে৷

উদাহরণস্বরূপ, মালিকের ব্লগ থিমে, পূর্ণ-আকারের চিত্রগুলির জন্য সর্বাধিক আকার হল 1210px x 642px৷ ওয়ার্ডপ্রেস টুয়েন্টি-টোয়েন্টি ওয়ান থিমে, আপনি এইচটিএমএল ব্যবহার করে আকারের নিয়ম সেট না করলে ছবিগুলি আপলোড করা আকার হিসাবে প্রদর্শিত হবে।

যদিও 'পোস্ট-থাম্বনেল' এর জন্য ডিফল্ট বিশাল। সেগুলি 1568, 9999-এ সেট করা হয়েছে... অন্য কথায়, আপনার আপলোড করা ছবির মতো বড়৷

এটি ইচ্ছাকৃত কারণ টোয়েন্টি-টোয়েন্টি-ওয়ান থিমটি একটি মিনিমালিস্ট ওয়ার্ডপ্রেস থিম।

থাম্বনেইলটি এমনভাবে দেখায় যেন এটি ব্লগ পোস্টের শিরোনাম, তার পরে নেভিগেশন সাইডবার ছাড়াই একটি একক কলাম লেআউট ব্যবহার করে বডি বিষয়বস্তু।

পোস্টের মধ্যে ঢোকানো ছবিগুলি হয় আপনার মিডিয়া লাইব্রেরিতে সেট করা ওয়ার্ডপ্রেস ডিফল্টগুলি ব্যবহার করে আপনার আপলোড করা মাপ হিসাবে দেখানো হবে বা রিসাইজ করা হবে৷

ইমেজ সংযুক্তি ডিফল্ট ওভাররাইড করার জন্য একটি ঝরঝরে WP কৌশল

ওয়ার্ডপ্রেসের একটি লুকানো পৃষ্ঠা রয়েছে যা আপনার অ্যাডমিন সাইডবারে দেখানো হয় না। yoursite.com/wp-admin/options.php এ গিয়ে এটি পাওয়া যায়।

পৃষ্ঠাটি অ্যাক্সেস করতে আপনাকে অবশ্যই একটি সাইট প্রশাসক হিসাবে লগ ইন করতে হবে৷ একবার পৃষ্ঠা লোড হয়ে গেলে, একটি বার্তা দেখায় যা আপনাকে বলছে

'সতর্কতা: এই পৃষ্ঠাটি আপনার সাইটের সেটিংসে সরাসরি অ্যাক্সেসের অনুমতি দেয়৷ আপনি এখানে জিনিস ভাঙতে পারেন. দয়া করে সাবধানে থাকবেন!”

ঐটা ঠিক. চিন্তা - ভাবনা. চিত্রগুলির জন্য এখানে পরিবর্তন করার একমাত্র সেটিং হল নীচের সেটিংস:

ছবির ডিফল্ট আকারকে 'পূর্ণ-আকারে' পরিবর্তন করলে আপনি আপনার মিডিয়া লাইব্রেরিতে আপলোড করা প্রতিটি ছবিকে আপনার পোস্টে পূর্ণ-আকারে দেখাবে৷

অন্যান্য বিকল্পগুলি উপলব্ধ হবে, তবে আপনি পোস্ট বা পৃষ্ঠাগুলিতে সন্নিবেশ করা প্রতিটি চিত্রের জন্য ম্যানুয়ালি সেট করতে হবে না৷ কোন সঙ্কুচিত বা প্রসারিত ইমেজ পর্দা ফিট!

ফটোগ্রাফি ত্রুটি

এটা সম্ভব যে ছবিগুলি ওয়ার্ডপ্রেসে আপলোড করার আগে অস্পষ্ট ছিল।

সাধারণত, একটি স্মার্টফোন থেকে একটি অনলাইন সম্পাদক বা একটি ডেস্কটপে একটি আসল ফটো আপলোড করা ভাল, চিত্র ফাইলটি পরিষ্কার করুন, তারপরে এটি ওয়ার্ডপ্রেসে আপলোড করুন৷

স্মার্টফোন ক্যামেরার সমস্যা হল ছোট স্ক্রিনে ছবিগুলো শালীন দেখায়, কিন্তু ওয়ার্ডপ্রেসে রাখলে এবং বড় স্ক্রিনে পূর্ণ আকারে দেখানো হলে অপূর্ণতাগুলো স্পষ্ট হয়ে যায়।

সেখানে থাকা সমস্ত ফুড ব্লগারদের জন্য, ধীর শাটারের গতি মোশন ব্লার করে এবং এর ফলে ছবিগুলি ঝাপসা হয়ে যায়। ওয়ার্ডপ্রেসে আপলোড করার আগে শাটার স্পিড বাড়ান এবং ফটো এডিট করুন।

ওয়ার্ডপ্রেস সিএমএস শুধুমাত্র ছবি প্রদর্শনের জন্য। ইমেজ সম্পাদনা কার্যকারিতা যোগ করার জন্য উপলব্ধ প্লাগইন আছে.

আপনি যদি সেই খরগোশের গর্তের নিচে যান, তবে সাইটের গতির সমস্যা সম্পর্কে সচেতন হন। তারা আপনার ওয়েবসাইট ধীর করতে পারে.

ইমেজের জন্য ওয়ার্ডপ্রেস প্লাগইনগুলির বিষয়ে, শুধুমাত্র অপরিহার্য হল একটি ইমেজ কম্প্রেশন প্লাগইন। আপনার ফাইলের আকার নির্বিশেষে, ইমেজ কম্প্রেশন ব্যান্ডউইথ সংরক্ষণ করে।

তারপরে আবার, আপনি যদি একটি ওয়ার্ডপ্রেস ওয়েবসাইট থেকে মুদ্রণযোগ্য বিক্রি বা প্রদান করেন, কম্প্রেশন ছবির গুণমান হ্রাস করবে।

অস্পষ্টতা এড়াতে ওয়ার্ডপ্রেসে আপলোড করার জন্য সঠিক চিত্রের আকার কী?

ছবির আকার আপনার পৃষ্ঠা এবং পোস্টের বিষয়বস্তুর প্রস্থের উপর নির্ভর করে।

আপনার WP থিম কি ব্যবহার করে তা জানতে, আপনার ব্রাউজার ইন্সপেক্টর টুল ব্যবহার করুন। বেশিরভাগ একইভাবে কাজ করে - ডান-ক্লিক করুন, তারপর পরিদর্শন নির্বাচন করুন।

'প্রধান বডি কন্টেন্ট' বা অনুরূপ কিছু হিসাবে লেবেল করা কোডের অংশটি সন্ধান করুন। পরিদর্শকের বিভাগগুলিতে ক্লিক করা পৃষ্ঠায় উপাদানটিকে হাইলাইট করে।

আপনার ওয়েবপৃষ্ঠায়, পরিদর্শন মোডে থাকাকালীন, পৃষ্ঠার শীর্ষে দুটি সংখ্যা দেখাবে৷ প্রথমটি প্রস্থ, দ্বিতীয়টি উচ্চতা। উচ্চতার দিকে মনোযোগ দেবেন না কারণ এটি বিশাল হবে। এজন্য আপনাকে একটি ওয়েবপেজ স্ক্রোল করতে হবে।

আপনার প্রস্থ সীমিত। এই থিমে, পৃষ্ঠার প্রস্থ হল 990px। মনে রাখবেন যে এটি সাইডবার বাদ দিয়ে বিষয়বস্তু এলাকার জন্য।

আপনার যদি কোনো সাইডবার ছাড়া কাস্টম পৃষ্ঠা থাকে, তাহলে বিষয়বস্তুর এলাকা আরও প্রশস্ত হবে।

যখন আপনি আপনার থিমের প্রশস্ততম পৃষ্ঠাটির সর্বাধিক-প্রস্থ জানেন, আপলোড করার আগে সেই প্রস্থটিকে আপনার সর্বাধিক চিত্র আকার হিসাবে ব্যবহার করুন৷

কিভাবে আপনার থিম মাপসই ইমেজ পুনরায় আকার

উইন্ডোজ সিস্টেমে, আপনি ফটো অ্যাপ বা পেইন্ট ব্যবহার করতে পারেন। ম্যাক সিস্টেমে, আপনি প্রিভিউ বা ফটো ব্যবহার করে ফটোর আকার পরিবর্তন করতে পারেন। ক্রোমবুক ব্যবহারকারীরা গুগল ফটোর সাহায্যে ছবির আকার পরিবর্তন করতে পারেন।

আপনি যদি একটি স্মার্টফোনের মধ্যে সীমাবদ্ধ থাকেন, তাহলে অনলাইন ইমেজ এডিটিং টুল আপনার সঞ্চয় করুণা। কয়েকটি জনপ্রিয় পছন্দ হল পিক মাঙ্কি, ইমেজ রিসাইজার এবং অবশ্যই ক্যানভা।

ক্যানভা একটি ভাল পছন্দ কারণ আপনি একটি বিনামূল্যে অ্যাকাউন্ট তৈরি করতে পারেন, একটি কাস্টম আকারের চিত্র তৈরি করতে পারেন, সেটিংস আপনার অ্যাকাউন্টে সংরক্ষিত হবে, তারপর আপনি আপনার মিডিয়াকে তাদের ক্লাউডে আপলোড করতে পারেন, এটি একটি কাস্টম-আকারের ছবিতে ড্রপ করতে পারেন এবং এটি টেনে আনতে পারেন। আকার পরিবর্তন করতে যাতে এটি নিখুঁত ফিট করে।

jpg, বা png ডাউনলোড করুন, তারপর ওয়ার্ডপ্রেসে আপলোড করুন।

আপনার ডেস্কটপের ইমেজ এডিটর বা অনলাইন এডিটরে যদি ছবিটি ঝাপসা হয়, তাহলে এটি ওয়ার্ডপ্রেসে অস্পষ্ট হবে। আপলোড করার আগে ইমেজ এডিট করে অস্পষ্টতা ঠিক করুন।

একবার আপনার সার্ভারে একটি অস্পষ্ট ছবি, এটি অকেজো।

ঝাপসা ছবিটি মুছুন, তীক্ষ্ণতা বাড়ানোর জন্য আসলটি সম্পাদনা করুন, আপনার থিম প্রদর্শন করতে পারে এমন সর্বাধিক-প্রস্থে পুনরায় আকার দিন, বা গুণমানকে অবনমিত না করে আপনার ছবির সর্বাধিক-প্রস্থ বাড়বে।

সম্পাদিত ছবি আপলোড করুন এবং অস্পষ্টতা চলে যাবে।