Định cỡ hình ảnh có thể hướng dẫn: 13 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:35

Bạn có gặp sự cố khi lấy hình ảnh về kích thước chính xác? Kích thước hình ảnh của bạn có quá lớn và tràn khung như hình trên không? Hướng dẫn này cố gắng tóm tắt những gì tôi đã học được để giải quyết vấn đề này.

Tôi đã được Nhân viên Hướng dẫn cho biết rằng tất cả các hình ảnh tải lên đều được sao chép thành nhiều tỷ lệ khung hình khác nhau. Nhóm hình ảnh này sau đó được lấy từ và có kích thước khác nhau tùy thuộc vào thiết bị bạn đang xem hướng dẫn từ. Không có cách nào để chỉ định trong trình chỉnh sửa thông thường kích thước và tỷ lệ hiển thị.

Sau đó, họ gợi ý rằng "Một tùy chọn khác có thể hoạt động là nếu bạn tải lên hình ảnh có tỷ lệ khung hình truyền thống hơn. Bất kỳ hình ảnh nào từ 16: 9 đến 4: 3 sẽ hiển thị rất đẹp."

Lưu ý rằng họ nói rằng điều này "có thể" hoạt động. Đây là những gì tôi đã tìm thấy trong cuộc đấu tranh của mình để làm cho hình ảnh của tôi hiển thị một cách đẹp đẽ. (Lưu ý rằng tôi đang sử dụng hình ảnh từ hướng dẫn "Khối lập phương Rubik dễ dàng" của tôi, do đó tất cả các hình khối đó!)

Hình ảnh trên có kích thước ban đầu (600x195), không nằm trong phạm vi tỷ lệ khung hình truyền thống. Như bạn có thể thấy, Guiductables đang hiển thị hình ảnh này được phóng to quá lớn với các cạnh bên trái và bên phải bị cắt bỏ. Hãy xem chúng ta có thể làm gì để hình ảnh này hiển thị đúng cách.

Bước 1: Hãy thử tỷ lệ khung hình 16: 9

Vì vậy, hãy thử tỷ lệ khung hình 16: 9 (chiều rộng: chiều cao). Tôi sẽ giữ nguyên chiều rộng ban đầu là 600 pixel, 16: 9 có nghĩa là chiều cao cần là 338 pixel, vì vậy chúng tôi sẽ tạo kích thước canvas là 600x338 và thả hình ảnh 600x195 đó vào đó.

Vì vậy, chúng ta hãy xem hình ảnh 600x338 (tỷ lệ khung hình 16: 9) này trông như thế nào. Thật thú vị, khi tôi thả hình ảnh này vào và xem trước, nó hoàn toàn phù hợp - các cạnh trái và phải không bị cắt ra! Tôi đã chụp ảnh màn hình của nó chỉ để làm bằng chứng, hãy xem nó trong trang trình bày tiếp theo.

Tuy nhiên, khi tôi xem điều này trong trình duyệt của mình (Chrome), những gì tôi thấy trong hình ảnh trên, đó là phần bên phải và bên trái một lần nữa bị cắt nhỏ! Vì vậy, từ thử nghiệm này, có vẻ như việc thay đổi kích thước thành tỷ lệ khung hình 16: 9 sẽ không giải quyết được vấn đề của chúng tôi!

Lưu ý thêm, 16: 9 là tỷ lệ khung hình phổ biến "mới" được gọi là "màn hình rộng" trong khi 4: 3 là "toàn màn hình" kiểu cũ phổ biến trong thời kỳ TV ống. Vâng, các bạn millennial có lẽ không biết tôi đang nói gì.

Bước 2: 16: 9 Hình ảnh được tải lên mới khi xem trong bản xem trước

Hình ảnh này là ảnh chụp màn hình cho thấy rằng hình ảnh 16: 9 của chúng tôi trông hoàn hảo trong Bản xem trước. Thành công phải không? Chà, không nhanh như vậy - hãy xem điều gì sẽ xảy ra khi chúng tôi thực sự xem trang này trong trình duyệt của mình (Chrome)! Các cạnh bên trái và bên phải bị cắt bớt một lần nữa! Chỉ cần quay lại để trình chiếu trước đó và tự xem.

Bài học rút ra - đừng tin vào Bản xem trước! Những gì trông đẹp trong Bản xem trước được hiển thị khác khi xem thực tế bằng trình duyệt!

Ngoài ra, có, có rất nhiều khoảng trắng bên dưới hình ảnh của tôi. Đó là bởi vì tôi đã thả một hình ảnh 600x195 vào canvas 600x338 và đặt nó ở trên cùng, vì vậy có tất cả khoảng trắng trống ở dưới cùng. Chúng ta có thể làm gì về điều đó? Chà… chúng tôi sẽ cố gắng giải quyết vấn đề đó trong trang trình bày sau.

Vì vậy, chúng ta hãy tiếp tục xem làm thế nào chúng ta có thể làm cho hình ảnh này hiển thị toàn bộ.

Bước 3: 16: 9 được hiển thị với mặt L&R bị cắt

Chỉ để ghi lại, trong trường hợp vì bất kỳ lý do gì mà trình duyệt của bạn hiển thị những hình ảnh 16: 9 này một cách hoàn hảo, thì đây là những gì tôi đang nói đến. Đây là ảnh chụp màn hình về cách tôi thấy hình ảnh 16: 9 của mình ở Bước 1 được hiển thị sau khi "ổn định" sau bản xem trước ban đầu - lưu ý rằng bên trái và bên phải bị cắt bỏ.

Nếu bạn thấy hình ảnh Bước 1 của tôi được hiển thị hoàn hảo, tốt, thật tuyệt. Cho tôi biết! Nhưng đây là cách tôi đang nhìn thấy nó. Vâng, nó tốt hơn nhiều so với hình ảnh gốc từ trang tiêu đề, nhưng nó vẫn bị cắt bỏ. Vì vậy, đối với tôi, bất chấp lời khuyên từ nhân viên của Huấn luyện viên, tỷ lệ khung hình 16: 9 không hoàn toàn cắt giảm nó. Hãy chuyển sang tỷ lệ khung hình 4: 3.

Bước 4: Hãy thử tỷ lệ khung hình 4: 3

Vì vậy, chúng ta hãy thử tỷ lệ khung hình 4: 3. Tôi sẽ giữ nguyên chiều rộng ban đầu là 600 pixel, 4: 3 có nghĩa là chiều cao cần là 450 pixel, vì vậy chúng tôi sẽ tạo kích thước canvas là 600x450 và thả hình ảnh 600x195 đó vào đó.

Hình ảnh 600x450 (tỷ lệ khung hình 4: 3) này trông như thế nào?

Một lần nữa, khi tôi lần đầu tiên thả nó vào, hình ảnh trông rất tuyệt (ngoại trừ tất cả khoảng trắng ở dưới cùng). Trái và Phải được hiển thị tốt. Nhìn vào nó trong trình duyệt, có vẻ như Right & Left tiếp tục được hiển thị tốt.

Như đã lưu ý trước đó, tất cả khoảng trắng trống bên dưới hình ảnh là do tôi đã thả hình ảnh 600x195 của mình vào canvas 600x450 và chỉ đặt nó ở trên cùng.

Bài học kinh nghiệm - Tỷ lệ co 4: 3 dường như được yêu cầu để các cạnh Bên phải và Bên trái không bị cắt bỏ. Thật không may, điều này có nghĩa là sẽ có rất nhiều khoảng trắng cho các hình ảnh ngắn và rộng, vì bạn sẽ phải thả những hình ảnh đó vào canvas có kích thước 4: 3. Vâng, bạn có thể căn giữa hình ảnh của mình để có khoảng trắng bằng nhau ở trên và dưới nhưng bất kể, sẽ có rất nhiều khoảng trắng ở trên hoặc dưới hình ảnh của bạn, nhưng theo hiểu biết tốt nhất của tôi, đây là sự thỏa hiệp mà bạn phải tạo trong Các tài liệu hướng dẫn để hình ảnh của bạn hiển thị nguyên vẹn.

Bước 5: 4: 3 Với Hình ảnh được Căn giữa

Đây là cùng một hình ảnh 600x195 được thả vào canvas 600x450 nhưng được căn giữa để có khoảng trắng trống bằng nhau ở trên cùng và dưới cùng. Có vẻ tốt hơn một chút, văn bản dường như không tách biệt quá xa so với hình ảnh.

Bước 6: 4: 3 Với Hình ảnh ở Dưới cùng

Và cuối cùng, đây là hình ảnh tương tự được thả vào và chuyển xuống dưới cùng. Bây giờ có rất nhiều khoảng trắng trống trên đầu hình ảnh. Hình ảnh bây giờ thực sự được tách ra khỏi thanh tiêu đề, nhưng nó gần với văn bản hơn. Vì vậy, đây là những thỏa hiệp và bài học kinh nghiệm của bạn:

• 4: 3 dường như là tỷ lệ khung hình bạn cần sử dụng để hình ảnh được hiển thị toàn bộ trong nội dung hướng dẫn.
• không tin tưởng vào bản xem trước - nó có thể hiển thị hình ảnh của bạn một cách hoàn hảo, nhưng các phần có thể bị cắt bớt trong trình duyệt thực tế

Bước 7: Chiều rộng tối thiểu là bao nhiêu?

Bây giờ chúng ta hãy xem chiều rộng tối thiểu phải là bao nhiêu. Hình ảnh hiển thị có kích thước 382x206, gần với tỷ lệ 2: 1, có vẻ rất lớn phải không? Rõ ràng, Guiductables đã phóng to hình ảnh để làm cho nó vừa với một số chiều rộng đã đặt, có lẽ là 640 pixel, tôi không chắc.

Nhưng nó vừa vặn vì nó "vuông" hơn - tức là nó không quá rộng so với chiều cao của nó. Chờ đã, tôi lại bị lừa bởi Xem trước đó! Nó thực sự không phù hợp - các cạnh R&L lại bị cắt bớt.

Thực ra, điều này thật kỳ quặc, không chỉ có bản xem trước mới bị rối tung. Tôi thực sự đã xem xét nó trong trình duyệt và lúc đầu nó hiển thị đúng (tức là các cạnh R&L không bị cắt bỏ). Nhưng nhìn lại nó thông qua trình duyệt, bây giờ hình ảnh đang hiển thị thay đổi kích thước với các cạnh R&L bị cắt bớt. Số lẻ.

Vì vậy, chúng ta hãy thử làm cho hình ảnh nhỏ hơn. Chúng tôi sẽ thu nhỏ hình ảnh xuống 200x108, giữ nguyên tỷ lệ khung hình 2: 1.

Bước 8: Thu nhỏ hình ảnh nhưng vẫn giữ nguyên tỷ lệ khung hình

Vì vậy, tôi thay đổi kích thước hình ảnh đó thành 200x108, giữ nguyên tỷ lệ khung hình 2: 1.

Bây giờ một lần nữa nó có vẻ vừa vặn lúc đầu (với độ phân giải (chất lượng hình ảnh) bị giảm sút rất nhiều!) Nhưng tất nhiên bạn có thể đang nhìn vào nó và nó không vừa vặn chút nào, và trông giống hệt như hình ảnh ban đầu ngoại trừ bản gốc có độ phân giải tốt hơn. Một lần nữa, Guiductables đang mở rộng hình ảnh để làm cho nó vừa với một số chiều rộng đã đặt, vì vậy đây là lý do tại sao hình ảnh nhỏ hơn (200x108) này trông rất kinh khủng, tệ hơn nhiều so với 382x206 ban đầu.

Tôi nói "có thể là" bởi vì tôi thực sự không biết cách thức những hình ảnh này hiển thị trong trình duyệt của bạn. Vì bất kỳ lý do gì, nếu tôi làm mới bộ nhớ cache của mình và xem lại bản có thể hướng dẫn này, kích thước hình ảnh của tôi dường như không nhất quán nên tôi thực sự không biết những gì có thể làm được ngoại trừ việc nó có thể không nhất quán. Vì vậy, mục tiêu của Có thể hướng dẫn này - để tìm ra cách định kích thước hình ảnh để chúng được hiển thị ít nhất là nhất quán!

Bước 9: Bằng chứng rằng hình ảnh hiển thị đúng lúc đầu

Đây là những gì tôi nhìn thấy lúc đầu ngay sau khi tải lên hình ảnh - nó phù hợp! (Lưu ý rằng tôi phải điều chỉnh ảnh chụp màn hình ở trên vào một hình ảnh 1600x1200 (tức là tỷ lệ 4: 3) để làm cho những người hướng dẫn có thể hiển thị toàn bộ ảnh chụp màn hình!)

Nhưng tất nhiên bạn biết khi bạn nhìn vào hình ảnh đó, một vài hình ảnh trượt lại bây giờ, nó không còn phù hợp nữa. Hãy xem chiều rộng tối thiểu cần phải là bao nhiêu để làm cho nó vừa vặn.

Bước 10: Thử 382x287 (Tỷ lệ 4: 3)

Tôi giữ chiều rộng 382 và bỏ hình ảnh 382x206 ban đầu vào canvas 382x287 để làm cho nó có tỷ lệ khung hình 4: 3 vì trước đây chúng tôi đã phát hiện ra rằng có thể hướng dẫn cần một hình ảnh phù hợp với tỷ lệ 4: 3 đó để hiển thị toàn bộ.

Vì vậy, bây giờ có rất nhiều khoảng trắng trống bên dưới. Nó phù hợp với không có gì bị cắt nhỏ, nhưng một lần nữa nó được mở rộng để lấp đầy một số chiều rộng đã đặt, vì vậy hình ảnh không sắc nét. Hãy thử tìm xem chiều rộng có thể hướng dẫn hoàn hảo này là bao nhiêu.

Bước 11: Mở rộng hình ảnh từ 300x206 đến 600x206 để xem nó có hiển thị tốt hơn không

Tôi đã thả hình ảnh 382x206 (2: 1) ban đầu vào một canvas 600x206 (3: 1) chỉ để xem liệu việc mở rộng nó lên 600 pixel có làm cho những người hướng dẫn hiển thị toàn bộ hình ảnh hay không. Một lần nữa, lúc đầu nó đã làm, nhưng như bạn có thể thấy bây giờ nó không.

Đây là một điều thực sự kỳ lạ - mỗi khi bạn thả một hình ảnh vào lần đầu tiên, có vẻ như nội dung hướng dẫn sẽ hiển thị hình ảnh đó một cách chính xác, bất kể kích thước hoặc tỷ lệ khung hình của hình ảnh đó là bao nhiêu. Lần này tôi thậm chí đã đăng xuất khỏi Hướng dẫn và đóng tab đó, sau đó truy cập lại "mới" có thể hướng dẫn này để nói chuyện để xác minh xem hình ảnh có còn hiển thị đúng hay không. Thông thường, điều này là đủ để cho phép Huấn luyện viên thực hiện công việc của mình và bắt đầu thay đổi kích thước hình ảnh không theo tỷ lệ khung hình 4: 3 và hiển thị chúng với các cạnh bên trái và bên phải được cắt nhỏ.

Trước sự ngạc nhiên của tôi, một vài lần đầu tiên tôi xem lại "tươi" có thể hướng dẫn này, hình ảnh này vẫn hiển thị toàn bộ, nhưng than ôi, sau khi tôi bỏ đi để làm việc khác và có thể đến một giờ sau, hình ảnh này bắt đầu hiển thị được phóng to với các cạnh L&R được cắt bớt một lần nữa giống như bạn thấy ở trên.

Tại sao hoặc làm thế nào điều này xảy ra? Tôi không biết. Tôi không hiểu tại sao phải đợi một khoảng thời gian sau khi tải lên một hình ảnh sẽ làm cho những người hướng dẫn có thể hiển thị nó theo cách khác, nhưng nó có. Để chứng minh, tôi sẽ trình chiếu ảnh chụp màn hình của mình về hình ảnh trên hiển thị hoàn hảo trong oh đầu tiên, 10-15 phút sau khi tôi tải nó lên trong trang trình bày tiếp theo.

Bước 12: Bằng chứng rằng hình ảnh hiển thị đúng ban đầu sau khi tải lên

Đây là ảnh chụp màn hình cho thấy hình ảnh 600x206 hiển thị toàn bộ ngay sau khi tải lên. Đây là ảnh chụp màn hình của slide trước. Quay lại trang trình bày trước và bạn có thể thấy hình ảnh hiện tại đã được kích hoạt như thế nào!

Lưu ý rằng ảnh chụp màn hình của tôi thực sự có kích thước 1563x766 nhưng khi tôi học được từ các thử nghiệm của mình ở phần đầu Có thể hướng dẫn này, tôi biết vì nó không phù hợp với tỷ lệ khung hình 4: 3 (1563x766 là khoảng 4: 2), vì vậy nếu tôi muốn vừa tải lên ảnh chụp màn hình đó ở kích thước ban đầu Có thể hướng dẫn sẽ cắt bớt các cạnh. Vì vậy, tôi đã thả hình ảnh đó vào canvas 4: 3, đó là lý do tại sao có rất nhiều khoảng trắng trống bên dưới ảnh chụp màn hình của tôi.

Lưu ý rằng ảnh chụp màn hình cũng đã được chụp trước khi tôi thay đổi tiêu đề của Bước 11 và nhập xong tất cả văn bản này trong trường hợp bạn đang thắc mắc về điều đó!

Bài học rút ra - xem hình ảnh đã tải lên của bạn trong trình duyệt ngay sau khi bạn tải lên sẽ không nhất thiết cho thấy nó sẽ được hiển thị như thế nào trong tương lai. Vì bất kỳ lý do gì, hầu hết mọi kích thước và / hoặc tỷ lệ hình ảnh dường như hiển thị đẹp ngay lập tức sau khi tải lên và thậm chí trong khoảng 10-15 phút sau khi tải lên và thậm chí sau khi bạn đăng xuất khỏi hướng dẫn và xem hình ảnh mới từ phiên trình duyệt mới, v.v..

Nhưng hãy đợi khoảng một giờ hoặc hơn, và mọi thứ sẽ thay đổi! Hình ảnh của bạn, nếu nó không phù hợp với tỷ lệ khung hình 4: 3, sẽ được điều chỉnh (thường là phóng to) bởi Có thể hướng dẫn để các cạnh được cắt bớt.

Bước 13: Điểm mấu chốt - Những gì tôi đã học được

Vì vậy, điểm mấu chốt - tôi đã học được gì?

1. Để hiển thị toàn bộ hình ảnh, việc giữ tỷ lệ khung hình 4: 3 (chiều rộng: chiều cao) là điều bắt buộc!

2. Sử dụng hình ảnh gốc lớn với độ phân giải cao nhất mà bạn có thể và thả chúng vào canvas tỷ lệ 4: 3. Nếu quá lớn, Guiductables sẽ giảm kích thước và bạn sẽ có những hình ảnh sắc nét đẹp mắt.

3. Nếu hình ảnh của bạn quá nhỏ (chiều rộng ít hơn 600 pixel nhiều), Huấn luyện viên sẽ mở rộng hình ảnh của bạn và làm cho hình ảnh rộng ít nhất 600 pixel, do đó làm cho hình ảnh kém sắc nét hơn. Tôi nói "ish" bởi vì tôi không thực sự biết chính xác chiều rộng mà Huấn luyện viên đang sử dụng nhưng nó có vẻ gần bằng 600. Có lẽ là 640, đó là chiều rộng phổ biến trong những ngày màn hình ống cũ của trường học.

600x450 và 640x480 là tỷ lệ khung hình 4: 3. Tất cả các màn hình ống "toàn màn hình" của trường cũ đều có kích thước 640x480 (rộng x cao).

4. Phải làm gì nếu ảnh gốc của bạn không rộng ít nhất 600 pixel? Tất cả những gì bạn có thể làm là thả nó vào canvas phù hợp với tỷ lệ 4: 3 để hiển thị hình ảnh của bạn gần với kích thước ban đầu của nó. Nếu hình ảnh ban đầu của bạn nhỏ, sẽ có rất nhiều khoảng trắng trống, vì vậy hãy cố gắng căn giữa hình ảnh của bạn hoặc đặt khoảng trắng ở trên hoặc dưới hình ảnh của bạn và làm cho nó trông đẹp nhất có thể.

Theo hiểu biết tốt nhất của tôi, đây là thỏa hiệp mà bạn sẽ phải thực hiện trong Các tài liệu hướng dẫn để hình ảnh của bạn hiển thị nguyên vẹn.

Ví dụ: hình ảnh trên là kích thước canvas 600x450 với hình ảnh 382x206 được thả vào đó và căn giữa để chúng ta có khoảng trắng trống bằng nhau ở trên và dưới. Hình ảnh hiển thị gần đúng với kích thước ban đầu của nó, tôi nghĩ Guiductables có thể đang mở rộng nó thành 640x480 (mở rộng không đáng kể) vì vậy đó là điều tốt nhất chúng tôi có thể làm với hình ảnh gốc đó.

5. KHÔNG tin tưởng bản xem trước hoặc tin tưởng giao diện hình ảnh của bạn trong vài giờ đầu tiên sau khi tải chúng lên có thể hướng dẫn! Vì bất kỳ lý do gì, kích thước hình ảnh dường như không duy trì nhất quán cho đến vài giờ sau khi bạn tải chúng lên.

Mỗi lần, khi bạn thả một hình ảnh vào lần đầu tiên, có vẻ như nội dung hướng dẫn sẽ hiển thị hình ảnh đó một cách chính xác, bất kể kích thước hoặc tỷ lệ co của hình ảnh đó là bao nhiêu. Nó thậm chí có thể vẫn hiển thị chính xác trong một khoảng thời gian sau đó, nhưng ĐỪNG BỊ LỖI vì cuối cùng, nó sẽ thay đổi kích thước của chúng và gây ra cho bạn sự cố trừ khi bạn tuân theo quy tắc 4: 3 đó!

Hy vọng điều này sẽ hữu ích và xin vui lòng, nếu bạn tìm thấy một cách tốt hơn hoặc có bất kỳ gợi ý nào khác, hãy cho tôi biết!