Masa itu ' s untuk jujur ​​tentang teknik penggantian imej

Takeaways Key

Teknik Penggantian Imej, sekali popular untuk menyampaikan kandungan teks dalam bentuk artistik sambil mengekalkan kebolehcapaian, kini sering dikritik kerana ketersediaan alat moden seperti fon tersuai dan alat CSS yang kuat.
menggunakan teks dan bukannya imej teks mempunyai beberapa manfaat. Ia membolehkan pengguna untuk mengubah saiz teks dengan mudah dan menukar warna, ia boleh diakses untuk skrin pembaca dan bot enjin carian, dan menghormati pemisahan kebimbangan.
Terdapat kes -kes di mana fon web dan CSS mungkin tidak mencukupi untuk mencapai hasil yang diinginkan, seperti ketika typeface logo tidak tersedia di web atau karya seni grafik tidak dapat dicipta semula dengan CSS. Dalam kes ini, menggunakan elemen grafik mungkin diperlukan.
inline SVG adalah cara terbaik untuk memasukkan logo pada laman web apabila fon web dan CSS tidak dapat dimanfaatkan. Ia boleh diakses oleh kedua-dua enjin carian dan teknologi bantuan, berskala dan resolusi-bebas, dan tidak memerlukan permintaan HTTP tambahan untuk dipaparkan.
Penggantian imej sedang dalam perjalanan untuk ditutup kerana keupayaan CSS moden, fon web, dan grafik vektor. Walau bagaimanapun, masih terdapat kes kelebihan, kebanyakannya melibatkan pertimbangan kebolehaksesan, di mana teknik penggantian imej masih dapat mencari aplikasi terhad.

Dalam sekeping terdahulu di sini di SitePoint pada sejarah penggantian imej CSS, Baljeet Rathi melepasi beberapa teknik penggantian imej, masing -masing lebih bijak daripada yang akan datang. Teknik -teknik ini semua tertumpu pada menyelesaikan satu masalah - bagaimana untuk menyampaikan kandungan teks dalam bentuk artistik yang indah di web sambil mengekalkannya, baik kepada orang dan enjin carian. Mencapai matlamat sedemikian dalam dunia reka bentuk web tanpa fon tersuai yang sedia ada dan alat CSS yang kuat hari ini adalah satu prestasi.

mengambil isyarat saya dari artikel Rathi, saya berikan untuk menangani soalan -soalan berikut:

Teknik penggantian imej digunakan untuk menjadi agak popular. Hari ini, kaedah menggantikan teks dengan imej latar belakang sering mendapat rap buruk di kalangan pemaju web. Saya akan mengkaji beberapa sebab mengapa kemudian dalam artikel ini, tetapi memandangkan ini adalah kes, alat dan amalan terbaik yang boleh kita gunakan sebaliknya?
Adakah teknik penggantian imej hanya hantu dari reka bentuk web masa lalu, atau boleh teknik penggantian imej masih digunakan secara bermakna hari ini tanpa rasa takut membuat web uglier?

mari kita mulakan dengan melihat alat terbaik untuk pekerjaan.

Alat terbaik untuk pekerjaan: Font Web dan CSS

Jika kandungan anda teks, gunakan teks, jangan gunakan imej teks.

dengan alat yang anda gunakan hari ini, anda tidak memerlukan sebarang imej untuk menyampaikan kandungan teks dalam bentuk yang indah.

Akses mudah ke nombor fon web tersuai yang mengejutkan, sokongan penyemak imbas yang hebat untuk perkhidmatan CSS @font-face dan perkhidmatan streaming font seperti TypeKit dan Google Font semua memberi anda kuasa besar untuk menyampaikan jenama, menyampaikan emosi, dan membuat kesan dengan tipografi yang menakjubkan di web.

Keupayaan CSS moden menjadikannya mudah untuk mengawal tahap ketelusan, menambah bayang -bayang teks, mod campuran, dan juga animasi ke teks anda - tidak ada photoshop atau javascript tangan yang diperlukan.

di bawah hanyalah contoh apa yang boleh anda lakukan dengan fon web dan CSS:

Laman web Smart Designs memaparkan tipografi yang hebat tanpa sebarang imej, hanya fon web dan css.

faedah utama menggunakan teks dan bukannya imej teks adalah:

Pengguna dengan mudah boleh mengubah saiz teks dan menukar warnanya untuk memenuhi keperluan mereka.
pembaca skrin boleh mengakses teks dan bot enjin carian boleh merangkak dan mengindeksnya.
Ini adalah pendekatan yang betul secara semantik dan menghormati pemisahan kebimbangan, kaitannya juga dianjurkan oleh cadangan W3C untuk memenuhi kriteria kejayaan Garis Panduan Kebolehcapaian Kandungan Web (WCAG).
Jika anda menggunakan fon tersuai, mudah untuk menyediakan fon selamat web sebagai sandaran dalam timbunan font CSS.
Walau bagaimanapun, kerana ramai di antara anda yang sedar, pendekatan ini tidak berfungsi untuk setiap keadaan. Jadi ...

Bagaimana jika fon web dan css tidak selalu sampai ke pekerjaan?

Terdapat situasi apabila fon web dan CSS tidak cukup untuk mencapai hasil yang anda selepas dan beralih kepada grafik masuk akal. Logo laman web adalah satu kes pada titik.

Logos adalah integral kepada jenama, yang bermaksud bahawa anda tidak boleh mengubah suai, walaupun sedikit, logo tanpa menjejaskan identiti jenama. Mungkin ada kes apabila anda tidak dapat menghasilkan semula logo dengan tepat menggunakan fon web dan CSS. Mungkin, jenis huruf logo tidak tersedia di web, atau karya seni grafik tidak boleh dicipta dengan setia hanya dengan CSS. Menggunakan elemen grafik seolah -olah cara untuk pergi. Walau bagaimanapun, walaupun anda mahu pengguna melihat elemen grafik yang dipaparkan di laman web anda, anda juga mahu pembaca skrin dan bot mempunyai akses kepada nama jenama yang mewakili logo.

Juga, pertimbangkan penggunaan ikon tanpa teks sokongan. Isu sebenar di sini ialah pembaca skrin dan crawler enjin carian mempunyai masa yang sukar untuk memahami apa yang dimaksudkan oleh ikon. Ikon bukan teks, sebaliknya mereka

berdiri untuk

teks. Sebagai contoh, ikon hamburger yang biasa sekarang bermaksud perkataan "menu", tetapi bukannya perkataan "menu". Oleh itu, memaparkan hanya ikon tanpa menyokong teks di web dapat menimbulkan kebimbangan aksesibiliti yang serius.

Dalam kedua -dua kes di atas, matlamatnya adalah untuk menyampaikan beberapa maklumat dengan cara imej tanpa menjejaskan akses oleh pembaca skrin dan crawler enjin carian ke kandungan teksnya. Teknik Penggantian Imej menjadikan ini agak mungkin pada masa lalu, jadi patut dilihat sama ada sesuatu yang lebih baik di luar sana hari ini untuk melakukan pekerjaan itu, yang tidak tersedia secara meluas beberapa waktu yang lalu.

Berikut adalah beberapa pilihan.

inline svg

Hari ini, cara terbaik untuk memasukkan logo dalam laman web apabila anda tidak dapat memanfaatkan kuasa fon web dan CSS adalah SVG dalam talian. SVG bermaksud grafik vektor berskala, yang merupakan format grafik berasaskan XML. Teknik yang saya berminat melibatkan membuat grafik SVG logo dan membuang kodnya terus ke dalam dokumen HTML. Jika anda mengeksport SVG anda dari editor seperti Illustrator atau Inkscape, anda boleh melangkah lebih jauh dan mengoptimumkan outputnya dengan menghilangkan markup berlebihan.

Jika anda memeriksa logo laman web SitePoint, anda akan melihat contoh teknik ini dalam tindakan:

SVG inline digunakan untuk membuat logo di laman web SitePoint.

Itu bukan semua. SVG sebaris juga berfungsi keajaiban apabila digunakan sebagai cara menambah ikon yang renyah ke laman web. Jika anda tidak sabar-sabar untuk mengetahui lebih lanjut, lihat kursus SVG Chris Coyer pada trik CSS, yang juga termasuk beberapa tutorial video pada ikon SVG inline.

Berikut adalah beberapa sebab mengapa menggunakan SVG sebaris adalah sejuk:

• Kod SVG hanya markup, dan dengan tajuk dan elemen DESC untuk menambah konteks yang bermakna, kedua -dua enjin carian dan teknologi bantuan dapat mengaksesnya. Anda boleh meningkatkan kebolehcapaian grafik SVG inline anda dengan mengikuti petua ini oleh Léonie Watson di Sitepoint dan Heather Migliorisi pada trik CSS.
• grafik SVG berskala dengan definisi dan resolusi-bebas, yang bermaksud mereka kelihatan hebat tidak kira berapa banyak pengguna mengezum pada mereka.
• grafik SVG inline tidak memerlukan permintaan HTTP tambahan untuk dipaparkan, yang bagus untuk prestasi laman web.
• Anda boleh menyempurnakan penampilan dan tingkah laku grafik SVG inline menggunakan CSS dan JavaScript, termasuk menghidupkan bahagian tunggal karya seni anda dan bahkan secara dinamik morphing bentuk mereka. Untuk mengetahui lebih lanjut mengenai teknik animasi SVG, bacalah animasi dengan SVG sebaris oleh Jordan Wade.
• Berbeza dengan fon ikon, laman web anda tidak akan gagal memuat ikon SVG sebaris kerana kod SVG sudah ada dalam dokumen HTML.

Satu lagi berita baik ialah SVG dalam talian mempunyai sokongan penyemak imbas yang hebat; Hanya IE8 yang tidak mempunyai sokongan untuk SVG sebaris.

fon ikon

Walaupun tidak sesuai untuk memaparkan logo, fon ikon telah menikmati populariti sebagai cara terbaik untuk memaparkan ikon di laman web. Kemudahan penggunaan yang dimungkinkan oleh perpustakaan ikon dalam talian seperti glyphicons dan font Awesome telah banyak menyumbang kepada kehadiran fon ikon besar di web.

Fon ikon hanya teks, oleh itu anda boleh mengawal penampilan mereka dengan CSS dan pengguna boleh mengubah saiznya dengan keinginan mereka.

Untuk ikon yang bermakna tanpa teks yang disertakan, anda boleh menambah maklumat yang boleh diakses menggunakan teknik WAI-Aria.

Sebagai contoh, katakan anda menggunakan Font Awesome untuk memaparkan ikon hamburger yang dipautkan untuk mendedahkan menu tersembunyi. Menambah hanya markup untuk ikon menjadikannya benar -benar tidak dapat dilihat atau tidak bermakna pembaca skrin:

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span>></span><span><span></a</span>></span></span>

Menambah atribut tajuk ke pautan berfungsi untuk pembaca skrin, tetapi mempunyai kesan sampingan untuk menunjukkan petua alat yang kadang -kadang tidak diingini kepada pengguna menavigasi laman web tanpa teknologi bantuan.

Atribut ARIA-label menjadikan fon ikon hamburger boleh diakses untuk pembaca skrin dan menghilangkan tooltip yang tidak diingini:

<span><span><span><a</span> href<span>="#"</span> class<span>="fa fa-bars"</span> aria-label<span>="Menu"</span>></span><span><span></a</span>></span></span>

Walau bagaimanapun, seperti yang ditunjukkan oleh Alex Walker dan Seren Davies, melaksanakan fon ikon di web mempunyai beberapa perangkap, yang mana anda perlu sedar sepenuhnya.

Untuk mengetahui lebih lanjut mengenai apa yang diperlukan untuk menangani isu-isu aksesibiliti yang datang dengan menggunakan fon ikon, fon ikon yang boleh diakses oleh peluru oleh Zach Leatherman dari kumpulan filamen adalah pembuka mata.

tag

memaparkan imej logo menggunakan tag dengan atribut alt yang sesuai adalah pendekatan yang boleh diterima dan digunakan secara meluas.

atribut alt mengandungi teks, dengan itu menjaga kebimbangan kebolehcapaian, elemen menarik perwakilan grafik mewah teks ke dalam dokumen untuk paparan.

kedua -dua W3C, tutorial akses web mereka, dan webmaster Google menyokong kaedah ini.

Beberapa kelemahan kecil yang perlu anda pertimbangkan adalah:

Satu lagi permintaan HTTP, yang boleh memberi kesan kepada masa beban laman web. Ini akan menjadi kurang masalah dalam masa terdekat, apabila http/2 dilaksanakan sepenuhnya.
Pemisahan kebimbangan tidak diendahkan: Jika anda memutuskan untuk menukar penampilan teks, anda perlu melakukannya dengan menukar markup, bukan CSS.
imej raster boleh melihat pixelated apabila pengguna meningkatkan saiz mereka, walaupun grafik SVG tidak membentangkan isu ini.

Titik di atas telah menjadi antara motivasi yang membawa kepada pelbagai teknik penggantian imej yang begitu banyak digunakan pada masa lalu.

Tetapi, mengapa teknik -teknik itu mengerutkan dahi hari ini? Adakah kita benar -benar selesai dengan mereka?

kes terhadap penggantian imej

Kebanyakan bahan penyelidikan mengenai teknik penggantian imej yang saya jumpai pada tarikh dalam talian kembali ke awal atau pertengahan 2000 -an. Pada bulan November 2013, boilerplate HTML5 menjatuhkan semua jenis teknik penggantian imej CSS. Ini adalah petunjuk penting yang menunjukkan bahawa penggantian imej sedang dalam perjalanan untuk ditahan.

CSS membolehkan anda melakukan perkara yang hanya boleh anda lakukan pada perisian penyuntingan imej sehingga hanya beberapa tahun yang lalu. Di samping itu, dengan fon web dan grafik vektor sedia ada, mengapa anda akan menjangkau hack pintar seperti penggantian imej?

Pertimbangan penting lain terhadap menggunakan teknik penggantian imej yang berkaitan dengan potensi kesan negatif mereka terhadap kedudukan enjin carian.

Google mempunyai garis panduan yang jelas terhadap menyembunyikan teks di halaman web, dan mengabaikannya boleh menyebabkan penalti yang teruk. Inilah laman web Google yang menganggap cara yang mencurigakan untuk menyembunyikan teks pada hari ini dan umur di web:

• menggunakan teks putih pada latar belakang putih.
• mencari teks di belakang imej.
• menggunakan CSS untuk meletakkan teks di luar skrin.
• menetapkan saiz fon ke 0.

item dalam senarai di atas angka ke kebanyakan teknik penggantian imej yang popular, yang menjadikan kita semua waspada menggunakannya.

Walau bagaimanapun, keadaan tidak jelas. Google menunjukkan bahawa teks tersembunyi " untuk memanipulasi kedudukan carian Google [penekanan adalah milik saya] dapat dilihat sebagai menipu dan merupakan pelanggaran garis panduan webmaster Google." Tambahan pula, Google meneruskan dengan mengatakan bahawa:

"... tidak semua teks tersembunyi dianggap menipu. Sebagai contoh, jika laman web anda termasuk teknologi yang enjin carian mengalami kesukaran mengakses, seperti JavaScript, Images, atau Files Flash, menggunakan teks deskriptif untuk item ini dapat meningkatkan aksesibilitas laman web anda. "

Selagi tidak ada

kata kunci pemadat atau niat jahat, penggantian imej boleh dipertimbangkan sebagai mematuhi garis panduan Google. Bagaimana untuk menyampaikan kepercayaan anda kepada Google Bots tidak mudah, tetapi pakar SEO yang baik telah mengemukakan adalah untuk memastikan teks yang anda sembunyikan adalah sama seperti teks yang dipaparkan di laman web anda.

Itu bukan semua. Joost de Valk dari Yoast, pastinya suara yang berwibawa dalam bidang SEO, adalah antara penyokong penggantian imej, terutama sebagai cara yang boleh diakses menggunakan sprite di laman web.

Dalam penggantian imej CSSnya, What's Up Matt?, De Valk mengambil isu dengan Matt Cutts, jurutera perisian di Google, mengenai pendiriannya terhadap penggunaan penggantian imej. Anda akan mengatakan sekeping De Valk bermula pada tahun 2009, prasejarah dalam dunia reka bentuk web. Namun, sekurang -kurangnya untuk pengetahuan saya, penulisnya tidak menulis apa -apa yang boleh membolehkan kita berfikir bahawa dia telah mengubah fikirannya mengenai subjek, dan pada masa menulis artikel ini, logo di laman web Yoast masih dipaparkan menggunakan penggantian imej.

Penggantian imej masih boleh diterima dari perspektif aksesibiliti, sekurang -kurangnya dalam beberapa kes. Ini tidak menghairankan kerana pemacu utama di sebalik kaedah ini adalah untuk memaparkan paparan kandungan tekstual yang digilap secara estetika tetapi sepenuhnya diaksikan di web.

Nota oleh Kumpulan Kerja W3C secara eksplisit menyokong teknik penggantian imej selagi pengguna dapat dengan mudah beralih kepada persembahan alternatif, teks sahaja dari kandungan yang sama sekiranya pelaksanaan tidak seharusnya berfungsi seperti yang diharapkan.

Pemaju perisian Logan Franken membuat kes yang munasabah untuk menggunakan teknik penggantian imej yang terhad pada hari ini, dengan alasan bahawa mereka masih boleh memainkan peranan ketika memaparkan SVG dalam tag IMG atau fon ikon tanpa mengiringi teks di laman web.

Akhirnya, anda akan mendapati bahawa penggantian imej masih boleh relevan untuk meningkatkan kebolehcapaian teknologi SVG canggih hari ini. Dalam bahagian yang bertajuk

Contoh 5: Ikon Terkait, dengan Teks Dinamik Dalam SVG yang boleh diakses, Heather Migliorisi menunjukkan bahawa penggunaan atribut ARIA-label, sementara sesuai apabila teks pautan mengiringi ikon SVG sebaris adalah statik adalah statik , tidak memenuhi situasi di mana teks pautan tidak diketahui terlebih dahulu kerana ia ditambah secara dinamik ke halaman. Migliorisi menunjukkan bagaimana penggantian imej dapat digunakan dengan baik di sini untuk menyelamatkan hari.

Kesimpulan

Dalam artikel ini saya telah menyenaraikan alat dan amalan terbaik yang boleh anda gunakan sekarang sebagai alternatif kepada teknik penggantian imej yang begitu popular pada hari -hari berlalu. Ini termasuk fon tersuai, CSS3 dan inline SVG, yang tidak tersedia atau disokong dengan baik oleh pelayar pada masa lalu, serta tag lama yang baik dengan atribut alt yang sesuai.

Hari ini, penggantian imej kelihatan agak hacky dan pendirian Google pada teks tersembunyi tidak menggalakkan penggunaannya. Walau bagaimanapun, terdapat kes -kes kelebihan, kebanyakannya melibatkan pertimbangan kebolehcapaian, apabila teknik penggantian imej masih dapat mencari aplikasi yang terhad, semoga tidak lama.

Apa yang anda buat, adakah pengganti imej mati atau hidup? Izinkan saya mendengar daripada anda dalam komen!

Soalan Lazim (Soalan Lazim) Mengenai Teknik Penggantian Imej

Apakah jenis teknik penggantian imej yang berlainan?

Terdapat beberapa teknik penggantian imej yang digunakan oleh pemaju. Ini termasuk Penggantian Imej Fahrner (FIR), Penggantian Imej Leahy/Langridge (LLIR), Penggantian Imej Phark (PIR), Penggantian Imej Gilder/Levin (GIR), dan kaedah Scott Kellum. Setiap teknik ini mempunyai kelebihan dan kekurangannya sendiri, dan pilihan teknik bergantung kepada keperluan khusus projek. Teknik Penggantian Imej Fahrner (FIR) melibatkan menggantikan elemen teks dengan imej tanpa menjejaskan kebolehcapaian teks. Ini dilakukan dengan meletakkan teks di luar skrin menggunakan CSS, yang membolehkan imej mengambil tempatnya. Walau bagaimanapun, teknik ini telah dikritik kerana kesannya terhadap pembaca skrin dan pengoptimuman enjin carian (SEO). Teknik Penggantian Imej (LLIR) adalah pengubahsuaian teknik FIR. Ia melibatkan menggunakan elemen span untuk memegang teks, yang kemudiannya tersembunyi menggunakan CSS. Ini membolehkan imej dipaparkan di tempatnya. Kelebihan teknik ini adalah bahawa ia tidak menjejaskan pembaca skrin atau SEO. Teknik adalah satu lagi pengubahsuaian teknik FIR. Ia melibatkan menyembunyikan teks dengan menjadikannya warna yang sama seperti latar belakang, yang membolehkan imej dipaparkan di tempatnya. Teknik ini lebih mudah daripada teknik lain, tetapi telah dikritik kerana kesannya terhadap SEO. Teknik (GIR) melibatkan menggunakan imej latar belakang dan menyembunyikan teks menggunakan CSS. Teknik ini lebih mesra SEO daripada teknik lain, tetapi ia telah dikritik kerana kesannya terhadap pembaca skrin.

Bagaimana kaedah Scott Kellum berfungsi? harta inden teks untuk menolak teks di luar skrin, yang membolehkan imej dipaparkan di tempatnya. Teknik ini lebih mudah diakses daripada teknik lain, tetapi ia telah dikritik kerana kesannya terhadap SEO. Gunakan imej sebagai ganti teks tanpa menjejaskan kebolehcapaian teks. Walau bagaimanapun, teknik -teknik ini boleh memberi kesan negatif terhadap pembaca SEO dan skrin. Oleh itu, adalah penting untuk memilih teknik yang tepat untuk setiap projek.

Bagaimana saya boleh memilih teknik penggantian imej yang betul untuk projek saya?

Pilihan teknik penggantian imej bergantung kepada keperluan khusus projek anda. Anda harus mempertimbangkan faktor -faktor seperti kesan terhadap pembaca SEO dan skrin, kerumitan teknik, dan keserasian dengan penyemak imbas yang berbeza. Terdapat alternatif untuk teknik penggantian imej. Ini termasuk menggunakan sifat CSS3 seperti bayang-bayang teks dan box-shadow, menggunakan imej SVG, dan menggunakan fon web. Alternatif ini dapat memberikan hasil yang sama tanpa kelemahan teknik penggantian imej.

Bagaimana saya dapat mengetahui lebih lanjut mengenai teknik penggantian imej? Ini termasuk tutorial, artikel, dan forum. Anda juga boleh belajar dari kod sumber laman web yang menggunakan teknik ini.

Atas ialah kandungan terperinci Masa itu ' s untuk jujur ​​tentang teknik penggantian imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!