Giới thiệu
Scaled image là gì?
Scaled image là ảnh mà kích cỡ khớp với kích cỡ được khái niệm trong CSS hoặc HTML. Ví dụ một người dùng upload một ảnh có kích cỡ 400 x 400 và sử dụng nó như 1 thumbnail với kích thước 40 x 40 qua HTML/CSS. Có tức là trình duyệt sẽ phải tải một ảnh lớn trước và giảm nó xuống kích thước cần có trước lúc hiển thị ra. Một phương thức hiệu quả hơn là hạ kích thước hình xuống 40 x 40 để trình duyệt không phải tải file và nén file vô ích.
Thuận lợi của việc dùng scaled images
Sử dụng ảnh đúng kích cỡ cần có có thể giảm dung lượng và tăng tốc website, đặc biệt là trên thiết bị di động và tablet. Cung cấp scaled images là một trong các đánh giá của các công cụ tối ưu bức tốc website. Điểm số cao hơn sẽ tăng thứ hạng website trên Goolge và tăng SEO.
Bạn cần gì?
Trước khi bắt đầu hướng dẫn này bạn cần chuẩn bị:
- Truy cập FTP (đặc biệt là thư mục chứa hình ảnh)
- Image editor (Paint, hoặc các công cụ editor online như là picresize)
Bước 1 — Phân tích Website của bạn
Tại bước này, chúng tôi khuyên dùng GTMetrix vì nó cũng cho thấy kích cỡ chuẩn xác cần sử dụng là gì.
Ví dụ, chúng tôi đã phân tích một site WordPress được tạo từ xưa bởi GTMetrix và có danh sách ảnh với địa thế chính xác của nó và giá trị được khuyên dùng.
Dựa vào phân tích trên, cung cấp ảnh scaled sẽ giảm kích cỡ ảnh xuống hơn 50%. Càng có nhiều hình, ảnh càng được tải mau hơn sau khi hạ dụng lượng xuống.
Bước 2 — Thu nhỏ và thay thế ảnh
Để thu nhỏ hình ảnh, bạn cần tải nó về trước. Ảnh được xác định ở bước 1 cũng có thể tải về qua FTP client. Sau đó, có thể dùng image editor (Paint) hoặc các tool online để se khít ảnh. Sử dụng picresize, tôi đã thu nhỏ tất cả ảnh tới giá trị cần thiết.
Sử dụng tên mới đầu cũng cần được thiết. Bằng cách này bạn chỉ cần thay thế những file hình cũ bằng những file hình mới mà chẳng cần thay đổi gì ở mã nguồn. Khi những ảnh cũ được thay thế bởi ảnh đã được thu nhỏ. Việc còn lại là kiểm tra lại.
Bước 3 — Kiểm tra thay đổi
Để so sánh, đây là kết quả sau khi upload ảnh đúng kích cỡ thu nhỏ:
Điều quan trọng nhất là việc upload lại ảnh cũ cần giống tên cũ để không gặp lỗi 404.
Kết luận
Tóm lại, chúng ta đã học cách thu nhỏ ảnh đúng kích thước. Việc này sẽ giảm tài nguyên sử dụng của server, cũng giống bức vận tốc và hiệu xuất website. Ưu điểm là chẳng cần kiến thức lập trình để thực thiệc việc scaled images.
Các bài chỉ dẫn liên quan:
Improving website performance: leveraging browser cache
Improving website performance: gzip compression
Improving website performance: using progressive JPEG images
Improving website performance: Enabling Keep-Alive
Improving website performance: Using a CDN
Improving website performance: minifying CSS, HTML and JavaScript
Từ khóa bài viết:
Bài viết Tăng tốc Website – Sử dụng Scaled Images được tổng hợp sưu tầm và biên tập bởi nhiều user – Sửa máy tính PCI – TopVn Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho chúng tôi để điều chỉnh. Xin cảm ơn.