Tối ưu hóa hình ảnh để tăng tốc độ website – Đó không chỉ là một phần quan trọng, mà còn là một yếu tố quyết định cho thành công của trang web của bạn. Trong thế giới số hóa ngày nay, khi tốc độ và trải nghiệm người dùng trở thành ưu tiên hàng đầu, việc đảm bảo rằng trang web của bạn tải nhanh và mượt mà đã trở thành một phần không thể thiếu của chiến lược trực tuyến của bạn.
Tại sao tối ưu hóa hình ảnh lại quan trọng đến vậy? Đơn giản, hình ảnh chiếm một lượng lớn dữ liệu trên một trang web. Nếu bạn không xử lý chúng một cách hiệu quả, chúng có thể làm tăng thời gian tải trang, gây khó chịu cho người dùng và làm giảm khả năng tìm thấy trang web của bạn trên các công cụ tìm kiếm. Thậm chí, một trang web chậm có thể dẫn đến mất mát doanh số bán hàng và cơ hội kinh doanh.
Vì vậy, để đảm bảo trang web của bạn hoạt động một cách tối ưu và thu hút nhiều khách truy cập hơn, hãy cùng chúng tôi khám phá hướng dẫn chi tiết về cách tối ưu hóa hình ảnh. Chúng tôi sẽ trình bày những khái niệm cơ bản và phức tạp, cung cấp các công cụ và kỹ thuật tối ưu hóa hình ảnh hiệu quả nhất, và chỉ cho bạn cách tích hợp tối ưu hóa hình ảnh vào chiến lược SEO của bạn. Hãy sẵn sàng để biến trang web của bạn thành một điểm đến nhanh chóng và hấp dẫn, thu hút sự chú ý của người dùng và các công cụ tìm kiếm.
Khái niệm cơ bản – (Định dạng, kích thước, tỷ lệ khung hình)
Hiểu rõ những khái niệm cần thiết!
Các định dạng hình ảnh phổ biến (cho trang web)
- JPEG – tốt nhất cho hình ảnh hoặc hình ảnh có nhiều màu sắc. Chất lượng tốt, phạm vi màu sắc đa dạng và kích thước file nhỏ.
- PNG (còn được gọi là “png-8”) – tốt nhất cho hình ảnh có ít màu sắc, đường nét và sự tương phản cao, cũng có thể sử dụng tính năng trong suốt. Cung cấp chi tiết sắc nét mà không gây ra các hiện tượng nén, cũng có kích thước nhỏ hơn.
- PNG 24 – phiên bản chất lượng cao hơn của PNG thích hợp cho hình ảnh. Tiếc là kích thước file vẫn lớn hơn so với JPEG, vì vậy không được khuyến nghị trừ khi bạn cần tính trong suốt và/hoặc cố gắng tải lên nơi thường xuyên nén lại hình ảnh (như Facebook).
- WEBP – định dạng hình ảnh mới của Google kết hợp tốt nhất của JPEG và PNG, cho phép chất lượng tốt bất kể loại hình ảnh và cũng có tính trong suốt. Cũng nén tốt hơn so với JPEG (điều này có nghĩa là kích thước file nhỏ hơn). Ban đầu chỉ tương thích với trình duyệt Google Chrome nhưng các trình duyệt khác đã thêm tính năng tương thích với WebP bây giờ.
- SVG – thường được sử dụng chỉ cho biểu tượng, nhưng còn có thể thực hiện các hoạt ảnh đơn giản (trường hợp hiếm). Được chọn vì tính rõ ràng của nó, bất kể bạn co giãn nó lớn đến đâu, và cũng có thể tô màu khác nhau thông qua CSS (hữu ích nếu bạn sử dụng nó ở nhiều nơi khác nhau trên trang web của bạn).
- GIF – phổ biến nhất trong các hoạt ảnh meme chất lượng thấp. Hữu ích khi bạn muốn chia sẻ một video, nhưng không cần độ sắc nét hoặc âm thanh. GIF thực tế là định dạng trình diễn hình ảnh giả dạng định dạng video chất lượng thấp. Hiếm khi được sử dụng trong môi trường chuyên nghiệp như một trang web, nơi bạn thường muốn có hình ảnh và video chất lượng cao.
Kích thước thiết bị phổ biến (nhân đôi cho màn hình Retina)
- Giao diện máy tính để bàn thường có chiều rộng 1200px (chủ yếu).
- Giao diện máy tính bảng có chiều rộng khoảng 800px (chủ yếu). Chế độ ngang sẽ tương đương với giao diện máy tính để bàn.
- Giao diện điện thoại di động có chiều rộng khoảng 400px. Chế độ ngang có thể là 600px.
Nếu một hình ảnh chỉ cần chiếm một nửa màn hình máy tính để bàn, thì hình ảnh ở vị trí đó chỉ cần có chiều rộng 600px cho màn hình máy tính để bàn thường và 1200px cho màn hình máy tính để bàn Retina. Đó là một sự lãng phí tuyệt đối nếu tải một hình ảnh có chiều rộng 2000px khi nó chỉ được sử dụng trong không gian 300px!
Tỷ lệ khung hình hình ảnh phổ biến trực tuyến
- Hầu hết các thiết bị được tối ưu hóa cho phương tiện 3:2 và 16:9.
- Hồ sơ truyền thông xã hội ưa thích tỷ lệ khung hình vuông 1:1.
SEO & ACCESSIBILITY (thẻ, chú thích, thân thiện với truyền thông xã hội)
Mẹo SEO cho hình ảnh
- Thẻ tiêu đề – đây là tiêu đề nội bộ của hình ảnh của bạn (ví dụ: “Bàn đỏ #5”). Nhiều người cho rằng không có lợi ích về SEO cho điều này. Văn bản này cũng hiển thị khi bạn di chuyển con trỏ chuột qua hình ảnh.
- Thẻ alt – dành cho các trình đọc màn hình và các thiết bị khác để biết hình ảnh của bạn là gì. Hãy tưởng tượng như cách một người mù có thể mô tả hình ảnh (ví dụ: “bàn đỏ trong phòng ngủ”).
- Chú thích – đó là văn bản thường điều này dưới hoặc bên cạnh một hình ảnh. Có thể là bất cứ điều gì… mô tả cá nhân, hoặc thông tin về sản phẩm/nơi chỗ, hoặc về nhiếp ảnh gia, bất cứ điều gì, vv.
Thường tôi đặt các thẻ tiêu đề giống như các thẻ alt của mình. Tôi không thực sự dành thời gian thêm để cẩn thận chế tạo chúng. Một số tiêu đề, mô tả hoặc từ khóa hữu ích là tất cả bạn cần.
Thân thiện với truyền thông xã hội
- Đảm bảo trang web của bạn và tất cả các trang của nó đã sẵn sàng cho Facebook Opengraph.
- Chuẩn bị hình ảnh vuông nếu bạn muốn chúng trông đẹp trên các trang mạng xã hội.
Nén hình ảnh (chất lượng và kích thước)
Nén thủ công
- Sử dụng tính năng Export hoặc Save-to-web của Photoshop để tự quyết định chất lượng và kích thước chính xác mà bạn muốn.
- Cũng có thể sử dụng Lightroom hoặc các ứng dụng chỉnh sửa ảnh khác.
- JPEG thường được điều chỉnh bằng chất lượng. PNG thường được điều chỉnh bằng số lượng màu sắc và việc có trong suốt hay không.
- Bạn cũng có thể sử dụng công cụ nén trực tuyến miễn phí như trên trang ShortPixel hoặc các trang khác.
- Tôi khuyên bạn nên thực hiện điều này cho những hình ảnh quan trọng nhất của bạn. Thường là những hình ảnh lớn nhất yêu cầu chất lượng tốt nhất.
Nén tự động
- Cài đặt một plugin có tính năng nén hình ảnh. ShortPixel, LiteSpeed Cache và WP Compress, EWWW là những plugin mà tôi ưa thích. Hãy để họ nén tất cả các hình ảnh của bạn tự động.
- Tôi khuyên bạn nên sử dụng phương pháp này cho những hình ảnh ít quan trọng hơn. Những hình ảnh trải dọc trên trang web của bạn và thường chỉ được sử dụng để trang trí trang web của bạn và không được xem xét một cách cẩn thận.
Quản lý hiển thị
Hình ảnh thích nghi (Adaptive images)
- Khả năng này cho phép trang web của bạn hiển thị phiên bản nhỏ hơn của hình ảnh của bạn khi được tải trên các thiết bị nhỏ hơn.
- Chủ đề của bạn nên tự động xử lý điều này. Nếu không, tôi thà chọn (hoặc viết mã) một chủ đề mới hơn để thử hack vào bằng một plugin. Tôi tin rằng WordPress bây giờ nên thực hiện điều này tự động một cách tự nhiên.
Hình ảnh thường vs hình ảnh trình diễn (slide show)
- Hình ảnh thông thường nên sạch sẽ và sắc nét.
- Hình ảnh trình diễn có thể mờ hơn hoặc chất lượng thấp hơn một chút (đặc biệt nếu bạn có văn bản trên hình ảnh) vì chúng có thể không được xem xét một cách kỹ lưỡng.
Hoạt ảnh và hiệu ứng lọc
- Nếu có thể, áp dụng hiệu ứng hình ảnh bằng CSS sẽ sạch hơn so với JS theo quan điểm của tôi.
- Bạn cũng có lẽ không cần nhiều hiệu ứng! Hầu hết mọi người chỉ muốn xem nội dung của bạn ngay lập tức. Hãy tưởng tượng cách bạn cuộn nhanh qua các thứ trên điện thoại di động của mình. Điều cuối cùng bạn muốn là phải chờ đợi cái gì đó được tải. Không ai thích hiệu ứng tải!
Quản lý hình thu nhỏ
- Hãy để một nhà phát triển xem qua cài đặt chủ đề của bạn và loại bỏ các kích thước hình thu nhỏ không sử dụng.
- Nhiều chủ đề, đặc biệt là những chủ đề quá nhiều tính năng, sẽ tạo ra nhiều kích thước hình thu nhỏ ngay cả khi bạn chỉ sử dụng 3 trong số họ. Điều này làm cho thư viện phương tiện của bạn trở nên không cần thiết lớn trong thời gian ngắn.
- Sau khi loại bỏ các kích thước hình thu nhỏ không cần thiết, bạn sẽ có thể sử dụng một plugin để tái tạo tất cả các hình thu nhỏ hình ảnh của bạn.
Hiệu suất mã nguồn
- Tôi luôn ủng hộ mã nguồn sạch sẽ. Hãy cẩn thận khi triển khai các hiệu ứng hình ảnh phức tạp hoặc các plugin liên quan đến hình ảnh, để đảm bảo bạn không làm chậm trang web của mình bằng một lượng lớn mã bất cần thiết.
Tải ảnh lười biếng
- Một chiến thuật cải thiện tải trang bằng cách trì hoãn việc tải hình ảnh của bạn. Tôi không thấy nó cải thiện giao diện người dùng bằng bất kỳ cách nào.
Lưu trữ, Caching & CDN
Tùy chọn lưu trữ hình ảnh cho các trang web lớn
Lưu trữ không chỉ là về chi phí, mà còn về hiệu suất. Lý tưởng nhất, bạn muốn tất cả các hình ảnh của bạn đều nằm trên cùng một máy chủ web để trang web trở nên nhanh nhất. Nhưng điều gì sẽ xảy ra nếu trang web của bạn cực kỳ lớn?
- Tăng kích thước máy chủ – tùy chọn dễ dàng và thuận tiện nhất nhưng rất tốn kém vì bạn phải trả tiền cho CPU và RAM thêm khi thực sự bạn chỉ cần thêm không gian.
- Lưu trữ khối – nếu bạn có một VPS, bạn có thể mua thêm lưu trữ khối, đủ nhanh để tải lên hình ảnh nhưng vẫn chậm hơn so với việc tải từ ổ đĩa cục bộ của bạn. Thật không may, tôi đã muốn có cách để gắn lưu trữ khối cho tất cả các hình ảnh trừ những hình ảnh từ năm hoặc tháng gần đây nhất, nhưng WordPress không cho phép điều này (tự nhiên) nên bạn không có lựa chọn ngoại trừ việc gắn nó hoàn toàn vào thư mục wp-uploads.
- Dời sang S3 – S3 là tùy chọn phổ biến nhất, vì nó rất rẻ và đơn giản để thiết lập. Nhược điểm là nó chậm hơn cả lưu trữ khối. Tất nhiên, bạn có thể đồng bộ hóa các ngăn S3 của mình với Cloudfront và điều này sẽ làm cho nó nhanh hơn một chút với chi phí cao hơn.
Tùy chọn 1 thường phổ biến trong số những người không biết cách khác. Tùy chọn 3 thường phổ biến nhất cho các trang web lớn vì nó cho phép sự phát triển không giới hạn. Tùy chọn 2 ít được sử dụng mặc dù nó thực sự rất đơn giản để triển khai. Tất nhiên, tốt hơn nếu bạn tối ưu hóa hình ảnh của bạn ngay từ đầu để bạn không bao giờ bị hết không gian (nhưng điều này không thể giúp đỡ cho mọi người).
Caching hình ảnh
Chiến thuật phổ biến để lưu trữ hình ảnh là “lưu trữ trình duyệt”. Thường được thực hiện bằng cách đặt thời gian hết hạn dài hạn thông qua các quy tắc htaccess. Nói cho trình duyệt biết tải hình ảnh vào bộ nhớ lưu trữ (trong một khoảng thời gian nhất định) để trình duyệt không cần tải lại nó.
Thời gian hết hạn thông thường cho việc lưu trữ trình duyệt có thể là từ 1 tháng đến thậm chí 1 năm. Tôi nghĩ điều này hợp lý cho các bài viết cũ. Đối với các bài viết mới hơn, tôi nghĩ nên là tối đa 1 ngày và lý do duy nhất là chúng ta đôi khi cập nhật hình ảnh ngay sau khi đăng. Có thể nó đã bị cắt sai hoặc thật khó tin, bạn đã tải lên hình ảnh sai.
Tôi nghĩ hiệu suất tốt nhất và sử dụng hợp lý của bộ nhớ thiết bị của người dùng của bạn là lưu trữ trình duyệt trong khoảng từ 7-30 ngày. Tôi thường thấy rằng PNG, SVG, FAVICON, thường liên quan đến thiết kế chủ đề và nhận thức thương hiệu và hiếm khi thay đổi… vì vậy có thể lưu trữ lâu nhất (lên đến 1 năm).
Mạng phân phối nội dung (CDN)
Bạn thực sự chỉ cần một CDN nếu bạn có nhiều lượt truy cập từ khắp nơi trên thế giới.
- Nếu bạn quyết định bạn thực sự muốn một CDN:
- Bắt đầu với Cloudflare. Sử dụng dịch vụ miễn phí. Nếu hoạt động tốt, tốt! (Nó hoạt động tốt ở hầu hết các khu vực và hầu hết các trường hợp, nhưng không hoàn hảo.)
- Nếu Cloudflare chưa đủ nhanh cho bạn, hãy thử BunnyCDN.
Nếu bạn cần nhiều tùy chọn và/hoặc bạn đã dời hình ảnh lên S3, thì Amazon Cloudfront sẽ là sự tích hợp dễ dàng hơn theo ý kiến của tôi.
ICONS
Trang web đơn giản nhất có thể được tạo mà không cần bất kỳ biểu tượng nào. Bạn có thể vẽ các mũi tên, menu hamburger và biểu tượng tìm kiếm bằng CSS hoặc SVG nội tuyến và kết thúc công việc đó. Nhưng đối với trang web trung bình cần biểu tượng mạng xã hội (Facebook, Twitter, v.v.), hoặc biểu tượng thương mại điện tử (giỏ hàng, giỏ, túi, v.v.), có một số chiến lược.
Thư viện biểu tượng font (Font Awesome) – thường được sử dụng vì sự tiện lợi và linh hoạt của nó. Tuy nhiên, nó làm chậm tốc độ tải trang web của bạn vì nó tải tất cả các biểu tượng font có thể (khoảng 3-5k biểu tượng, mặc dù bạn chỉ sử dụng 20) và cũng không chỉ vậy, nó tải chúng từ các máy chủ bên ngoài (từ máy chủ bên ngoài thay vì máy chủ của bạn). Một điểm yếu khác là bạn không thể thêm biểu tượng của riêng bạn.
Font biểu tượng tùy chỉnh (IcoMoon, Fontastic) – cho phép bạn chọn/tạo riêng các biểu tượng của bạn. Và chỉ chọn những biểu tượng bạn muốn. Chúng yêu cầu nhiều công việc để thiết lập (đặc biệt là đối với người không phải là nhà phát triển) nhưng cung cấp tính linh hoạt hơn.
Font biểu tượng tự làm – tự tạo nó. Đây là điều tôi thích làm. Font biểu tượng nhỏ bé chỉ khoảng 2kb nhưng chứa tất cả các biểu tượng tôi cần. Yêu cầu một chút công việc hơn nhưng tải nhanh nhất.
SVG – sử dụng một tệp riêng biệt nhỏ cho mỗi biểu tượng. Tôi thực sự không khuyến nghị điều này trừ khi bạn chỉ có rất ít biểu tượng và/hoặc dự định sử dụng biểu tượng ở kích thước lớn hơn và cần nhiều tùy chọn màu sắc hơn. Bạn có thể kiểm tra bài viết của tôi về Font biểu tượng so với SVG.
Hầu hết các lựa chọn ở đây phụ thuộc vào kỹ năng lập trình của bạn (hoặc nhà phát triển của bạn). Và nếu bạn không biết cách lập trình, tôi khuyên bạn nên trả tiền cho ai đó tạo font biểu tượng cho bạn thủ công. Tất nhiên, điều này tốn tiền nhưng tôi nghĩ nó xứng đáng. Tốt hơn rất nhiều so với việc tải toàn bộ thư viện Font Awesome nặng nề trên mỗi trang web.
Tối ưu hóa CSS
Tôi đề cập đến một số chiến lược sử dụng hoặc tối ưu hóa CSS để hiển thị hình ảnh hoặc yếu tố đồ họa của bạn một cách tốt hơn, hoặc để tiết kiệm không gian và cải thiện thời gian tải trang.
Màu sắc – các chủ đề cũ đã sử dụng các hình ảnh PNG nhỏ cho mọi yếu tố màu sắc trong chủ đề. Chủ đề mới sử dụng CSS để vẽ các yếu tố màu sắc. CSS mới cũng có thể tạo bóng đổ và gradient, bộ lọc màu sắc (đen và trắng, nâu socola, v.v.), thậm chí là hoạt hình. Vì vậy, bạn không cần sử dụng hình ảnh phụ thêm cho mọi sự khác biệt nhỏ.
Sprites – một chiến lược kết hợp nhiều hình ảnh vào một tệp và gọi chúng qua CSS. Đây vẫn là một chiến lược tuyệt vời để cải thiện thời gian tải trang cho trang web siêu mỏng. Nhưng có lẽ không đáng đối với công sức bổ sung với hầu hết mọi người. Và không có nhiều lợi ích hơn khi HTTP/2 cho phép nhiều kết nối song song cùng lúc.
Độ trong suốt – trong một số trường hợp, việc sử dụng hình ảnh có nền trong suốt (vẽ màu nền bằng CSS) thay vì xuất hình ảnh có nền màu đầy đủ có thể thông minh hơn (và có chất lượng hình ảnh tốt hơn).
