Thay đổi kích thước và tối ưu hóa hình ảnh trực tuyến

Nếu bạn có một loạt hình ảnh tuyệt vời thì tôi chắc chắn bạn sẽ muốn chia sẻ nó với khách hàng trên trang web của mình. Bạn có thể tạo một bản trình chiếu đẹp mắt, tạo các phòng trưng bày hoặc chỉ cần chèn hình ảnh vào một trang hoặc blog. Dù bạn chọn tùy chọn nào, sẽ có một khó khăn duy nhất mà bạn gặp phải với trình chỉnh sửa nội dung không chuyên: thay đổi kích thước hình ảnh.

Dưới đây là một số đề xuất thay đổi kích thước hình ảnh sẽ hữu ích cho bạn.

Điều chỉnh kích thước để phù hợp với nội dung của bạn

Luôn thay đổi kích thước hình ảnh của bạn theo kích thước của nội dung hoặc theo chiều rộng của nội dung. Ví dụ: nếu vùng nội dung của bạn được giới hạn ở chiều rộng 650 pixel thì không có bất kỳ yêu cầu nào về kích thước hình ảnh của bạn lớn hơn 650 pixel, vì trang của bạn sẽ chỉ hiển thị tối đa 650 pixel. Nếu thuộc tính kích thước hình ảnh nhỏ hơn hoặc lớn hơn vùng chứa, chất lượng hiển thị sẽ bị giảm sút.

Điều chỉnh độ phân giải hình ảnh cho web

Sẽ không có bất kỳ ấn tượng nào về “mỗi inch” trong bất kỳ phác thảo trang web nào. PPI, tức là pixel trên inch và PPI, tức là số chấm trên inch, không có bất kỳ liên quan nào khi bạn chỉnh sửa hoặc thay đổi kích thước ảnh của mình cho bất kỳ mục đích nào như gửi email, viết blog hoặc chia sẻ trên mạng xã hội. Ngoại trừ bản in, trên màn hình hiển thị, bạn sẽ không thể tạo ra bất kỳ sự khác biệt nào về tính năng hoặc chất lượng hình ảnh.

Điều này đặc biệt xảy ra đối với PDF , tránh tạo sẵn PDF để đọc trên web có chứa hình ảnh có độ phân giải cao hơn 72dpi. Trong trường hợp này, trình tối ưu hóa ImageRecycle PDF có thể trợ giúp, tối ưu hóa tệp PDF có hình ảnh 300dpi bên trong và bạn có thể tiết kiệm 98% kích thước pdf với chất lượng hoàn hảo để đọc trên web.

Chất lượng xuất JPG tốt nhất với ImageRecycle

Khi sử dụng Photoshop, khuyến nghị dành cho web là lưu hình ảnh JPEG của bạn ở mức tối đa. 20% nén. Bạn cũng có thể thực hiện một số thử nghiệm với các đặc tính JPEG đa dạng phù hợp nhất với mình. Áp dụng nén toàn cục là vấn đề cân bằng giữa kích thước và chất lượng.

Giờ đây với thuật toán tối ưu hóa hình ảnh ImageRecycle , quy trình đã hoàn toàn khác. ImageRecycle đang phát hiện tỷ lệ nén hình ảnh hiện tại và liên quan đến việc tối ưu hóa hình ảnh. Vì tính năng nén không được áp dụng trên toàn bộ hình ảnh nên bạn sẽ thực sự ngạc nhiên với kết quả kiểm tra dưới đây.

Hãy ghi nhớ: hình ảnh gốc được nén ít hơn thì kích thước và tối ưu hóa sẽ tốt hơn.

Trong ví dụ dưới đây, tôi đã xuất 4 ảnh jpg bằng photoshop ở mức chất lượng: 60% |
80% | 90% | 100% Sau đó, tôi đã tối ưu hóa hình ảnh bằng ImageRecycle , đây là kết quả về kích thước. Về chất lượng thì 90/100% là tốt hơn một chút so với 2 cái khác. Bài học ở đây là: xuất ảnh jpg của bạn càng ít nén càng tốt, ImageRecycle sẽ làm phần còn lại!

Tối ưu hóa hình ảnh cuối cùng

Tùy thuộc vào trang web bạn đang chạy, những hình ảnh giống nhau có thể được hiển thị trên các trang khác nhau với kích thước khác nhau. Về cơ bản, đây là thứ bạn sẽ tìm thấy trên Thương mại điện tử với Thanh trượt, danh sách sản phẩm, chi tiết sản phẩm,...
Quá trình thay đổi kích thước thường được thực hiện bởi thư viện php trực tuyến như GD. Đảm bảo chất lượng và trọng lượng của hình ảnh người dùng GỐC và CUỐI CÙNG của bạn. Đừng tin tưởng vào các thư viện trực tuyến và trình tạo bộ đệm, nếu không bạn có thể gặp vấn đề về chất lượng và kích thước. Nếu hình ảnh gốc của bạn đã được tối ưu hóa về phía bạn (bằng cách tinh chỉnh giữa chất lượng, màu sắc, độ nén) để tiết kiệm băng thông và tải trang, với một số thư viện thay đổi kích thước tiện ích mở rộng web, bạn có thể mất tất cả những thứ đó!

Giải pháp:

• Áp dụng tối ưu hóa hình ảnh được hiển thị trên trình duyệt máy khách cuối cùng của bạn. Bạn có thể thực hiện việc đó theo cách thủ công trên từng hình ảnh và cho từng kích thước hoặc sử dụng tiện ích mở rộng API hoặc CMS của ImageRecycle của chúng tôi để chọn thư mục lưu trữ hình ảnh cuối cùng của bạn. Sau đó chạy tối ưu hóa tự động trên đó.
• Sử dụng công cụ thay đổi kích thước của chúng tôi cho hình ảnh gốc. Bạn có thể tiết kiệm bộ nhớ máy chủ, xử lý hình ảnh của mình nhanh hơn và thông thường bạn không cần hình ảnh có chiều rộng vượt quá 1600px trên màn hình cuối cùng

Điều gì tiếp theo: HTML5 & yếu tố

Kỹ thuật thiết kế đáp ứng bao gồm các truy vấn phương tiện là cách để các nhà thiết kế web điều chỉnh bố cục trang web cho phù hợp với nhiều loại thiết bị, từ máy tính để bàn đến điện thoại thông minh và khiến nó trông sắc nét một cách nhất quán. Vấn đề ở đây không phải là màn hình mà là hiệu năng, đây là hình ảnh desktop được hiển thị và tải trên điện thoại thông minh và máy tính bảng.

Các Phần tử HTML5 đang cố gắng giải quyết vấn đề này. Lợi ích từ tài nguyên hình ảnh được tối ưu hóa nguyên bản là thời gian tải - đặc biệt quan trọng đối với người dùng có kết nối internet di động chậm hơn. Các phần tử có thể thay đổi kích thước động thực sự bằng cách chỉ đưa ra hướng dẫn HTML cho trình duyệt.

Đoạn mã:

Giới hạn hiện tại là điều này yêu cầu phiên bản chrome rất mới (39) và một số JS để hoạt động bình thường. Trong tương lai gần, với công nghệ kết hợp với trình tối ưu hóa hình ảnh này, chúng ta có thể mong đợi điều tốt nhất về thời gian tải trang web.