Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. GIF
Design

10 cách để tối ưu hóa các tập tin GIF động

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

GIF là định dạng chuẩn để nén hình ảnh với các vùng màu sắc đặc rộng lớn và các chi tiết sắc nét như ảnh nghệ thuật, biểu trưng hoặc chữ in. Định dạng hình ảnh có độ sâu màu 8 bit đã biến mất khỏi trang web sau sự giới thiệu của các định dạng tập tin JPEG và PNG, nhưng GIF vẫn là định dạng tập tin web được ưa thích nhờ tính năng khung hình động (frame animation) của nó. Trong hướng dẫn này, chúng ta sẽ đi sâu vào tất cả các tùy chọn có sẵn để chuyển đổi video sang ảnh động GIF (GIF animation) và cách tối ưu hóa kích thước tập tin. Cùng bắt đầu nào!

Nhân tiện, nếu bạn làm việc với ảnh động GIF, thì bạn có thể sẽ cần tải về một giải pháp tự động: action Gift Export Photoshop sẵn có trên Envato Market, cho phép bạn chụp nhiều hình ảnh, tự động tải chúng vào Photoshop, và xuất chúng dưới dạng GIF.


1. Cắt xén ảnh động

Trước hết, bạn sẽ cần phải mở tập tin video đó với Photoshop. Hầu hết thời gian bạn sẽ không cần toàn bộ trình tự này cho ảnh động GIF, vì vậy bạn có thể cắt xén đoạn video đó trong Bảng Timeline. Bật tùy chọn Loop và thử tìm một chỗ thích hợp để cắt video của bạn.

10 Ways to Optimize a GIF File

2. Giảm kích thước hình ảnh

Bạn có thể giảm kích thước hình ảnh từ trình đơn Image hoặc làm sau đó trong hộp thoại Save for Web. Tôi thích làm điều đó ngay từ đầu với hộp thoại Image Size vì nó có thể tiết kiệm thời gian tải đáng kể khi bạn mở hộp thoại Save for Web. Layer video của bạn sẽ phải chuyển thành Smart Object nếu bạn thay đổi kích thước hình ảnh, nhưng bạn không cần phải lo lắng về điều này, nó sẽ không ảnh hưởng đến bất kỳ tiến độ công việc nào của chúng ta.

10 Ways to Optimize a GIF File

3. Lưu lại cho trang Web

Điều tôi yêu thích nhất trong quy trình làm việc này là chúng ta không phải thực hiện bất kỳ sự chuyển đổi nào trên bảng Timeline để có thể lưu một hình khung ảnh động, như hộp thoại Save for Web sẽ làm việc cho chúng ta một khi bạn chọn định dạng tập tin GIF làm đầu ra của bạn. Lưu ý rằng các tùy chọn Animation sẽ xuất hiện ở góc dưới cùng bên phải của hộp thoại. Trong trường hợp bạn quyết định tiếp tục giảm kích thước của hình ảnh của bạn, bạn vẫn có thể làm điều đó ở đây.

10 Ways to Optimize a GIF File

4. Giảm số lượng khung hình

Bạn có thể tiếp tục giảm kích cỡ của ảnh động GIF nếu bạn mở lại GIF xuất ra trở lại trong Photoshop và xóa mỗi khung ảnh thứ hai hoặc thứ ba từ bảng Timeline. Sau đó, bạn chọn tất cả các khung còn lại và tăng thời gian của chúng để bù đắp cho các khung cảnh bị mất. Nếu bạn không thực hiện sự đền bù này, thì hình ảnh động của bạn sẽ được phát nhanh hơn bản gốc. Khi bạn đã sẵn sàng, bạn có thể lưu các phiên bản mới, nhỏ hơn nhiều so với bản gốc.

10 Ways to Optimize a GIF File

5. Số lượng màu

Tùy chọn thích hợp nhất để tối ưu hóa kích thước của tập tin GIF là số lượng màu được sử dụng trong Color Table. Số lượng màu tối đa là 256, có nguồn gốc từ giới hạn độ sâu màu 8 bit. Nói chung, nên sử dụng 64 màu hoặc ít hơn, nhưng phụ thuộc vào video nguyên gốc mà bạn có thể cần phải tăng số lượng màu sắc để có được kết quả tốt hơn.

10 Ways to Optimize a GIF File

6. Chọn thuật toán giảm màu nào?

  • Nhận thức để tạo ra một bảng màu tùy chỉnh bằng cách ưu tiên cho màu sắc mà mắt người có độ nhạy cao hơn.
  • Lựa chọn để tạo ra một bảng màu tương tự như bảng màu Perceptual, nhưng ưu tiên các phạm vi màu rộng và gìn giữ màu sắc của trang Web. Bảng màu này thường tạo ra các hình ảnh có tính toàn vẹn màu sắc tốt nhất. (Lựa chọn là lựa chọn mặc định.)
  • Thích nghi để tạo ra một bảng màu tùy chỉnh bằng cách lấy mẫu các màu từ một chuỗi màu xuất hiện phổ biến nhất trong hình ảnh đó. Ví dụ, một hình ảnh chỉ với các sắc màu xanh lá cây và màu dương tạo ra một bảng màu được làm chủ yếu là màu xanh lá cây và xanh dương. Hầu hết các hình ảnh đều tập trung màu sắc trong các phạm vi nhất định của chuỗi màu đó.
  • Hạn chế sử dụng bảng màu tiêu chuẩn, 216 màu, an toàn trên web được sử dụng chung cho các bảng 8-bit (256 màu) của Windows và Mac OS. Tùy chọn này đảm bảo rằng không có sự hòa sắc của trình duyệt nào được áp dụng cho màu sắc khi hình ảnh được hiển thị sử dụng màu 8-bit. Nếu hình ảnh của bạn có ít hơn 216 màu, các màu không sử dụng sẽ bị xóa khỏi bảng.
10 Ways to Optimize a GIF File

7. Hòa sắc (Dithering)

Vì các tập tin GIF chứa một số lượng màu giới hạn, nên chúng ta có thể bắt chước những màu còn thiếu bằng các màu sẵn có sử dụng phương pháp hòa sắc. Từ trình đơn "Dither", chúng ta chọn một trong những thuật toán cho sự ngụy tạo như vậy. Phương pháp "Diffusion (khuyếch tán)" cho phép chúng ta điều chỉnh lượng hòa sắc. Với thuật toán "Pattern (khuôn mẫu)" và "Noise (nhiễu)" thì không có gì để điều chỉnh. Sự hoà sắc trong một bức ảnh càng nhiều, thì kích cỡ tập tin càng lớn. Hòa sắc thêm các điểm ảnh màu khác nhau ở gần nhau để mô phỏng các màu thứ cấp hoặc sự chia độ mượt mà của màu sắc. Một số hình ảnh phải có chế độ hòa sắc để trông đẹp đẽ, nhưng tốt nhất nên sử dụng số lượng hòa sắc nhỏ nhất có thể để giữ kích thước tập tin nhỏ nhất.

10 Ways to Optimize a GIF File

8. Web Snap, nén có tổn hao (Lossy), trong suốt (Transparency) và Interlaced

  • Web Snap được sử dụng để giúp ngăn ngừa sự hòa sắc trong trình duyệt. Nó được thực hiện bằng cách chụp một số màu sắc vào các màu trên Web-safe. Các màu sắc trên Web-safe thể hiện trong GIF càng nhiều, thì kết quả sẽ càng có ít sự hòa màu của trình duyệt. Giá trị 0% sẽ không thay đổi bất kỳ màu nào trong khi giá trị 100% sẽ thay đổi tất cả các màu sắc trong hình ảnh đó trên Web-safe.
  • Nén có tổn hao (Lossy compression) loại bỏ thông tin thị giác, có thể làm giảm kích thước tập tin.
  • Nếu hình ảnh có Transparency, hãy chọn Transparency để giữ các điểm ảnh trong suốt; bỏ chọn Transparency để lấp đầy các điểm ảnh trong suốt và trong suốt một phần với màu mờ.
  • Tệp tin GIF Interlaced được tải trong trình duyệt trong vài lần trôi qua (như tệp JPEG Progressive).


9. So sánh các phiên bản gốc và được tối ưu hóa

Khi bạn thêm nhiều thay đổi tùy chỉnh, bạn có thể kiểm tra sự khác biệt về kích thước và chất lượng tệp bằng cách sử dụng chế độ xem 2-Up.

10 Ways to Optimize a GIF File

10. Xem trước, Lưu Preset và Tối ưu hóa Kích thước File

Nếu bạn hài lòng với cài đặt của mình, hãy xem tập tin GIF cuối cùng của bạn với tùy chọn Preview trong trình duyệt và đừng quên lưu cài đặt của bạn dưới dạng cài sẵn. Bạn cũng có thể chỉ định một giới hạn kích thước tập tin với tùy chọn bổ sung này từ Optimize Menu và khi điều này được Photoshop, thì nó sẽ cố gắng để phù hợp với kích thước đó với chất lượng hình ảnh tốt nhất có thể.

10 Ways to Optimize a GIF File
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.