← Blog
7 phút đọc

Vì sao ảnh của bạn bị xoay ngang sau khi tải lên

Ảnh dựng đứng trên điện thoại, nằm ngang trong khung tải lên? Cờ hướng Exif làm gì, cách phân biệt pixel đã xoay với một cái thẻ, và cách xử lý dứt điểm.

  • exif orientation
  • photo rotation
  • product photography
  • image upload
  • jpeg
  • webp
  • marketplace listings
  • file metadata
Vì sao ảnh của bạn bị xoay ngang sau khi tải lên

Bạn chụp một sản phẩm bằng điện thoại, xoay ngang máy, chạm nút chụp. Trên màn hình, ảnh hiện ra dựng đứng đúng chiều. Vậy mà trong khung tải lên của sàn thương mại, nó nằm nghiêng sang một bên — vẫn file ấy, lệch đúng một phần tư vòng.

Điện thoại của bạn không hỏng. Rất có thể bức ảnh nằm ngang ngay bên trong file, và nó đã như vậy từ lúc bạn bấm máy. Điện thoại vẫn hiển thị đúng chiều cho bạn bất chấp điều đó. Khung tải lên thì không.

File của bạn đang ở một trong hai trạng thái, và chỉ cần một phép kiểm tra duy nhất để phân biệt.

Máy ảnh lưu bức ảnh đúng như cảm biến đã nhìn thấy

Cảm biến ảnh là một hình chữ nhật cố định bắt chặt vào thân máy; nó không xoay theo bạn. Bạn chụp một tấm ảnh dọc, nhưng nó vẫn ghi lại một khung hình ngang, với chủ thể nằm nghiêng bên trong.

Cận cảnh thân máy ảnh đã tháo ống kính, để lộ ngàm kim loại mở ra rộng hơn chiều cao

Nhiều máy ảnh tránh phải ghi lại hàng triệu pixel, thay vào đó chỉ ghi một con số nhỏ vào phần metadata với ý nghĩa "hãy xoay ảnh này một phần tư vòng trước khi hiển thị". Số khác lại xoay hẳn pixel lúc lưu rồi đánh dấu file là đã đúng chiều — đó là lý do hai chiếc điện thoại hành xử khác nhau với cùng một kiểu chụp. Trong file JPEG, con số đó là thẻ Exif 274, Orientation, và nó có thể mô tả cả những khung hình bị lật gương chứ không riêng các phép xoay.

Có chương trình tôn trọng cờ hướng, có chương trình bỏ qua

Các trình duyệt hiện đại thì có đọc. Thuộc tính CSS image-orientation có giá trị khởi tạo là from-image; MDN nói thẳng: "Thông tin EXIF chứa trong ảnh được dùng để xoay ảnh cho phù hợp." Điều đó đã hoạt động trên các trình duyệt kể từ tháng 4 năm 2020.

Mọi thứ không phải trình duyệt thì vẫn có thể bỏ qua cái thẻ này. Các chuẩn web đã hội tụ về việc tôn trọng nó, nhưng vô số bộ giải mã phía máy chủ, công cụ sinh ảnh thu nhỏ và thư viện xử lý ảnh được viết ra trước cuộc hội tụ đó, và chúng chẳng bao giờ ngó tới cái thẻ ấy — cũng chẳng có gì bắt buộc chúng phải làm thế.

Vậy nên câu hỏi không bao giờ là "ảnh của tôi có bị nằm ngang không" mà là "thứ đang hiển thị nó có đọc cờ hướng hay không". Ứng dụng thư viện ảnh của bạn thì có. Bộ sinh ảnh thu nhỏ của một sàn thương mại thì chưa chắc.

Xoay ảnh trong thư viện có thể chỉ ghi lại mỗi cái cờ

Bạn chạm nút xoay, và kết quả tùy thuộc vào ứng dụng. Hai chuyện rất khác nhau có thể xảy ra.

Một bàn tay cầm smartphone ngoài trời, màn hình đang mở ứng dụng thư viện ảnh đầy hình

  • Ứng dụng đổi giá trị hướng và không đụng gì tới dữ liệu pixel. Tức thì, không mất dữ liệu, và vô hình với mọi thứ bỏ qua cờ hướng: ảnh của bạn vẫn nằm ngang trong file.
  • Ứng dụng mã hóa lại: nó giải mã pixel, xoay chúng, ghi ra một file mới với cờ hướng đã đặt lại. Phép xoay được ghi cứng vào ảnh và sống sót ở mọi nơi. Với PNG hay WebP không mất dữ liệu, việc này chẳng tốn gì; với JPEG, nó thường tốn một thế hệ mã hóa lại — đáng trả một lần và không đáng lặp lại.

Ứng dụng đi theo hướng nào là điều bạn không thể đoán ra từ cái nút, và điều đó từng thay đổi giữa các phiên bản của cùng một ứng dụng. Đừng phỏng đoán gì cả; hãy kiểm tra kết quả đầu ra.

Tệ hơn là loại công cụ xoay pixel nhưng lại chép nguyên phần metadata cũ: cờ hướng vẫn nói "hãy xoay", trong khi pixel thì đã xoay rồi, thế là những chương trình biết tôn trọng cờ sẽ xoay bức ảnh thêm lần nữa.

Cách nhận biết file của bạn đang ở trạng thái nào

Bạn không thể giải quyết chuyện này bằng cách nhìn kỹ hơn, mà chỉ bằng cách kiểm tra một thứ không phải là bản xem trước.

Đôi tay cầm smartphone đang hiện ảnh chụp, giơ trước một chiếc laptop đang mở với màn hình hiển thị đúng kiểu thư viện ảnh đó trong trình duyệt

  • Đối chiếu hình dạng với con số. Nếu một bức ảnh trông có vẻ dọc nhưng lại được báo là rộng hơn cao trong phần thuộc tính của file, thì pixel đang nằm ngang và chính cái cờ đang làm việc. Một số trình xem cũng chỉnh lại luôn những con số ấy, nên một sự chênh lệch chứng minh được nhiều hơn một sự trùng khớp.
  • Đọc thẳng cái cờ. Trình duyệt, trình xem ảnh trên máy tính và ảnh thu nhỏ trong trình quản lý file giờ gần như đều tôn trọng cái thẻ này, nên việc chúng đồng thuận với nhau chẳng chứng minh được gì. Hãy làm việc trên một bản sao, tuyệt đối không phải bản gốc, rồi mở nó trong một trình xem Exif để đọc trực tiếp Orientation. Bất kỳ giá trị nào khác 1 — thường được hiển thị là "Normal" — đều có nghĩa là cái cờ đang làm việc và pixel thì không dựng đúng chiều.

Hãy xử lý dứt điểm hướng ảnh trước khi bất cứ thứ gì khác chạm vào file

remover.bg nhận file PNG, JPEG và WebP dung lượng tới 25 MB rồi trả về một file mới đã gỡ sạch phông nền. Đây là công cụ xóa phông nền, không phải trình chỉnh sửa ảnh: việc xoay thuộc về ứng dụng chỉnh sửa ảnh trên điện thoại hoặc công cụ thiết kế của bạn, trước khi bạn tải lên.

Thứ tự đó quan trọng vì bạn đang tạo ra một file mới. Cả PNG lẫn vùng chứa WebP đều có chỗ để đặt dữ liệu Exif — đặc tả WebP của Google cho phép lưu metadata "trong các Chunk 'EXIF' hoặc 'XMP '" — nhưng trình chỉnh sửa mà bạn đã xoay ảnh trong đó có ghi metadata vào bản xuất ra hay không lại là quyết định của nó, chứ không phải của bạn. Hãy ghi cứng phép xoay vào pixel, thế là chẳng còn cái cờ nào để mà mất. Ghi chú của chúng tôi về xuất WebP mà không cần chuyển đổi nói kỹ hơn về định dạng ấy.

Một trình tự làm việc hợp lý:

  1. Xoay trong một trình chỉnh sửa rồi xuất ra một bản sao, thay vì chạm nút xoay trong thư viện ảnh.
  2. Kiểm tra giá trị Orientation trên chính bản sao đã xuất đó.
  3. Tải nó lên để xóa phông nền.
  4. Đặt ảnh tách nền lên một màu trơn hoặc lên chính bức ảnh của bạn, kèm bóng đổ nếu nó cần trông như đang đặt trên một bề mặt.

Những đội đẩy khối lượng lớn qua HTTP API để xóa phông nền hàng loạt nên chuẩn hóa hướng ảnh ngay trong quy trình trước đã: một ảnh gốc nằm ngang sẽ cho ra một ảnh tách nền nằm ngang, lặp lại cả nghìn lần. Hướng ảnh nằm ngoài các quy tắc phông nền trong hướng dẫn ảnh sản phẩm Amazon của chúng tôi, nhưng một tin đăng nằm ngang thì trông cẩu thả bất kể bạn đã làm đúng mọi thứ khác.

Thói quen đáng xây dựng

Hãy tin vào file, đừng tin bản xem trước. Xoay bằng cách xuất file và đọc Orientation một lần trên bản sao; khi đó bức ảnh sẽ dựng đúng chiều như nhau trong trình duyệt, trong bộ sinh ảnh thu nhỏ lẫn trong hàng đợi của nhà in.

Đọc tiếp