7 cách để giảm dung lượng hình ảnh và video cho website thân thiện với người dùng
Ngày đăng: 31/05/2022 - Lượt xem: 874
Nội dung chính
Lợi ích chính của kích thước hình ảnh nhỏ hơn là nó làm cho các trang web tải nhanh hơn.Theo Google các chuyên gia nói rằng khi thời gian tải của một trang web tăng từ 1 giây lên 7 giây, xác suất khách truy cập di động bị trả lại (rời đi ngay lập tức) tăng 113%. BBC nhận thấy họ đã mất thêm 10% người dùng cho mỗi giây thêm trang web của họ đã tải.
Cũng như một trang web tải chậm gây nhàm chán cho khách truy cập, các công cụ tìm kiếm đánh giá tốc độ của một trang web khi quyết định cách xếp hạng các trang web trong kết quả tìm kiếm, vì vậy các trang web chậm có thể bị giữ lại và lưu lượng truy cập bị hạn chế. Hình ảnh và video thường là các tệp lớn nhất trên một trang web, vì vậy làm cho chúng nhỏ hơn thường là cách nhanh nhất để tăng tốc trang web.
1. Chọn độ phân giải hợp lý.
Web độ phân giải hình ảnh tốt nhất. Cách tốt nhất là chia tỷ lệ hình ảnh và video thành không lớn hơn kích thước mà chúng sẽ được hiển thị tại. Không có lý do gì để trình duyệt tải xuống hình ảnh 2mb chỉ 2000px × 1000px cho trình duyệt để thu nhỏ nó xuống 400px × 200px.
Đối với hình ảnh và video mà bạn dự định sẽ lấp đầy phần lớn cửa sổ trình duyệt, như video tiêu đề hoặc hình nền thanh trượt, tôi thấy chiều rộng tối đa 1200px - 1500px thường là đủ, miễn là chúng không chứa nhiều chi tiết tốt. Hình ảnh lớn hơn thường có thể được thu nhỏ một cách an toàn cho màn hình lớn mà không quá đáng chú ý.
2. Chọn một định dạng tệp phù hợp.
Định dạng tệp hình ảnh tốt nhất trên web
Hình ảnh và video phải được lưu ở định dạng tệp hợp lý. Một số quy tắc của ngón tay cái:
+ Ảnh nên được lưu dưới dạng JPG
+ Logo và các chi tiết dựa trên dòng khác được phục vụ lý tưởng trong SVG hoặc dưới dạng PNG cho các ứng dụng mà SVG không hoạt động chính xác. Tại thời điểm viết bài, bạn sẽ cần sử dụng một plugin như Safe SVG để tải SVG lên trang web WordPress.
+ Các định dạng tệp phù hợp cho video trên web là MP4, WebM, WebVTT hoặc OGV (mặc dù OGV không tương thích với Internet Explorer và Safari).
Sau khi tải lên hình ảnh ở một trong những định dạng đó, bạn có thể phân phối chúng ở định dạng WebP hiện đại tới các trình duyệt hỗ trợ nó (chưa phải tất cả) bằng cách sử dụng plugin.
Định dạng tệp WebP được phát triển bởi Google và cung cấp khả năng nén hình ảnh vượt trội mà không làm giảm chất lượng.
Internet Explorer và Safari chưa thể hiển thị hình ảnh WebP, vì vậy bạn nên tải lên hình ảnh bằng các định dạng tệp được liệt kê ở trên và dựa vào plugin để chỉ hiển thị các phiên bản WebP cho các trình duyệt hỗ trợ nó. Các trang web chạy trên LiteSpeed có thể sử dụng tính năng nén WebP gốc được tích hợp trong plugin LiteSpeed Cache miễn phí.
Nhân tiện, tôi khuyên bạn chỉ nên lưu trữ các tệp video nhỏ với trang web của mình và phục vụ các video mở rộng hơn cho khách truy cập bằng cách sử dụng một dịch vụ như Vimeo, YouTube, Metacafe, Dailymotion, Veoh hoặc tương tự.
3. Nén trước khi tải lên.
Điều quan trọng là phải nén hình ảnh và video trước khi tải lên. Các coder nén sử dụng nhiều kỹ thuật để cắt giảm dữ liệu cần thiết để mô tả hình ảnh hoặc khung hình của video và chúng cắt bớt dữ liệu không cần thiết sẽ không được nhìn thấy trong tệp cuối cùng. Để nén hình ảnh, Photoshop có một tính năng tuyệt vời cho cái gọi là 'lưu vào web'. Điều này cho phép bạn đặt định dạng tệp yêu cầu, độ phân giải hình ảnh và mức độ nén. Bạn có thể sử dụng plugin nén hình ảnh như Shortpixel hoặc Smush sẽ tự động nén hình ảnh sau khi chúng được tải lên.
Ngoài ra, nén video sẽ xem xét mức độ thay đổi chi tiết giữa các khung và sử dụng khung hình chính để lưu trữ dữ liệu hình ảnh được sử dụng lại trong các khung khác.
Hai trong số các ứng dụng miễn phí phổ biến nhất để nén video là Freemake (dễ sử dụng) và Handbrake (cung cấp nhiều tùy chọn cấu hình hơn).
Tuy nhiên, nếu bạn đã chỉnh sửa video, tốt nhất là đặt cài đặt nén chính xác khi bạn xuất video thay vì chuyển qua phần mềm nén bổ sung vì mỗi lần truyền sẽ không cần giảm chất lượng hình ảnh thêm một chút.
4. Chọn hình ảnh và video với ít chi tiết hơn.
Một trong những cách tốt nhất để đảm bảo tất cả hình ảnh và video của bạn có kích thước tệp nhỏ là chọn nhiều hình ảnh đơn giản hơn ngay từ đầu.
Chi tiết là những gì mang lại cho hình ảnh kích thước tệp của chúng, vì vậy nếu bạn chọn các mô hình có diện tích nhỏ hơn với chi tiết tốt, những hình ảnh đó sẽ có kích thước tệp nhỏ hơn.
5. Làm mờ hoặc thêm mờ.
Hình ảnh hoặc video được chụp trong điều kiện tối với máy ảnh sử dụng ISO cao có thể rất nhiễu và điều này có thể làm tăng đáng kể kích thước tệp.
Hoặc để có hiệu ứng tinh tế hơn nếu một phần của hình ảnh đã làm mờ ống kính tự nhiên, hãy làm nổi bật nó một chút.
6. Thêm màu hoặc tắt đèn.
Giảm phạm vi động của hình ảnh bằng cách làm tối nó cũng có thể giúp ích.
Bạn có thể sử dụng màu thương hiệu của mình để kết hợp với thiết kế trang web của bạn cùng một lúc.
Từ quan điểm khả năng hiển thị thêm mờ hoặc làm tối hình ảnh có thể là một ý tưởng tuyệt vời cho hình ảnh được sử dụng làm hình nền vì nó ngăn chi tiết trong hình ảnh nền xung đột với bất cứ thứ gì được phủ lên, cho dù đó là văn bản hoặc biểu tượng.
7. Thêm lại độ bão hòa và độ tương phản với các bộ lọc CSS.
Mọi trình duyệt ngoài IE và Opera Mini (chiếm 1,7% - 2,2% lưu lượng truy cập internet tùy thuộc vào người bạn yêu cầu) có thể hoạt động với các bộ lọc CSS.
Các bộ lọc hướng dẫn trình duyệt điều chỉnh độ bão hòa, độ tương phản, độ mờ, màu sắc, v.v. của hình ảnh.
Điều này cho phép chúng tôi giảm độ bão hòa và độ tương phản của hình ảnh, giảm dữ liệu chứa trong đó và do đó kích thước tệp của nó, trước khi tăng độ bão hòa và độ tương phản một lần nữa cho khách truy cập trang web bằng CSS.
Đầu tiên, giảm độ bão hòa và độ tương phản của hình ảnh ngoại tuyến. Giống như với tất cả các nén, bạn càng giảm, kích thước và chất lượng tệp sẽ càng thấp. Nếu bạn sử dụng Photoshop để điều chỉnh độ tương phản, bạn sẽ muốn đánh dấu vào sử dụng Legacy để làm cho nó hoạt động giống như các bộ lọc CSS mà bạn sẽ sử dụng sau này để đảo ngược hiệu ứng.
.jpg)
