Làm cách nào để tăng độ phân giải hình ảnh trong bộ sưu tập?

Không chắc liệu tôi có đang hỏi đúng câu hỏi ở đây hay không vì tôi là một lập trình viên PHP hơn là một nhà thiết kế đồ họa. Trang web của khách hàng của tôi có thư viện Lượt xem img hiển thị 3 cột rộng trên máy tính để bàn và 1 cột rộng trên thiết bị di động. Độ phân giải hình ảnh trên điện thoại di động không tốt lắm và tôi đang cố gắng tăng nó.Tôi nghi ngờ đó là cùng độ phân giải trên máy tính để bàn nhưng không ai lo lắng về điều đó.

Tôi nghĩ giải pháp chính xác ở đây là sử dụng kiểu img lớn hơn cho hình ảnh và sau đó điều chỉnh bằng CSS để thu nhỏ nó lại cho phù hợp với thiết bị (đáp ứng). Nhưng nếu tôi làm như vậy, hình ảnh không có kích thước vừa với 3 cột rộng trên màn hình.

Liệu tất cả điều này có ý nghĩa? Có một mô-đun để làm điều này đúng cách. Tôi đã xem các mô-đun Hình ảnh và Kiểu và Hình ảnh đáp ứng nhưng chúng có vẻ như chỉ đơn giản là tạo hình ảnh thay đổi kích thước nhưng không cho phép bắt đầu với một img lớn hơn để bắt đầu (kiểu lớn hơn).

Một điều là xác định các kiểu hình ảnh phản hồi để đặt các điểm dừng cụ thể và một điều nữa là cải thiện chất lượng của các hình ảnh được tải lên. Chẳng hạn, bộ công cụ Hình ảnh cho phép bạn đặt chất lượng JPEG của hình ảnh được xử lý, dẫn đến chất lượng hình ảnh tốt hơn với chi phí chuyển mạng cao hơn.

Tôi sẽ cố gắng tránh càng nhiều càng tốt việc thu nhỏ hình ảnh bằng CSS vì cách này hoạt động nhưng bạn đang mở cửa cho một trang chậm: hãy tưởng tượng ai đó tải lên một băng chuyền gồm 5 MB ảnh và bạn đang hiển thị hình thu nhỏ 220px trên thiết bị di động -> kích thước trang sẽ trở thành không sử dụng được.