Làm thế nào để bạn làm động một hình ảnh trong html?

Lưu ý rằng chúng tôi vẫn đang tải một hình ảnh lớn và chỉ thu nhỏ hình ảnh trong trình duyệt, điều này không lý tưởng cho thời gian tải trang nhanh hoặc kích thước trang thấp hơn. Hãy xem cách ImageKit có thể được sử dụng để giải quyết vấn đề này và cũng có thể tạo lại các hiệu ứng hình ảnh CSS với nó

Tạo hiệu ứng hình ảnh CSS thú vị với ImageKit

ImageKit. io là một dịch vụ phân phối và quản lý phương tiện hoàn chỉnh cung cấp khả năng tối ưu hóa hình ảnh thông minh theo thời gian thực, thay đổi kích thước hình ảnh, cắt xén và các phép biến đổi khác

Các chuyển đổi và tối ưu hóa thời gian thực của ImageKit giúp chúng tôi cung cấp các hình thu nhỏ hình ảnh cách điệu trên tất cả các nền tảng. Bạn cũng có thể sử dụng những hình ảnh này trong các email không hỗ trợ CSS mở rộng

Phần này sẽ trình bày cách sử dụng ImageKit để đạt được một số hiệu ứng được triển khai với CSS thông thường ở trên

Hiệu ứng thang độ xám của hình ảnh với ImageKit

Có thể dễ dàng đạt được hiệu ứng thang độ xám của hình ảnh với ImageKit bằng cách thêm trực tiếp tham số chuyển đổi

border-radius: 15px 15px 15px 15px;

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Không giống như hình ảnh được chuyển đổi thành thang độ xám trong trình duyệt bằng CSS, hình ảnh được phân phối từ URL hình ảnh ở trên là thang độ xám theo mặc định

Thẻ nào được sử dụng cho hoạt ảnh trong HTML?