ব্রাউজারের কার্যকারিতা উন্নত করতে চিত্রের মাত্রা নির্দিষ্ট করে


10

আমি সম্প্রতি Google বিকাশকারী সরঞ্জামগুলি ব্যবহার করে আমার ওয়েবসাইটে একটি অডিট চালিয়েছি। আমার চিত্রগুলি সমস্ত একই আকারের (500 অনুভূমিক 300 লম্বালম্বি পিক্সেল) তাই আমি ভেবেছিলাম ছবিটির আকারের বৈশিষ্ট্যগুলি যদি আমি ইতিমধ্যে সঠিক আকারের হয় তবে এটি চিত্রের আকার গণনা করার দরকার পড়েনি তবে ভাল হত।

নেটওয়ার্কিং ব্যবহারের অধীনে, চিত্রের মাত্রা উল্লেখ করুন যা আমি নিম্নলিখিতটি দেখছি

A width and height should be specified for all images in order to speed up 
page display. The following image(s) are missing a width and/or height:

আমি এখন দ্বিধান্বিত. আমি ইতিমধ্যে আমার চিত্রগুলি প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি যুক্ত করব, যদিও তারা ইতিমধ্যে সঠিক আকার? এটি নিরর্থক বলে মনে হচ্ছে।

উত্তর:


10

ব্রাউজারগুলি সমান্তরালভাবে ডেটা ডাউনলোড করে এবং যত তাড়াতাড়ি সম্ভব পৃষ্ঠাটি রেন্ডারিং শুরু করার চেষ্টা করে।

আপনি যদি আকারটি নির্দিষ্ট না করেন তবে চিত্র ডাউনলোড সম্পূর্ণরূপে শেষ হওয়ার পরে পর্যন্ত ব্রাউজারটির কোনও ধারণা নেই যে চিত্রটি কত বড় হতে চলেছে।

এই বিলম্বটি ব্রাউজারটিকে লেআউটটিকে পুনরায় রঙ করতে বা পুনরায় প্রতিস্থাপন করতে বাধ্য করে - পৃষ্ঠা লোডের সময়টি বিলম্ব করে।

এই সমস্যাটি সহ আরও বেশি চিত্র - ধীরে ধীরে পৃষ্ঠাটি লোড হবে।

আপনি যদি এইচটিএমএল বা সিএসএসে চিত্রের মাপ নির্দিষ্ট করে থাকেন তবে ব্রাউজারটি সামগ্রীর পুনরায় রঙ এবং পুনরায় প্রতিস্থাপন এড়াতে পারে।

এ কারণে আপনার সর্বদা চিত্রের আকার নির্দিষ্ট করা উচিত। গুগলের এ সম্পর্কে কিছু টিপস রয়েছে।

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

ব্রাউজারের রেন্ডারিং প্রক্রিয়াটির জন্য আরও দেখুন: http://taligarsiel.com/Projects/howbrowserswork1.htm

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


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

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

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

1
আমি লোকদের সর্বদা আশ্বাসে কিছু করতে বলতে বলতে চাই তারা এটি কমপক্ষে ৮০% সময় করে। :)
জেফাত্রকাইদ

1
এই উত্তর এখনও বৈধ? গুগল তাদের পেজস্পিড সাইট থেকে প্রস্তাবটি বাদ দিয়েছে বলে মনে হচ্ছে।
ডেভিড আইক

5

প্রতিক্রিয়াশীল ডিজাইন সাধারণত কোনও প্রস্থ বা উচ্চতার বৈশিষ্ট্য ব্যবহার করে না

গুগল বিকাশ সরঞ্জামগুলি গাইড এবং আপনার সাইটে আপনার পড়া সমস্ত কিছুই প্রয়োগ করার দরকার নেই, আসলে কিছু জিনিস পুরানো। বেশিরভাগ প্রতিক্রিয়াশীল ওয়েবসাইটগুলি ব্যবহার করে না widthবা heightকারণ তারা চিত্রগুলি পর্দার আকারের সাথে খাপ খাইয়ে নিতে চায় এবং নির্দিষ্ট প্রস্থ এবং উচ্চতা ব্যবহার করে <img>যা ব্যবহারকারীর অভিজ্ঞতা হ্রাস করবে এবং গুগল এটিকে অন্যতম গুরুত্বপূর্ণ কারণ হিসাবে ঘোষণা করেছে।

সিএসএস ওয়ার্কারআউন্ড

আপনি প্রস্থ এবং উচ্চতা সহ একটি ব্লক স্তর উপাদান ব্যবহার করতে বেছে নিতে পারেন, ব্যক্তিগতভাবে আমি একটি ব্যবহার করব না তবে ব্লক স্তর সম্পর্কে গুগল যা বলেছে তা এখানে।

চিত্রের উপাদান বা ব্লক-স্তরের পিতামাতার উপর মাত্রা নির্দিষ্ট করার বিষয়ে নিশ্চিত হন উপাদানটি নিজেই, বা একটি ব্লক-স্তরের পিতামাতার উপর মাত্রা নির্ধারণ করতে ভুলবেন না। পিতামাতারা যদি ব্লক-স্তর না করে থাকে তবে মাত্রা এড়ানো হবে। কোনও পূর্বপুরুষের উপর তাত্পর্য স্থাপন করবেন না যা তাত্ক্ষণিক পিতামাতার নয়।

আমি মনে করি এটি দেখতে কিছুটা এমন দেখাবে:

স্ট্যাটিক ডিজাইন .ic {width:500px;height:500px;}

প্রতিক্রিয়াশীল নকশা:

@media only screen and (max-width: 40em){.ic{width:1px;height:1px;}} Mobiles
@media only screen and (min-width: 40.063em){.ic{width:1px;height:1px;}} Tablets
@media only screen and (min-width: 40.063em) and (max-width: 64em){.ic{width:1px;height:1px;}} Small Screens
@media only screen and (min-width: 64.063em){.ic{width:1px;height:1px;}} Large Screens

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


আমি এতটা নিশ্চিত নই যে আপনি প্রস্থ / উচ্চতার তথ্য ব্যবহার করেন না তবে তথ্যটি ভিউপোর্টের সাথে সম্পর্কিত?
জেফাত্রকাইদ

max-width:100%;প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করার সময় আপনি সাধারণত সিএসএসে ব্যবহার করেন। উচ্চতা এবং প্রস্থ ব্যবহার করা তরল উত্সাহ এবং ডাউন স্কেলিং অক্ষম করবে
সাইমন হাইটার

এটি কীভাবে চিত্রকর্মকে প্রভাবিত করে বা বিষয়বস্তুর পুনরুদ্ধার করে? আমি অভ্যন্তরীণভাবে ধরে নেব ব্রাউজারটি কেবল এই আপেক্ষিক পরিমাণটিকে একটি নির্দিষ্ট আকারে অনুবাদ করতে পারে যাতে আপনাকে পুনরায় রঙ করতে হবে না।
জেফাত্রকাইদ

2

আমি ঠিক ওয়ার্ডপ্রেস স্ট্যাক এক্সচেঞ্জে অনুরূপ প্রশ্নের উত্তর দিয়েছি । এটি এখানে পুনরায় পোস্ট করা হচ্ছে (প্রশাসক / মডারেটর: যদি এটি অনুমোদিত না হয় তবে আমাকে সহায়তা করার সঠিক উপায়টি জানান)।

আসলে এর অর্থ এই নয় যে এইচটিএমএলে আপনাকে প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে হবে। এর অর্থ যা হ'ল তা হল আপনার যথাযথ স্থান সংরক্ষণ করা উচিত এবং যখন চিত্রটি লোড করা হয়, ব্রাউজারটি পৃষ্ঠাটি রিফ্লো এবং পুনরায় রঙ করতে হয় না।

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

বেশিরভাগ সময়, উভয় প্রস্থ ব্যবহার করে এবং max-width:100কাজটি করবে, তবে স্ম্যাশিং ম্যাগাজিনের এই পোস্টটিতে একটি আকর্ষণীয় কৌশল রয়েছে: সর্বাধিক প্রস্থ ব্যবহারের পরিবর্তে: 100%, আপনি প্যাডিং-বটম হ্যাক ব্যবহার করতে পারেন :

"কৌশলটি দিয়ে আমরা উচ্চতাটিকে প্রস্থের সাথে সম্পর্কিত হিসাবে একটি পরিমাপ হিসাবে সংজ্ঞায়িত করি Pad প্যাডিং এবং মার্জিনের এমন অন্তর্জাতীয় বৈশিষ্ট্য রয়েছে এবং আমরা এগুলিকে এমন উপাদানগুলির জন্য অনুপাতের অনুপাত তৈরি করতে ব্যবহার করতে পারি Because কারণ প্যাডিংয়ের এই ক্ষমতা রয়েছে has , আমরা কোনও মৌলের প্রস্থের সাথে সামঞ্জস্য রাখতে প্যাডিং-নীচে সেট করতে পারি we যদি আমরা উচ্চতাও 0 হতে নির্ধারণ করি তবে আমরা যা চাই তা পাবো [

পরবর্তী পদক্ষেপটি কোনও ধারকটির ভিতরে একটি চিত্র স্থাপন করা এবং এটি ধারকটি পূরণ করে তা নিশ্চিত করা। এটি করার জন্য, আমাদের ঠিক মতো ধারকটির ভিতরে চিত্রটি স্থাপন করতে হবে: "

.img-container {
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    background-color: black;
}

.img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

1

প্রক্রিয়াটি এরকম কিছু হয়:

  1. html ফাইলটি পড়ুন
  2. .html ফাইল শিরোনাম থেকে, .css, .js ফাইল পড়ুন (.js এর পরে .css হওয়া উচিত ...)
  3. পৃষ্ঠা থেকে img এবং স্ক্রিপ্ট পড়ুন

সুতরাং, ইমেজ ট্যাগগুলি "দেরী" পড়েন। তবে আপনার পৃষ্ঠার ফর্ম্যাটিং গণনা করার জন্য, চিত্রটির আকার থাকা ভাল জিনিস (অন্যথায় ব্রাউজারগুলি 1x1, 25x25 এর মতো একটি "এলোমেলো" আকার ব্যবহার করে ... ব্রাউজারটি যা প্রোগ্রাম করেছে তা যাই হোক না কেন))

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.