AI ile resme otomatik olarak alt metin nasıl eklenir

Web erişilebilirliğinin ilk prensibi, görüntüler için alternatif metinler sağlamak, aynı zamanda doğru uygulanması en zor olanlardan biri sağlamaktır.Ve bu nedenle, internette hiç alternatif metinleri olmayan birçok görüntü, kötü yazılmış veya sadece yanlış yazılmış alternatif metinler var.Bağlam, görüntüler için uygun alternatif metinleri belirlemede her şeydir.Bu nedenle, sitenize fayda sağlamak için görüntülere alternatif metinlerin nasıl ekleneceğini anlamak ve öğrenmek önemlidir.Bir resmin bin kelimeye bedel olduğu söylenir.Web sitesi sayfanızdaki resimler içeriğinizi netleştirmeye yardımcı olur ve estetik ilginç olduğu için daha ilginç hale getirir.Büyük bir metin bloğuna baktığınızda motive kalmak zor.Metin bloğunu bir resimle kırarsanız çoğu insan bunalmış hissetmez.
Araç yağınızı nasıl değiştireceğiniz konusunda size talimat veren web sitesi sayfalarını açmayı düşünün. Web sitesi sayfasına giriş uzundur ve onu izleyen her paragraf aynı uzunluktadır. Paradan tasarruf etmek için yağı değiştirmek istediğiniz kadar oturmaya ve tüm bilgileri okumaya devam edemezsiniz. Bu makalede Alt metninin ne olduğunu ve neden önemli olduğunu, iyi bir alternatif metnin nasıl yazılacağını ve görüntüye alternatif metinlerin nasıl doğru ekleneceğini tartışacaktır. Alt metin nedir? Alt öznitelikleri, ALT açıklamaları veya ALT etiketleri olarak da bilinen alt metin, neyin görüntülendiğini açıklayan ayrıntılı bir bilgi snippet’idir. Alternatif metin, görüntü kullanıcı ekranına yüklenemezse, web sayfasındaki resimlerin yerine görünen yazılı bir kopyadır. Bu metin, ekran okuyucu yazılımının görme bozuklukları olan okuyuculara görüntüleri açıklamasına yardımcı olur ve arama makinelerinin web sitenizi daha etkili bir şekilde taramasına ve sıralamasına izin verir. Temel prensip, bilgisayarların ve ekran okuyucuların görüntüleri analiz edemeyeceği ve içeriklerini belirleyememesidir. Bir Web geliştiricisi olarak, içerikteki görüntünün bağlamını ve işlevini tanımlayan kullanıcılara metin sağlamak bir zorunluluktur. Alternatif metin, metnin bulunduğu her yerde görüntülere eşdeğer metin anlamına gelir. Bu yalnızca Alt etiketi görüntüsünün özelliklerine değinmez. Özelliğin kendisine atıfta bulunurken, ALT özniteliği, alternatif metinler içeren genellikle, ancak her zaman değil, özniteliğin kendisine atıfta bulunacaktır. Ürün X için bir satın alma düğmesi olarak bir görüntü kullanırsanız, alternatif metin “Ürün X için Satın Al düğmesi” demelidir.
Kör insanlar ve kör insanlar tarafından kullanılan tarayıcılar olan ekran okuyucuları alt etiketi kullanır. Alt etiketini okuyarak, bu ekran okuyucusu görüntüde ne olduğunu belirleyebilir. İmleci bir öğeye yönlendirdiğinizde, başlık özelliği bir araç açıklaması olarak görünür. Örneğin, görüntü düğmesi durumunda, görüntünün başlığı ek bir eylem davetiyesi içerebilir. Ancak, bu önerilen bir yöntem değildir. Başlık özelliğine gerek yoktur. Buna ek olarak, çoğu zaman, girmeye gerek yoktur. Yalnızca fare (veya diğer işaretli cihazlar) kullanan kullanıcılar için kullanılabilirler ve başlık öznitelikleri yalnızca IFrame> ve Frame> ‘da erişilebilirlik için gereklidir. Bir görüntünün hiçbir amacı yoksa? Tasarımınızda yalnızca estetik amaçlar için görüntüleriniz varsa yanlış yaparsınız. Görüntüler HTML yerine CSS’de saklanmalıdır. Görüntüyü değiştiremiyorsanız, boş alt özellikleri resme yerleştirin:
Aşağıda bağlı makaleler
div class = “picture.png” alt = “”> div class = “image.png” alt = “”> Alt özniteliği boş bırakılırsa ekran okuyucusu görüntüyü geçer. “Alt metin” alanını boş WordPress’teki görüntü ayarlarında bırakabilirsiniz. Alt metni neden önemlidir? Alternatif metnin her biri çeşitli kullanımları olan üç ana kullanımı vardır, böylece ilgi alanları abartılamaz:

İçerik Yerine – Görüntü dosyası yüklenmezse, alternatif metin görüntülenir, görüntüyü kullanıcıya açıklayın.
Arama Motoru Optimizasyonu (SEO) – Alt etiketleri, daha iyi tanımlar ve görüntülerin bağlamsal açıklamaları sağlamak, daha iyi arama motoru ürünleri üretmek için başarılı arama motorları optimizasyonunda kullanılır. İnternet pazarlamasında SEO, güçlü sonuçlar elde etmek için önemli bir bileşendir. İnternette erişilebilirlik – Google görüntü araması yaptıysanız, belirli konularda birçok resim bulabilirsiniz. Sıralamasını belirlemek için kullanıldıkları web sitesinde bu resimler için alt metin seti. Resmi tıkladığınızda, resmin nerede yayınlandığını göreceksiniz ve oradan bir web sitesi açabilirsiniz. İnsanların, sıradan aramada olduğu gibi, görüntü arama sonuçlarındaki ilk birkaç görüntüye tıklama olasılığı daha yüksektir, bu da daha fazla pozlama elde ederler. Bu bugün internetten önemli bir özelliktir. Bu adımlar yalnızca müşterinizin veya müşterinizin değerli ve saygı duyulduğunu sağlamakla kalmaz, aynı zamanda web hizmetinizin gereksinimleri ve standartları karşılamasını sağlamaya da yardımcı olur. Müşterilerinizi Beyaz Listeye bir e -posta girmeye teşvik etmeniz gerekse de, yine de resimler için bir bağlam sağlamanız gerekir, çünkü tüm e -posta istemcileri – webmail ve masaüstü – varsayılan olarak resimleri devre dışı bırakabilir veya etkinleştirebilir. Örneğin, fotoğraflara eklenen doğru tanımlayıcı alternatif metin, web sayfalarınızdaki görüntülerin bağlamını anlamaya ekran okuyucularına güvenenler için yararlı bir araçtır.
Bir görüntü açıklaması eklemek neredeyse her zaman kullanışlıdır, ancak açıklama her zaman kaliteli değildir. Teknik olarak doğru olmasına ve hedeflerine ulaşmada işlev görmesine rağmen, ancak kalite ve bağlamı yoktur. Bu tür temel açıklama her zaman okuyucular, müşteriler ve tüketiciler için uygun olacaktır. Alternatif bir metin bağlamında, çözüm basittir: resmi mümkün olduğunca kısa ve mümkün olduğunca açıklayıcı açıklayın. Görüntülerle ilgili bazı basit tanımlayıcı soruları cevaplamak size doğru bir şekilde tanımlamak için ihtiyacınız olan zengin bağlamı verecektir. Ayrıca, anahtar kelimelerinizi hedeflemek, resimleri sayfa içeriğine bağlamak ve arama isteği ile daha alakalı hale getirmek için bu fırsattan yararlanmanız gerekir. Ancak, uyarılar: Anahtar kelime girişi açıktır ve bunu yaparsanız birçok arama motoru sizi cezalandırır. Hala yaratıcıken açıklamanızı görüntüle alakalı tutun. Görüntüye ALT Metin Nasıl Eklenir Otomatik olarak arama motoru optimizasyonunun amacı en iyi anahtar kelimeleri bulmak değildir. Ortamınızın uygun etiketin de sürecin bir parçası olduğundan emin olun. Ancak, WordPress’e medya ve ALT etiketi başlığını eklemek uzun zaman alabilir.
Ya bir şeyle uğraşmak için çok fazla zaman harcamadan bu öğeleri otomatik olarak girmenin yolları varsa? Bu öğretici, resim yüklerken WordPress’e otomatik olarak medya başlıkları ve ALT etiketlerinin nasıl ekleneceğinizi gösterir. Bu, zaman kazandırır ve bir arama motoru botunun resminizi doğru bir şekilde sürünmesini sağlar. SIRV ile Alt Metin Ekle
SIRV’de yayınlanan tüm resimler için özel meta açıklama alanları mevcuttur. Bu, çeşitli SIRV bileşenlerinde alternatif bir metin kaynağı olarak kullanılabilir. Görüntüye otomatik olarak alt etiketler eklemek için AISCE Computer Vision, AI Image Giriş kullanacağız. Azure bilgisayar görüşü tarafından döndürülen veriler daha sonra SIRV görüntü açıklamasını doldurmak için kullanılacaktır. Görüntü açıklaması aranabildiğinden, bunun SIRV uygulamasında arama sonuçlarını iyileştirmek için ek avantajları vardır.
Başlamak için Azure ve SIRV’den bir yangın anahtarına ihtiyacımız var. Bir SIRV hesabınız, Microsoft Azure hesabınız ve Azure Computer Vision SDK’nız olmalıdır. 1. Azure bilgisayar görüşüne kaydolun
Ücretsiz Mavi Hesap Alın
Bilgisayar Görüşü Ekleyin

Bilgisayar Vizyonu Oluşturma Örneği:

Uygulamanız tamamlandıktan sonra API anahtarını ve son noktanızın adresini kaydedin: API adresi için Azure Anahtarında Bilgisayarın Vizyonu

Seçtiğiniz dilde Bilgisayar Vizyonu SDK Azure’u hazırlayın.
2. SIRV için API REST’i kilitleyin
SIRV hesabınızı açın

Yeni bir yangın dinlenme müşterisi yapın

ClientID’i ve müşterinizin gizli anahtarını kaydedin

Görüntüye ALT etiketlerini otomatik olarak ekleyin Azure Computer Vision SDK’yı yükledikten ve tüm kimlik bilgilerinizi kaydeddikten sonra bir iş kurmanın zamanı geldi. Bu örnek için Python’u kullanacağız.
Gereken kütüphaneyi dahil edin. Autoalt.py gibi yeni Python dosyaları oluşturun. Ardından, seçtiğiniz editörde aşağıdaki kütüphaneyi ekleyin:
Azure.cognitiveservices.vision.computVision Azure.cognitiveservices.vision.cutVision.models ImportStatuscodes’den Azure.cognitiveservices.vision.compision.models ithalationSweatureTypis.models ithalationSweaturetypis. Hap içe ithalat görüntüsü içe aktarma Sys urllib ithalat süresi. Aşağıdaki değişkenleri bilgisayar görüşüne ve SIRV kilitlerine ayarlayın:
# Abonelik anahtarınız ve uç nokta aboneliği_key = “Azure aboneliği anahtarınız” endpoint = “Azure uç nokta url’niz, örneğin – https: // we =” SIRV istemciniz burada burada ” # remote_image_url için bir açıklama alacağız = “https://demo.sirv.com/leopard.jpg”
Uzun mesafeli görüntü URL değişkeninde, görüntü URL’sini de ekliyoruz.
Kimliginizi dogrulayin. Bilgisayar Vizyonu istemcileri oluşturarak SIRV kimlik doğrulama jetonlarını alın:
#Create Azure istemcisi computVervision_client = computVisionClient (uç nokta, cognitiveservicescredentials (abonelik_key)) # sirv auth jetonunu al. API Reference-https: //apidocs.sirv.com/#connect-to-sirv-api yük = {‘clientId’: SIRV_ID, ‘ClientSecret’: SIRV_SECRET} başlıkları = {‘Content-Type’: ‘Uygulama/json’ } Yanıt = requests.request (‘post’, ‘https://api.sirv.com/v2/token’, data = json.dumps (yük), başlıklar = başlıklar) jeton = rep Respon.json () [‘jeton ‘]
Sonunda olağanüstü olan iki yangınla etkileşime girebildik.
SIRV’de bir resim açıklaması ve güncelleme alın. Bir resim için nasıl açıklama yapılır: # Bilgisayar Görüşü Oluşturma İstemcisi Açıklama_results = ComputVisient_client.Describe_Image (Remote_Image_url) # Altyazıları (açıklamalar) yanıttan (“Remote Image:”) Açıklama_results ile alın. altyazılar) == 0): yazdır (“Açıklama yok.”) Başka: Açıklama içindeki Altyazı için: “” {} ‘Güvenle {: .2f}%”. Format (Caption.text, Caption. güven * 100)) açıklama = ‘{“açıklama”: “‘ + altyazı.text + ‘”}’ ” ‘SIRV’deki görüntü açıklamasını güncelleyin. API referans-https: //apidocs.sirv.com/#set-meta-description ” # görüntü yolunu dosya adı olarak kapmak. Params = {“dosya adı”: urlparse (remote_image_url) .path} başlıklar = {‘content-type’: “Uygulama/json”, ‘yetkilendirme’: ‘Bearer % s’ % jeton} repp} = requests.equest (‘post’ , ‘https://api.sirv.com/v2/files/meta/description’, data = description.encode (‘utf-8’), başlıklar = başlıklar, params = params) print (yanıt)
İsteğe bağlı olarak, yalnızca güven seviyesi yeterince yüksekse görüntü açıklamasını güncelleyecek olan güven kontrollerini ekleyebilirsiniz. Bu aşağıdaki gibi görünecektir:
# Bilgisayar Görüşü İstemcisi Açıklama_results = Computervision_client.describe_image (Remote_Image_url) # Altyazıları (açıklamalar) yanıttan alımları alın, güven düzeyi baskısı (“Uzaktan görüntü açıklaması:”: yazdır (“açıklanmadı. Altyazı Açıklama_results.captions: print (“‘}’ güvenle {: .2f}%”. Format (caption.text, caption.Condance * 100)) açıklama = ‘{“açıklama”: “‘ + altyazı.text + ‘”}’ # Buradaki 60 numarayı istenen güven yüzdesi seviyesine değiştirin. if (caption.Condance * 100> 60): ” SIRV’deki görüntü açıklamasını güncelleyin. API referans-https: //apidocs.sirv.com/#set-meta-description ” # görüntü yolunu dosya adı olarak kapmak. Params = {“dosya adı”: urlparse (remote_image_url) .path} başlıklar = {‘content-type’: “Uygulama/json”, ‘yetkilendirme’: ‘Bearer % s’ % jeton} repp} = requests.equest (‘post’ , ‘https://api.sirv.com/v2/files/meta/description’, data = description (‘utf-8’), başlıklar = başlıklar, params = params) print (yanıt) başka: baskı (yanıt) “Yeterince güven seviyesine sahip altyazı yok”) her şeyi birleştirin

Azure.cognitiveservices.vision.computVision Azure.cognitiveservices.vision.cutVision.models ImportStatuscodes’den Azure.cognitiveservices.vision.compision.models ithalationSweatureTypis.models ithalationSweaturetypis. İçe Aktarım Görüntü görüntüsü Urllib.Parse Import UrlParse # abonelik anahtarınız ve uç nokta aboneliği = “Azure Anahtar” uç nokta = “https://we.cognitiveservices.azure.com/” istemci kimliği “SIRV_SECRET =” İstemci Sekreti “#Remote_image_url =” https://demo.sirv.com/leopard.jpg “#create Azure ComputVervision (aboncapple_key))#sirv yazarı alın. API Reference-https: //apidocs.sirv.com/#connect-to-sirv-api yük = {‘clientId’: SIRV_ID, ‘ClientSecret’: SIRV_SECRET} başlıkları = {‘Content-Type’: ‘Uygulama/json’ } Yanıt = requests.request (‘post’, ‘https://api.sirv.com/v2/token’, data = json.dumps (yük), başlıklar = başlıklar) jeton = rep Respon.json () [‘jeton ‘] # Bilgisayar Görüşü İstemci Açıklama_Results = Computervision_client.describe_image (Remote_Image_Url) # Altyazıları (açıklamalar) yanıttan (“Açıklama 0): yazdır (” Açıklama yok. “): Altyazı için: Altyazı Alın: açıklama_results.captions: print (“‘{}’ ‘
Güvenle {: .2f}%”. Format (altyazı.text, altyazı. Sirv. API referans-https: //apidocs.sirv.com/#set-meta-incing ” ‘params = {“dosya adı”: urlparse (remote_image_url) .path} başlıklar = {‘ content-type ‘: “uygulama/ json “, ‘yetkilendirme’: ‘taşıyıcı % s’ % jeton} yanıt (‘UTF-8’), başlıklar = başlıklar, params = params) print (yanıt) Alt görüntü etiketini toplu olarak ekleyin, gerçek dünyada istersiniz Görüntüye toplu olarak alt etiketler eklemek için. Bunu yapmak için SIRV hesabınızdan bir görüntü URL’sine ihtiyacınız var. Bunu yapmanın birkaç yolu vardır.
CSV dosyası olarak görüntü dışa aktarma
SIRV görüntülerinizi basitlik için dışa aktarmak için bir web uygulaması kullanalım.
Görüntü URL’sini ayrı bir metin dosyasına kaydedin (Images.txt adını verin) ve komut dosyasıyla aynı klasöre yerleştirin. Ardından, her görüntüyü tanımlamak ve SIRV açıklama sütununu doldurmak için bir döngü kullanabiliriz.
Aşağıda bağlı makaleler
Tam kod aşağıdadır:
Azure.cognitiveservices.vision.computVision Azure.cognitiveservices.vision.cutVision.models ImportStatuscodes’den Azure.cognitiveservices.vision.compision.models ithalationSweatureTypis.models ithalationSweaturetypis. İçe Aktarım Görüntü görüntüsü Urllib.Parse Import UrlParse # abonelik anahtarınız ve uç nokta aboneliği = “Bilgisayar Görüş Anahtarı” endpoint = “https://we.cognitiveservices.azure.com/” SIRV İstemcisi Kimliği “SIRV_SECRET =” Sirv istemciniz “#create Azure istemcisi computervision_client = computervisionClient (uç nokta, cognitiveservicescredentials (abonelik_key)) # sirv auth da alın. API Reference-https: //apidocs.sirv.com/#connect-to-sirv-api yük = {‘clientId’: SIRV_ID, ‘ClientSecret’: SIRV_SECRET} #CSV dosyasını açıyoruz ve her birinden dönüyoruz F: f: başlıklar = {‘content-type’: ‘Application/json’} yanıt = requests.request (‘post’, ‘https: // fire. Sirv.com/v2/token ‘, data = json.dumps (yük), başlıklar = başlıklar) jeton = reperace.json () [‘ jeton ‘] # bir bilgisayar görüşü istemcisi açıklama_results = computervision_client.describe_image (image) # al Yanıttan (açıklamalar), güven düzeyi baskısı ile (“Uzaktan Görüntünün Açıklaması:”) (Açıklama_results.captions) == 0): yazdır (“Açıklama yok.”) Başka: Açıklama_results.captions içindeki altyazı için: : Yazdır (“‘{}’
Güvenle {: .2f}%”. Format (altyazı.text, altyazı. Sirv. API referans-https: //apidocs.sirv.com/#set-meta-incing ” ‘params = {“dosya adı”: urlparse (image) .path.repplace (‘ n ‘,’)} başlıkları = {başlıklar = { ‘Content-Type’: “Uygulama/JSON”, ‘Yetkilendirme’: ‘Bearer % s’ % jeton} yanıt = istekler (‘Post’, ‘https://api.sirv.com/v2/files/ meta /açıklama ‘, data = description.encode (‘ UTF-8 ‘), başlıklar = başlıklar, params = params) baskı (yanıt) baskı (‘ 4 saniye duraklama ‘) Time.sleep (4) Son zihin bunu bir alışkanlık haline getiriyor Yüklediğiniz her resme Alt Etiket ekleyin. Web sitenizi arama motoru dostu istiyorsanız görüntünüze alternatif metinler eklemek çok önemlidir. Görüntünüze Alt etiketleri eklemediğinizi biliyorsanız, onları izlemek için zaman ayırın ve zaman ayarlayın. Tüm web sitelerinizle ilgili açıklayıcı alt metinler ekleyin. Teşekkür edersiniz Kendiniz sonra! 🙂 Umarım bu, sahip olduğunuz ikilemi siler. Bize bir veya iki satır ver!