Js-core: Gambar memiliki boarder yang terdistorsi saat digunakan di<meta/> menandai

Dibuat pada 21 Okt 2020 · 1Komentar · Sumber: imgix/js-core

Jelaskan bugnya
Gambar campuran dan watermark yang dihasilkan menggunakan imgix-core-js terlihat berbeda dari gambar aslinya saat dibungkus

tag dan dimuat sebagai pratinjau.
gambar dibungkus memiliki penghuni asrama yang menyimpang.

Untuk Mereproduksi
Langkah-langkah untuk mereproduksi perilaku:

ini adalah gambar yang dihasilkan oleh imgix: https://nate.imgix.net/nateLogo.png?q=1&auto=compress%2Cformat&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3. 1 & s = 9d3826f9ca00ae169bebc220d2f4e259
bungkus tautan di atas seperti itu
<meta property="og:image" content="https://nate.imgix.net/nateLogo.png?q=1&auto=compress,format&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3.1&s=9d3826f9ca00ae169bebc220d2f4e259">

dan membagikannya di aplikasi (mis. whatsapp, imessage) yang memiliki kemampuan untuk melihat pratinjau, pratinjau menunjukkan boarder yang terdistorsi.
Perilaku yang diharapkan
Deskripsi yang jelas dan ringkas tentang apa yang Anda harapkan akan terjadi.
pratinjau harus sama dengan gambar aslinya
Screenshot
Jika memungkinkan, tambahkan tangkapan layar untuk membantu menjelaskan masalah Anda.
Pratinjau dengan penghuni yang terdistorsi

Gambar asli

Contoh lain:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Informasi:

imgix-core-js versi: [mis. 2.3.1]

bug

Sumber

ChelseaRong

👍7

>Semua komentar

@ChelseaRong Ternyata, artefak tersebut disebabkan oleh parameter q yang disetel pada nilai yang sangat rendah ( q=1 ). Rincian lengkap tentang apa yang terjadi:

Parameter q=1&auto=compress diterapkan, yang membuat versi kualitas gambar paling rendah
- Karena kualitasnya sangat rendah, versi gambar yang dikompresi dan dirender akhirnya memiliki artefak (garis buram besar dalam kasus ini)
Parameter auto=format menyebabkan masalah ini muncul hanya di beberapa browser / crawler
- Karena pencakar sosial tidak memiliki agen pengguna terdeteksi yang mendukung WebP, kami menyajikan versi .jpg yang mengompres dengan kualitas yang jauh lebih rendah dibandingkan dengan WebP
- Ini juga mengapa kami tidak melihat masalah di browser yang mendukung WebP (seperti Chrome atau Firefox)

Untuk memperbaikinya, saya merekomendasikan pengaturan parameter q menjadi setidaknya 25 .

Saya akan menutup masalah ini karena ini bukan bug imgix-core-js , tetapi jika Anda memerlukan debugging lebih lanjut untuk imgix rendering API, hubungi [email protected].