আমি কীভাবে একটি .png অস্পষ্ট ব্যাকগ্রাউন্ডকে একটি সংকুচিত .jpg তে রূপান্তর করব, আর্টফ্যাক্টগুলি প্রবর্তন না করে?

Question

আমি বর্তমানে আমার ওয়েবসাইটের পটভূমির চিত্রের জন্য চিত্রের মানের সমস্যা নিয়ে কাজ করছি।

আমার একটি বড় অস্পষ্ট ব্যাকগ্রাউন্ড চিত্র রয়েছে যা আমি ব্যবহার করতে চাই তবে ওয়েবসাইটটির আকারে এটি যতটা সম্ভব ছোট হতে চাই।

এটি সর্বোচ্চ মানের (পিএনজি) রাখার জন্য এটি প্রায় 200 কেবি।

আমি এটিকে জেপিজি হিসাবে প্রায় 100 কিলোবাইটে নামতে পারি তবে মানটি হ্রাস পেয়েছে যা প্রত্যাশিত তবে লিনিয়ারের চারপাশে ভয়ঙ্কর চেহারা লাইন রয়েছে যা এটি ভয়ঙ্কর দেখায়।

এই পিএনজিটিকে জেপিজিতে রূপান্তর করার কোনও উপায় আছে তবে চিত্রটিকে এই ত্রুটিগুলি থেকে আটকাতে পারে?

চিত্রগুলি এখানে:

পিএনজি:

জেপিজি (100%) গুণমান:

Comments

এই চিত্রটির মাত্রা কী কী?

— মিঃ হোয়েট

এই দিন এবং যুগে 200kb খুব বড়?

— শনিবারে

মনে হচ্ছে ছবিটি সংকোচনের জন্য আমি যে সরঞ্জামটি ব্যবহার করেছি তা ক্ষয়ক্ষতিহীন ছিল না তবে ক্ষতিকারক ছিল (tinypng.com)। এই কারণেই সংকুচিত হয়ে png ভয়ঙ্কর হয়েছিল। যাইহোক আপনার সমস্ত উত্তর সাহায্য করেছে। ধন্যবাদ!

— আকি

@ স্যাটার্নসই হ্যাঁ, একটি অ-গুরুত্বপূর্ণ চিত্রের জন্য এটি একেবারে। শুধু মোবাইল দর্শকদের কথা ভাবুন। প্রয়োজনীয় চিত্রগুলির জন্য, অবশ্যই এটি ঠিক আছে।

— Kjeld Schmidt

মোবাইলের জন্য আপনি কি ব্যবহার বিবেচনা করবেন না .SVG? যেহেতু তারা ক্ষুদ্র

— শনিবার

Answer 1

জেপিইজি হ্রাসহীন সংকোচনের নয়

কোন JPEG কম্প্রেশন হয় , এমনকি যখন 100% গুণমানে সেট করতে লজি কম্প্রেশন বিবেচিত আপনি কিছু মানের ক্ষতি। এই কারণেই ইউআই ইন্টারফেস এবং ব্যাকগ্রাউন্ডের মতো সাধারণ গ্রাফিক্সের জন্য পিএনজি-র মতো লসলেস বিন্যাসটি ব্যবহার করা ভাল better

২০১৪ / ২০১৫ এ 200 কেবি এত বড় নয়

যদিও পটভূমির আকার যথাসম্ভব হ্রাস করার ধারণা হবে তবে এটি উল্লেখ করা গুরুত্বপূর্ণ যে 200kb বেশিরভাগ ব্রডব্যান্ড সংযোগের জন্য এত বড় নয়। আপনি CSS মিডিয়া ক্যোয়ারী ব্যবহার করে মোবাইল এবং ট্যাবলেটগুলির জন্য আলাদা সংস্করণ সরবরাহ করতে পারেন ।

একটি পিএনজি ফাইল আরও ছোট করা

ফটোশপ এবং অন্যান্য পেইন্ট প্যাকেজগুলি স্ট্যান্ডার্ড পিএনজি সংকোচনের ব্যবহার করে, আপনি সম্ভবত পিএনজিপিটিমাইজার বা ইয়াহুর অনলাইন পরিষেবা স্মাশ ইট ব্যবহার করে সেই 200 কেবি কমিয়ে আনতে পারবেন । ফাইলের আকারকে আরও কমিয়ে আনলে মানটি হ্রাসহীন ফর্ম্যাট হিসাবে হ্রাস পাবে না ... এটি কোডটিকে আরও কমিয়ে আনতে প্রাথমিকভাবে অনুকূলিত করে, একটি জিপ বা আরএআর ফাইলের সাথে তুলনা করে, এই ফাইলগুলিকে সংক্ষেপ করে তবে সামগ্রীর মানকে হ্রাস করে না।

স্ট্রিপ গ্রেডিয়েন্ট ব্যবহার করে বিবেচনা করা

আর একটি সম্ভাব্য সমাধান হতে পারে যে আপনি পাতলা পিএনজি গ্রেডিয়েন্ট ব্যবহার করেন যা 1px জুড়ে এবং তারপরে পৃষ্ঠার উচ্চতা, আপনি এটি ব্যবহার করে এর সদৃশ করে ফেলতে পারেন background-repeat, এমনকি আপনি সিএসএস ব্যবহার করে আপনার জন্য গ্রেডিয়েন্ট জেনারেটর হিসাবে বিবেচনা করতে পারেন, তবে অবশ্যই আপনার সীমিত নয় ছায়া এবং অন্যান্য টুইটগুলি ব্যবহার করতে সক্ষম হওয়া।

Comments

এই পিএনজিটি আতশবাজি দিয়ে তৈরি এবং এতে অল্প পরিমাণে "ক্রাফ্ট" রয়েছে। pngcrushএবং অনুরূপ প্রোগ্রামগুলি অবশ্যই ফাইলটিকে আরও ছোট করতে পারে।

— usr2564301

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

— দামিয়ান ইয়ারিক

Answer 2

এটি সম্ভবত আপনার প্রশ্নের উত্তর দেয় না। কিছু সম্ভাব্য বিকল্প ...

পরিবর্তে আপনি সিএসএস বিবেচনা করেছেন:

background: linear-gradient(45deg, #3d667c, #1d283e);

অথবা সম্ভবত আপনি এসভিজি বেস 64 কৌশলটি ব্যবহার করতে পারেন ( এখানে জেনারেটরের সরঞ্জাম ):

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1 1" preserveAspectRatio="none"><linearGradient id="g932" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%"><stop stop-color="#3D667C" offset="0"/><stop stop-color="#1D283E" offset="1"/></linearGradient><rect x="0" y="0" width="1" height="1" fill="url(#g932)" /></svg>

background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc5MzIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzNENjY3QyIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzFEMjgzRSIgb2Zmc2V0PSIxIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzkzMikiIC8+Cjwvc3ZnPg==);

আপনি কি আরও ছোট পিএনজি ব্যবহার করে ব্রাউজারের নেটিভ আপ-স্কেলিং অ্যালগরিদমকে এটি বাড়ানোর অনুমতি দিয়েছেন? এটি ফাইলের আকার হ্রাস করার পাশাপাশি জেপিজি শিল্পকলাগুলিও মুছে ফেলতে পারে।

Answer 3

আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি ক্রেকেন.আইওও পরীক্ষা করে দেখুন , তাদের একটি চিত্র অপ্টিমাইজার রয়েছে। আপনার টপিকের চিত্রগুলি 45% আকারে কমে যায়, চোখের কাছে দৃশ্যমান না হয়ে!

আপনি কেবল CSS ব্যবহার করতে পারেন, রঙিনজিলায় সমস্ত ব্রাউজারের জন্য সঠিক সিএসএস তৈরির জন্য একটি দুর্দান্ত সরঞ্জাম রয়েছে।

যদি আপনি গ্রেডিয়েন্ট চিত্রের সাথে ম্রোয়াকে স্বাচ্ছন্দ্যবোধ করেন, রঙটি ফেলে দিন, এটি কালো এবং সাদা করুন, তবে ডিভ / বডি / এলিমেন্টটিকে এর মতো পটভূমি দিন:

background: blue url('images/gradient.png')

Answer 4

জিম্পের মতো কিছু চিত্র সম্পাদক আপনাকে একটি জেপিগ সংরক্ষণ করার সময় স্মুথিং পাশাপাশি কন্ট্র্রেশন নিয়ন্ত্রণ করার অনুমতি দেয়।

স্মুথিং: স্মুথিং অপশনটি শূন্য নয় এমন মানের সাথে সেট করা চিত্রটিকে কিছুটা মসৃণ করবে। এটি কম্প্রেশন থেকে अस्पष्ट শৈল্পিকাগুলি হ্রাস করে এবং সংক্ষেপণে সহায়তা করে। 0.10-0.15 এর একটি সেটিং প্রারম্ভিক প্রান্তগুলি ছাড়াই শৈল্পিকাগুলির একটি ভাল অংশ সরিয়ে দেয়।

http://en.wikibooks.org/wiki/GIMP/Saving_as_JPEG

সাবসাম্পলিংটি নিয়ন্ত্রণ করে আপনি শৈল্পিকাগুলি হ্রাস করতেও সক্ষম হতে পারেন

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

http://www.ampsoft.net/webdesign-l/jpeg-compression.html

Answer 5

ব্যান্ডিং কমানোর জন্য শব্দ যোগ করার চেষ্টা করুন:

ফটোশপ:

1. নতুন স্তর তৈরি করুন।
2. যান: Image > Fill... >এবং এই মানগুলি ব্যবহার করুন:

3. স্তর এর মিশ্রণ মোড পরিবর্তন ওভারলে
4. যান: Filter > Noise > Add Noise... >। এই মানগুলি আমার পক্ষে ভালভাবে কাজ করেছে:

5. আপনার পছন্দ অনুসারে স্তরটির অস্বচ্ছতা সামঞ্জস্য করুন। 22% ছিল এক ধরণের ঠিক আছে এবং ফলস্বরূপ JPG হ'ল:

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

আরও একটি পরামর্শ:

আপনি যদি শব্দটি যোগ করতে না চান, আপনি এসআরজিবি রঙের জায়গাতে যে কোনও জায়গায় কাজ করছেন তা নিশ্চিত করার চেষ্টা করুন, যা মনিটরের পর্দার (কম ব্যান্ডিং) সবচেয়ে ধনীতম স্বরগ্রাম সরবরাহ করে।

Comments

আমি আমার ছবিতে কিছু রঙ পরিবর্তন দেখতে পাচ্ছি ... আমি অনুমান করি যে এটি রঙিন প্রোফাইল সম্পর্কে কিছু কারণ এই পদ্ধতিটি শিল্পকর্মের রঙকে প্রভাবিত করবে না।

— ellockie