ภาพ Retina อัตโนมัติสำหรับเว็บไซต์

ด้วย Apple MacBook Pro รุ่นใหม่ที่มีจอแสดงผลเรตินาหากคุณให้ภาพ "มาตรฐาน" บนเว็บไซต์ของคุณภาพนั้นจะดูเลือนรางเล็กน้อย ดังนั้นคุณต้องให้ภาพเรตินา

มีวิธีเปลี่ยนไปใช้@2xรูปภาพโดยอัตโนมัติเช่น iOS (พร้อม Objective-C) หรือไม่? สิ่งที่ฉันได้พบก็คือ: CSS สำหรับภาพที่มีความละเอียดสูงในการแสดงโทรศัพท์มือถือและจอประสาทตาแต่ฉันหวังว่าฉันจะหากระบวนการอัตโนมัติสำหรับภาพทั้งหมดของฉันโดยไม่ต้อง CSS หรือ JavaScript

เป็นไปได้ไหม?

UPDATE
ผมจะเน้นที่น่าสนใจนี้บทความแนะนำโดย@ Paul D. เวทท์และที่น่าสนใจการอภิปรายเกี่ยวกับการเชื่อมโยงโดยเซบาสเตียน

มีแอตทริบิวต์ใหม่สำหรับแท็ก img ที่ให้คุณเพิ่มแอตทริบิวต์ retina src คือ srcset ไม่จำเป็นต้องใช้ javascript หรือ CSS ไม่ต้องโหลดภาพซ้ำ

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

การสนับสนุนเบราว์เซอร์: http://caniuse.com/#search=srcset

แหล่งข้อมูลอื่น ๆ :

• โพสต์เผยแพร่ WebKit
• เอกสาร W3Cสำหรับ srcset
• คำอธิบายที่ดีเกี่ยวกับสาเหตุและวิธีใช้ srcset
• โพสต์ของ Chris Coyerสำหรับข้อมูลเพิ่มเติมที่ดี

มีวิธีแก้ปัญหาที่แตกต่างกันแต่ละข้อมีข้อดีข้อเสียของตัวเอง อันไหนดีที่สุดสำหรับคุณขึ้นอยู่กับปัจจัยต่างๆเช่นเว็บไซต์ของคุณได้รับการออกแบบอย่างไรผู้เยี่ยมชมทั่วไปของคุณใช้เทคโนโลยีประเภทใดเป็นต้นโปรดทราบว่าจอภาพเรตินาไม่ได้ จำกัด เฉพาะ Macbook Pro Retina และ iMac ที่กำลังจะมาถึง แต่ยังรวมถึง อุปกรณ์เคลื่อนที่ซึ่งอาจมีความต้องการของตนเอง

ปัญหายังเกี่ยวข้องอย่างใกล้ชิดกับภาพในการออกแบบที่ตอบสนองโดยทั่วไป ในความเป็นจริงแล้วควรใช้เทคนิคการออกแบบที่ตอบสนองต่ออุปกรณ์ทั่วไปแทนการออกแบบสำหรับอุปกรณ์เฉพาะ ท้ายที่สุดเทคโนโลยีก็เปลี่ยนแปลงตลอดเวลาในอนาคตเช่นกัน

วิธีแก้ปัญหา / การอภิปรายบางส่วนที่ฉันสังเกตเห็น:

• เวกเตอร์ทุกที่ที่เป็นไปได้รวมถึงเทคนิค CSS (การไล่ระดับสีมุมโค้งมน ฯลฯ ) SVG และแบบอักษรไอคอน
• ให้บริการภาพที่มีความละเอียดสูง ("เรตินา") แต่บีบอัดให้มากขึ้น (คุณภาพ JPEG) ตามที่Yoav Weiss แนะนำหรือปล่อยให้เครือข่ายมือถือบีบอัดเมื่อจำเป็นจริงๆ (เช่นเมื่อมือถือ) ตามที่Paul Boagแนะนำ
• Adaptive Imagesซึ่งเป็นโซลูชันฝั่งเซิร์ฟเวอร์ (ส่วนใหญ่) มันขึ้นอยู่กับคุกกี้ที่จัดเก็บความละเอียดหน้าจอเว็บเซิร์ฟเวอร์ที่กำหนดค่าให้แสดงภาพจากสคริปต์ PHP และตั้งชื่อสคริปต์เพื่ออ่านคุกกี้และแสดงภาพที่เหมาะสม
• พวงของความเป็นไปได้อธิบายไว้อย่างดีและกล่าวถึงในนิตยสาร Smashing
• ให้บริการเพียงแค่ความละเอียดสูงขึ้นเล็กน้อยให้เรียบเห็นภาพจอประสาทตาเล็ก ๆ น้อย ๆ ตามข้อเสนอแนะในวิดีโอโดยพอล Boag
• เทคนิค @ 1.5xในA List Apartนั้นเป็นแนวคิดเดียวกัน
• ในอนาคตอันใกล้<picture>แท็กอาจกลายเป็นโซลูชันที่สนับสนุนโดยคณะทำงาน W3Cและแม้แต่ Apple
• เทคนิค JavaScriptที่เสนอโดยJake Archebald
• การอภิปรายเกี่ยวกับเทคนิคต่างๆในนิตยสาร Smashingและปัญหาโดยทั่วไป

ดังที่คำตอบอื่น ๆ แสดงให้เห็นว่ามีเทคนิคมากกว่านี้ - แต่อาจยังไม่มีแนวทางปฏิบัติที่ดีที่สุด

สิ่งหนึ่งที่ฉันสงสัยคือวิธีทดสอบและแก้ไขข้อบกพร่องของเทคนิคเหล่านี้โดยไม่ต้องมีอุปกรณ์ที่เกี่ยวข้อง ...

เนื่องจากยังไม่มีใครพูดถึงสิ่งที่ชัดเจนฉันจะลอยมันออกไปที่นั่นถ้าเป็นไปได้ให้ใช้ SVG ปรากฏขึ้นที่ความละเอียดเรตินาที่สวยงามโดยไม่ต้องใช้ความพยายามใด ๆ

รองรับได้ดีกับ IE8 ที่เป็นไดโนเสาร์ตัวหลักที่ต้องกังวล ขนาดไฟล์ Gzipped มักจะดีกว่ารูปแบบบิตแมป (png / jpg) และรูปภาพมีความยืดหยุ่นมากกว่า คุณสามารถใช้ซ้ำได้ในความละเอียดที่แตกต่างกันและปรับรูปแบบใหม่หากจำเป็นซึ่งช่วยประหยัดทั้งเวลาในการพัฒนาและดาวน์โหลดแบนด์วิดท์

นี่คือมิกซ์อินน้อยที่ฉันใช้เพื่อให้ได้ภาพพื้นหลัง retina.js ไม่ทำงานกับภาพพื้นหลังหากคุณใช้ dotLess เนื่องจากต้องใช้มิกซ์อินของตัวเองซึ่งใช้การประเมินสคริปต์ซึ่งไม่รองรับใน dotLess

เคล็ดลับทั้งหมดนี้คือการได้รับการสนับสนุน IE8 ไม่สามารถทำขนาดพื้นหลังได้อย่างง่ายดายดังนั้นกรณีพื้นฐาน (แบบสอบถามที่ไม่ใช่สื่อบนมือถือ) จะต้องเป็นไอคอนที่เรียบง่ายและไม่ปรับขนาด จากนั้นแบบสอบถามสื่อจะจัดการกรณีของเรตินาและสามารถใช้คลาสขนาดพื้นหลังได้ฟรีเนื่องจากเรติน่าจะไม่ถูกใช้บน IE8

.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ไฟล์มีความละเอียดสองเท่าสำหรับเรตินา

เพียงแค่ให้ภาพเรติน่าแก่ทุกคนและบีบภาพให้เหลือครึ่งหนึ่งของขนาดดั้งเดิมภายในองค์ประกอบภาพ สมมติว่าภาพของคุณ400pxกว้างและสูง - เพียงระบุความกว้างของภาพ200pxเพื่อให้ภาพคมชัดดังนี้:

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

หากรูปภาพของคุณเป็นรูปถ่ายคุณอาจเพิ่มการบีบอัด JPG ได้โดยไม่ทำให้ดูแย่ลงเนื่องจากสิ่งประดิษฐ์การบีบอัด JPG อาจไม่สามารถมองเห็นได้เมื่อรูปภาพแสดงที่2x: ดูhttp://blog.netvlies.nl/ การออกแบบโต้ตอบ / เรตินาปฏิวัติ /

หากเป็นภาพพื้นหลังวิธีง่ายๆในการดำเนินการนี้คือ:

    #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" />

ฉันพบวิธีที่น่าสนใจสำหรับการให้ภาพที่มีความละเอียดหลายรูปแบบ
จริงๆแล้วมันใช้ CSS ซึ่งเป็นสิ่งที่ฉันต้องการหลีกเลี่ยงและใช้ได้กับ Safari และ Chrome เท่านั้น
ฉันกำลังพูดถึงimage-set.

นี่คือตัวอย่างจาก Apple ( ที่นี่ ):

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 */
}

ฉันต้องการแบ่งปันสองลิงก์นี้:

• Safari 6 และ Chrome 21 เพิ่มชุดภาพเพื่อรองรับภาพเรตินา
• image-set()สัญกรณ์@ W3C

ด้วย JSF คุณสามารถสร้างแท็ก Facelets ที่กำหนดเองเพื่อบันทึกความยุ่งยากที่ต้องเพิ่ม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"/>

ปัญหานี้ยุ่งยากโดยเฉพาะกับไซต์ที่ตอบสนองซึ่งและรูปภาพอาจมีความกว้างแตกต่างกันไปขึ้นอยู่กับขนาดของเบราว์เซอร์ นอกจากนี้เมื่อจัดการกับ CMS ที่ผู้แก้ไขหลายคนอาจอัปโหลดภาพกว่า 1,000 ภาพให้ฉันฟังดูเหมือนไม่สมจริงสำหรับฉันที่จะขอให้ผู้อื่นอัปโหลดภาพที่บีบอัดเป็นพิเศษ

ดังนั้นฉันจึงเขียนสคริปต์ที่คำนึงถึงสิ่งนี้โดยจะเริ่มทำงานที่ด้านล่างของหน้าและเมื่อปรับขนาดเสร็จแล้ว แต่ละครั้งจะคำนึงถึงความหนาแน่นของพิกเซลและขนาดของภาพที่ครอบครอง

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

หากคุณไม่ผิดหวังเพราะกลัวการใช้ java-script นี่คือบทความดีๆhttp://www.highrobotics.com/articles/web/ready-for-retina.aspx http://www.highrobotics.com/articles/web/ready-for-retina.aspxมันมีวิธีง่ายๆ

และตัวอย่างใน JSFiddleมีค่าหนึ่งพันคำ

ใช้:

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

JS:

/* 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');            
    });
});