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

Nếu bạn có một loạt các hình ảnh tuyệt vời thì tôi chắc chắn bạn sẽ thích chia sẻ nó với khách hàng của bạn trên trang web của bạn. Bạn có thể tạo một slideshow đáng yêu, tạo 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, một số khuyến nghị để thay đổi kích thước hình ảnh sẽ hữu ích cho bạn.

Điều chỉnh kích thước cho 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ỳ đường viền trang web nào. PPI, nghĩa là pixel trên inch và DPI, nghĩa là 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 hình ả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ẻ qua phương tiện truyền thô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

Sử dụng Photoshop, khuyến nghị cho web là lưu tối đa hình ảnh JPEG của bạn. 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 bạn. Áp dụng nén toàn cầu là vấn đề cân bằng giữa kích thước và chất lượng.

Bây giờ với thuật toán tối ưu hóa hình ảnh ImageRecycle , quá trình này 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. Bởi vì tính năng nén không được áp dụng trên toàn bộ hình ảnh, bạn sẽ thực sự ngạc nhiên trước bài kiểm tra dưới đây.

Hãy ghi nhớ: ít hình ảnh gốc được nén, tối ưu hóa và kích thước 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, các 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. Đây là điều bạn sẽ tìm thấy trên Thương mại điện tử với Slider, 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ộ nhớ cache, 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 từ 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 phần mở rộng web, bạn có thể mất tất cả những điều đó!

Giải pháp:

• Áp dụng tối ưu hóa trên hình ảnh được hiển thị trên trình duyệt khách hàng cuối cùng của bạn. Bạn có thể làm điều đó theo cách thủ công trên từng hình ảnh và đối với từng kích thước hoặc sử dụng phần mở rộng API hoặc CMS của ImageRecycle để 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 resizer của chúng tôi cho hình ảnh gốc. Bạn có thể lưu bộ nhớ máy chủ, thao tác nhanh hơn hình ảnh của mình 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 & thành phần

Kỹ thuật thiết kế đáp ứng bao gồm các truy vấn phương tiện là cách để người thiết kế web điều chỉnh bố cục trang web 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ó luôn trông sắc nét. Vấn đề ở đây không phải là màn hình mà là hiệu suất, đây là hình ảnh máy tính để bàn đượ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 Yếu 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 trên các kết nối internet di động chậm hơn. Các phần tử tạo khả năng thay đổi kích thước động thực sự bằng cách chỉ đưa ra một hướng dẫn HTML cho trình duyệt.

Đoạn trích:

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