ওয়েবসাইটগুলির জন্য স্বয়ংক্রিয় রেটিনা চিত্রগুলি

104

রেটিনা ডিসপ্লে সহ নতুন অ্যাপল ম্যাকবুক প্রো সহ আপনি যদি আপনার ওয়েবসাইটে একটি "স্ট্যান্ডার্ড" চিত্র সরবরাহ করেন তবে এটি কিছুটা अस्पष्ट হবে। সুতরাং আপনাকে একটি রেটিনা চিত্র সরবরাহ করতে হবে।

@2xআইওএসের মতো (অবজেক্টিভ-সি সহ) চিত্রগুলি স্বয়ংক্রিয়ভাবে স্যুইচ করার কোনও উপায় আছে কি ? আমি যা পেয়েছি তা হ'ল: মোবাইল এবং রেটিনা প্রদর্শনগুলিতে উচ্চ-রেজোলিউশন চিত্রগুলির জন্য সিএসএস , তবে আমি আশা করি যে আমার সমস্ত চিত্রগুলির জন্য সিএসএস বা জাভাস্ক্রিপ্ট ছাড়াই একটি স্বয়ংক্রিয় প্রক্রিয়া খুঁজে পেতে পারতাম ।

এটা কি সম্ভব?

আপডেট
আমি @ পল ডি ওয়েইটের প্রস্তাবিত এই আকর্ষণীয় নিবন্ধ এবং সেবাস্তিয়ানের সাথে সম্পর্কিত এটি সম্পর্কে একটি আকর্ষণীয় আলোচনার উপর জোর দেব ।

html  image  retina-display 
— jan267
সূত্র
6
— স্টিফান Bönnemann-Walenta
3
আপনি পিএইচপি এর সাথে সার্ভারের পক্ষে এটি করতে পারেন: retina-images.complexcompulsion.com
— 13:36
2
@ মাইক্রোয়ার্ড 82২ : ফটোগ্রাফিক চিত্রগুলির জন্য, ডান জবসিস পরামর্শ দিচ্ছেন যে আপনি নিজের ফাইলের আকারগুলি রেটিনা নন-ইমেজের চেয়ে বড় আকারের ব্যতীত সকলের কাছে ইমেজটিতে জেপিজি সংক্ষেপণের পরিমাণ বাড়িয়ে রেটিনা আকারের চিত্র সরবরাহ করতে পারেন can চিত্রটি হয় স্কেল-ডাউন বা রেটিনা ডিসপ্লেতে প্রদর্শিত হয় এর অর্থ প্রায়শই বোঝানো হয় যে সংকোচনের নিদর্শনগুলি দৃশ্যমান নয়।
— পল ডি ওয়েট
1
আসলে এটি ভুল নয় , তবে আমি ভাবছিলাম যে ব্যবহার করার কোনও কৌশল আছে কিনা । আইওএস এ এটি স্বয়ংক্রিয় ... তাই আমি এটি জিজ্ঞাসা করছি! :)
— jan267
2
নোট করুন যে "আকর্ষণীয় নিবন্ধটি প্রস্তাবিত" র লেখক এখানে কিছু বড় ভুল করেছেন যা এখানে বর্ণিত হয়েছে: স্লাইভ.অর্গ / টেস্ট / রেটিনা- রাইজ এইচটিএমএল - সুতরাং নিবন্ধটি লবণের একটি বড় শস্যের সাথে নিতে হবে।
— সেবাস্তিয়ান

উত্তর:

147

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

<img src="low-res.jpg" srcset="high-res.jpg 2x">

ব্রাউজার সমর্থন: http://caniuse.com/#search=srcset

অন্যান্য উৎস:

— ebuat3989
সূত্র
<img src = "LaunchAirportIcon.png" srcset = "LaunchAirportIcon@2x.png 2x">
— ম্যালহাল
7
এটি আর ওয়েবকিট নয়, এজ এবং ফায়ারফক্সও এটিকে সমর্থন করে। caniuse.com/#search=srcset - বর্তমানে বিশ্বব্যাপী ~ 64% ব্যবহারকারী। তারপরে অ্যাকাউন্টে বিবেচনা করুন যে খুব কম হাই-ডিপিআই ব্যবহারকারী অসমর্থিত ব্রাউজারগুলিতে (আইআই এবং পুরাতন অ্যান্ড্রয়েড) থাকবে এবং শেষ পর্যন্ত এটি ব্যর্থ-নিরাপদ - সমর্থন ছাড়াই ব্যবহারকারীরা কেবল একটি সাধারণ ডিপিআই চিত্র দেখতে পান। অবশ্যই এটি ব্যবহারের জন্য প্রস্তুত মনে হয়।
— অ্যান্ড্রুব
1
এছাড়াও, কোনও ডাবল লোডিং একটি বিশাল বৈভব নয়। এর অর্থ আপনি কখনই কারওর ব্যান্ডউইথ নষ্ট করবেন না।
— অ্যান্ড্রুব
আইই আবার ছোট হয়ে পড়ছে। তবে তা সত্ত্বেও, আমি @ অ্যান্ড্রুব এর সাথে একমত তার মন্তব্যের ভিত্তিতে আমি x2 সরবরাহ করছি srcতাই আইই / অপেরা সর্বদা উচ্চতর ডিপিআই সংস্করণটির জন্য অনুরোধ করবে will
— রিকি বয়েস
1
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি এই থ্রেডের জন্য এখন পর্যন্ত সবচেয়ে সহজ সমাধান।
— জুলিয়ান লে কপানেক
14

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

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

কিছু সমাধান / আলোচনা আমি উল্লেখ করেছি:

  • সিএসএস কৌশল (গ্রেডিয়েন্টস, বৃত্তাকার কোণ ইত্যাদি), এসভিজি এবং আইকন ফন্ট সহ যেখানেই সম্ভব ভেক্টর।
  • হাই রেজোলিউশন ("রেটিনা") ইমেজ পরিবেশন করা, তবে ইয়োভ ওয়েইসের পরামর্শ অনুসারে এগুলিকে আরও সংকুচিত করুন (জেপিজি গুণমান) , বা পল বোগের পরামর্শ অনুসারে মোবাইল নেটওয়ার্কগুলি সত্যই প্রয়োজনে (যেমন মোবাইল যখন) সংকোচিত হতে দিন ।
  • অভিযোজিত চিত্র , একটি (বেশিরভাগ) সার্ভার সাইড সমাধান। এটি স্ক্রিন রেজোলিউশন সংরক্ষণকারী একটি কুকি, একটি পিএইচপি স্ক্রিপ্ট থেকে চিত্রগুলি পরিবেশন করার জন্য কনফিগার করা একটি ওয়েব সার্ভার এবং কুকি পড়তে এবং উপযুক্ত চিত্রটি পরিবেশন করার জন্য স্ক্রিপ্টের নামযুক্ত স্ক্রিপের উপর ভিত্তি করে তৈরি।
  • স্ম্যাশিং ম্যাগাজিনে সম্ভাব্যতার একটি গুচ্ছ ভালভাবে বর্ণিত এবং আলোচিত ।
  • পল বোয়াগের একটি ভিডিওতে প্রস্তাবিত, রেটিনা প্রতিকৃতিটি কিছুটা মসৃণ করার জন্য মাত্র কিছুটা উচ্চতর রেজোলিউশন সরবরাহ করা ।
  • @ 1.5x কৌশল উপর একটি তালিকা ছাড়াও মূলত একই ধারণা।
  • অদূর ভবিষ্যতে, <picture>ট্যাগটি একটি ডাব্লু 3 সি ওয়ার্কিং গ্রুপ এবং এমনকি অ্যাপল দ্বারা সমর্থিত সমাধান হতে পারে ।
  • জ্যাক আর্কিবল্ড প্রস্তাবিত একটি জাভাস্ক্রিপ্ট কৌশল ।
  • স্মাগিং ম্যাগাজিন এবং সাধারণভাবে সমস্যা সম্পর্কিত বিভিন্ন কৌশল সম্পর্কিত একটি বিস্তৃত আলোচনা ।

অন্যান্য উত্তরগুলি যেমন দেখায়, আরও বেশি কৌশল রয়েছে - তবে সম্ভবত এখনও কোনও সেরা অনুশীলন নেই।

একটি জিনিস আমি অবাক করি তা হল কীভাবে সম্পর্কিত ডিভাইস (গুলি) উপলব্ধ না করে এই কয়েকটি কৌশল পরীক্ষা করা এবং ডিবাগ করা যায় ...

— bhell
সূত্র
11

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

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

— svachalek
সূত্র
আমি আপনার ইঙ্গিত পছন্দ! svgপুরানো ব্রাউজারগুলির সাথে একমাত্র সমস্যা ।
— jan267
15
এবং যেসব ক্ষেত্রে আপনার ফটোগ্রাফ রয়েছে
— বাউমর
আপনি যে চিত্রটি ব্যবহার করতে চান তার ভেক্টর সংস্করণ রয়েছে তবে এগুলি দুর্দান্ত provided তবে আমি বিশ্বাস করি না আপনি সাধারণ রাস্টার চিত্রগুলি এসভিজি হিসাবে সংরক্ষণ করতে পারবেন।
— চক লে বাট
সেই দিকটিতে রূপান্তর করার কোনও "ভাল" উপায় নেই, সুতরাং "যেখানে সম্ভব"। তবে ফটোগ্রাফি সাইটগুলি ব্যতীত আপনি সাধারণত আপনার শিল্প সম্পদ তৈরি করতে যাচ্ছেন তাই আমি তাদেরকে ভেক্টর হিসাবে করার পরামর্শ দিচ্ছি, যেগুলি যে কোনও রেজোলিউশনে সহজেই রাস্টার হিসাবে রূপান্তরিত হতে পারে।
— সুইচলেক
এসভিজি স্ক্রিন শটগুলির জন্য কাজ করে না (যেমন ইউআই বৈশিষ্ট্যগুলি ডকুমেন্ট করার সময়)।
— গ্রেগ ব্রাউন
9

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

এই সমস্ত সঙ্গে কৌশলটি আইই 8 সমর্থন পেতে হয়। এটি সহজেই ব্যাকগ্রাউন্ড-আকারটি করতে পারে না তাই বেস কেস (নন মোবাইল মিডিয়া ক্যোয়ারী) হতে হবে একটি সাধারণ, অ-স্কেলড আইকন। মিডিয়া ক্যোয়ারী তারপরে রেটিনার ক্ষেত্রে পরিচালনা করে এবং ব্যাকগ্রাউন্ড-আকারের শ্রেণিটি ব্যবহারের জন্য নিখরচ যেহেতু রেটিনা কখনই আইই 8 তে ব্যবহৃত হবে না।

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

ব্যবহারের নমুনা: 

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

আপনার দুটি ফাইল থাকা দরকার:

  • start_grey-97_12.png
  • start_grey-97_12@2x.png

যেখানে 2xফাইলটি রেটিনার জন্য ডাবল রেজোলিউশন।

— muzzamo
সূত্র
8

প্রত্যেককে কেবল রেটিনা চিত্র সরবরাহ করুন এবং চিত্রের উপাদানটির অভ্যন্তরে চিত্রটিকে অর্ধেক নেটিভ আকারে নিন। আপনার চিত্রটি 400pxপ্রশস্ত এবং লম্বা বলার মতো - কেবল চিত্রটির প্রস্থটি 200pxএটির মতো তীক্ষ্ণ দেখানোর জন্য নির্দিষ্ট করুন :

<img src="img.jpg" width="200px" height="200px" />

যদি আপনার চিত্র ফোটোগ্রাফিক হয় তবে আপনি সম্ভবত এটি আরও খারাপ দেখাচ্ছে না করে এটিতে জেপিজি সংকোচনতা বাড়িয়ে তুলতে পারেন, কারণ চিত্রটি প্রদর্শিত হলে জেপিজি সংক্ষেপণ চিত্রগুলি সম্ভবত দৃশ্যমান হবে না 2x: দেখুন http://blog.netvlies.nl/ ডিজাইন-interactie / অক্ষিপট-বিপ্লব /

— webdev
সূত্র
1
দান জবিসিস পরামর্শ দিয়েছেন যে ফটোগ্রাফিক চিত্রগুলির জন্য, এটির জন্য বড় আকারের ফাইলের আকারও তৈরি করতে হবে না
— পল ডি
আদর্শভাবে আপনার যদিও উচ্চতা নির্দিষ্ট করা উচিত, যাতে চিত্রটি ডাউনলোড হওয়ার আগে ব্রাউজারটি পৃষ্ঠাটি ছড়িয়ে দিতে পারে।
— পল ডি ওয়েট
8
আমি মনে করি না যে এটি প্রয়োজন না হলে আরও বড় এবং ভারী চিত্র ফাইল সরবরাহ করা একটি দুর্দান্ত ধারণা ...
— jan267
1
@ PaulD.Waite প্রথম জিনিস এবং ঠিক শেষের জন্য আকর্ষণীয়! :)
— jan267
2
@ পলডি.ওয়েট নোট করুন যে লিঙ্কযুক্ত নিবন্ধটির লেখক এখানে কিছু বড় ভুল করেছেন যা এখানে আলোচনা করা হয়েছে: স্লাইভ.আর / টেস্ট / রেটিনা- রাইজ এইচটিএমএল - সুতরাং নিবন্ধটি লবণের একটি বড় শস্যের সাথে নিতে হবে। বিশেষত "ডানদিকে অনাবৃত চিত্র" প্রকৃতপক্ষে পরিমাপযোগ্য এবং সুতরাং যার রেজোলিউশনটি ঠিক দ্বিগুণ করা হয়েছে তার বিপরীতে তুলনা করা যায় না (আপনার ব্রাউজারকে একটি নতুন উইন্ডোতে সঠিক চিত্রগুলি দেখানোর জন্য বলুন এবং আপনি দেখতে পাবেন যে আমি এবং এই অন্যান্য নিবন্ধটির লেখক মানে)
— সেবাস্তিয়ান
1

যদি এর ব্যাকগ্রাউন্ড চিত্রগুলি করার সহজ উপায় হ'ল:

    #image { background: url(image.png); }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           #image { background: url(image@2x.png); background-size: 50%; }
}

আর একটি সহজ উপায় হ'ল এই পদ্ধতিটি ব্যবহার করা:

কেবল প্রতিস্থাপন করুন:

<img src="image.jpg" alt="" width="200" height="100" />

সঙ্গে

<img src="image@2x.jpg" alt="" width="200" height="100" />
— SonnyP
সূত্র
1

আমি একাধিক রেজোলিউশন চিত্র সরবরাহ করার জন্য এই আকর্ষণীয় উপায়টি পেয়েছি।
এটি আসলে CSS ব্যবহার করে, এমন কিছু যা আমি এড়াতে চেয়েছিলাম এবং কেবল সাফারি এবং ক্রোমে কাজ করে।
আমি কথা বলছি image-set।

অ্যাপল ( এখানে ) সরবরাহিত একটি উদাহরণ এখানে :

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

আমি এই দুটি লিঙ্ক ভাগ করতে চাই:

— jan267
সূত্র
1

জেএসএফের সাহায্যে srcsetআপনি প্রতিটি ছবিতে যুক্ত করার ঝাপটায় সংরক্ষণ করতে একটি কাস্টম ফেসলেট ট্যাগ তৈরি করতে পারেন ।

আপনার মধ্যে আপনার taglib.xmlমতো কিছু থাকতে পারে:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

এবং আপনার ট্যাগটি এর মতো দেখতে পারে:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

যা ব্যবহার করা যেতে পারে:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="image@2x.jpg"/>
</html>

এবং রেন্ডার করবে:

<img src="image.jpg"
     srcset="image@2x.jpg 2x"/>
— জ্যাস্পার ডি ভ্রিজ
সূত্র
0

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

সুতরাং আমি একটি স্ক্রিপ্ট লিখেছিলাম যা এটি বিবেচনায় নিয়ে আসে, এটি পৃষ্ঠার নীচে এবং পুনরায় আকার সমাপ্তিতে আগুন লাগায়। প্রতিটি সময় পিক্সেল ঘনত্ব এবং আকারটি চিত্র গ্রহণ করে।

http://caracaldigital.com/retina-handling-code/

— কেগান 82
সূত্র
0

আপনি যদি জাভা-স্ক্রিপ্ট ব্যবহারের ভয়ে হতাশ না হন তবে এখানে একটি ভাল নিবন্ধ http://www.highrobotic.com/articles/web/ready-for-retina.aspx রয়েছে । এটির খুব সহজ সমাধান রয়েছে।

এবং জেএসফিডেলের উদাহরণটি হাজার শব্দের জন্য মূল্যবান।

ব্যবহার:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

জাতীয়:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});
— Artru
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.