Ý nghĩa của việc tối ưu hóa hình ảnh là gì?
Hình ảnh lớn làm chậm các trang web của bạn tạo ra trải nghiệm người dùng tối ưu. Tối ưu hóa hình ảnh là quá trình giảm kích thước tệp của chúng, sử dụng plugin hoặc tập lệnh, từ đó tăng tốc thời gian tải của trang. Nén tổn thất và nén không mất dữ liệu là hai phương pháp thường được sử dụng.
Tại sao hình ảnh (rất rất) quan trọng?
Có rất nhiều, rất nhiều lý do tại sao bạn sẽ (và nên) sử dụng hình ảnh trong bài viết và bài viết của mình:
- Hình ảnh đóng vai trò kích thích thị giác cho lời kêu gọi hành động (CTA). CTA có thể là bất kỳ nhiệm vụ nào bạn muốn khách truy cập của mình thực hiện. CTA phổ biến bao gồm đăng ký nhận bản tin của bạn, chia sẻ bài viết của bạn trên phương tiện truyền thông xã hội hoặc mua sản phẩm của bạn.
- Hình ảnh tăng cường kết nối người viết tìm cách thiết lập với người đọc.
- Hình ảnh truyền tải nhiều hơn thông qua ít hơn.
Do đó, điều quan trọng nhất là Tài sử dụng đúng hình ảnh trong các bài thuyết trình của mình (bài đăng trên blog, báo cáo không chính thức, bản trình bày PowerPoint thực tế, v.v.) để để lại dấu ấn trong tâm trí người đọc!
Nhưng chờ đã! Có vấn đề!
Hình ảnh chiếm khoảng 63% băng thông được sử dụng bởi các trang web hiện đại, do đó, điều quan trọng hơn là chúng phải được tối ưu hóa đúng tốc độ.
Thời gian tải trang chậm một giây có thể giảm 7% tỷ lệ chuyển đổi. Xem nguồn https://www.cloudflare.com/learning/performance/more/website-performance-conversion-rates/
Tài đã thiết lập rằng mọi người có một khoảng chú ý ngắn (một trong những nhược điểm của tỷ lệ sản xuất nội dung hiện đại). Ngay cả khi bạn sử dụng đúng hình ảnh, nếu chúng không tải trong khung thời gian chấp nhận được, tiền lãi sẽ bị mất.
10 lỗi tối ưu hóa hình ảnh phổ biến nhất
Phần lớn các trang web có một vấn đề – họ sử dụng hình ảnh tuyệt vời, nhưng cách phục vụ hình ảnh cho khách truy cập là kém.
Kích thước lớn, tối ưu hóa kém, định dạng không chính xác, kích thước (kích thước) lớn không cần thiết, hình ảnh không phản hồi và lỗi SEO bất cẩn, là một số vấn đề phổ biến nhất mà web hiện đại phải đối mặt. Trong bài viết hôm nay, chúng ta sẽ giải quyết những vấn đề này!
1. Kích thước lớn
Đây là một cổ điển. Giả sử bạn cần một bức ảnh 150 × 150 pixel trong trang Nhóm Đội của bạn. Thông thường, bạn sẽ sử dụng tiêu đề 5MP, chỉnh sửa một chút và cuối cùng tải lên.
Bạn đã phát hiện ra vấn đề? Một số người trực tiếp tải lên hình ảnh 5MP thực tế! Chủ đề WordPress sẽ tải toàn bộ hình ảnh 5MP (tức là 5 x 10 ^ 6 pixel) và yêu cầu trình duyệt thu nhỏ nó về kích thước yêu cầu 150x150px. Về bản chất, trình duyệt chỉ hiển thị 0,0045% ảnh gốc!
Cuối cùng, bạn sẽ lãng phí cả băng thông của khách và của khách truy cập (ngay cả khi bạn đang phục vụ hình ảnh qua Mạng phân phối nội dung như Stackpath CDN ), tiêu tốn nhiều dung lượng đĩa cứng hơn và tăng thời gian tải. Không có tính năng nào là thứ bạn muốn trong trang web của mình.
Luôn thay đổi kích thước (và bằng cách thay đổi kích thước, ý Tài là giảm kích thước) hình ảnh theo kích thước yêu cầu và sau đó tải nó lên!
Bạn không cần phần mềm ưa thích để làm điều này – có những công cụ trực tuyến miễn phí như ImageResize.org bạn có thể sử dụng để nhanh chóng thay đổi kích thước và tối ưu hóa hình ảnh của mình. Chỉ cần tải lên và chỉnh sửa cài đặt ảnh của bạn. Khi bạn hoàn tất tải xuống hình ảnh tối ưu của bạn để sử dụng trên trang web của bạn. Họ cũng cung cấp Trình nén ảnh nhanh nếu bạn chỉ muốn cắt giảm kích thước tệp. Vdu: https://imageresizer.com/compress-images
Công cụ hữu ích khác:
- IrfanView là một phần mềm miễn phí tuyệt vời để thay đổi kích thước hàng loạt hình ảnh của bạn với các tùy chọn nâng cao như tối ưu hóa, hình mờ và đường viền.
- ImageMagick là một công cụ nguồn mở tiên tiến có thể được sử dụng trong nhiều ngôn ngữ lập trình và hệ điều hành. Bạn có thể viết ứng dụng của riêng bạn hoặc đơn giản là sử dụng nó thông qua dòng lệnh.
- ImageOptim (Mac) cho phép bạn kéo toàn bộ thư mục và nhanh chóng tối ưu hóa nhiều hình ảnh.
- TinyPNG là một công cụ nén hình ảnh trực tuyến với API.
2. Định dạng hình ảnh không chính xác
Các định dạng được sử dụng cho hình ảnh đóng một vai trò quan trọng. Theo nguyên tắc chung, sử dụng PNG cho đồ họa vector và hình ảnh do máy tính tạo ra như clip art, v.v … Sử dụng JPEG cho ảnh hoặc hình ảnh với nhiều màu sắc.
3. Không sử dụng định dạng JPEG
Bình thường, JPEG có hai loại – Baseline and Progressive. Trực quan, cả hai đều giống nhau. Sự khác biệt nằm ở cách chúng được tải:
- Baseline JPEG chỉ có một lớp – chứa toàn bộ hình ảnh. Khi được yêu cầu, toàn bộ hình ảnh được tải cùng một lúc.
- Progressive JPEGs tổng hợp hình ảnh với nhiều lớp. Một Progressive JPEG được tải từng lớp, chất lượng tăng dần, cuối cùng mang lại cho bạn một cái nhìn không mất mát.
- Tất cả các bộ thay đổi hình ảnh chính cho phép bạn lưu hình ảnh dưới dạng Progressive JPEG.
4. Không sử dụng Lazy Load
Lazy-Loading là một kỹ thuật tiết kiệm tài nguyên tuyệt vời , trong đó hình ảnh chỉ được tải khi khách truy cập cuộn xuống khung nhìn của hình ảnh.
Hãy xem xét một bài viết – 15 trong số những chiếc xe tiết kiệm nhiên liệu nhất trong năm 2014. Đương nhiên, bài viết này sẽ chứa ít nhất 15 hình ảnh.
Và bất kể chiều cao của thiết bị hiển thị – màn hình, máy tính bảng hoặc điện thoại thông minh, bạn không thể vừa tất cả 15 hình ảnh trong khung nhìn. Bạn phải cuộn xuống để xem tất cả các hình ảnh.
Khi bật Tải nhanh, hình ảnh sẽ chỉ được tải khi khách truy cập ở trong vùng lân cận của hình ảnh.
Nói cách khác, hình ảnh bắt đầu tải chỉ khi bạn cuộn xuống để xem nó. Tuy nhiên, một vài hình ảnh đầu tiên được tải ngay lập tức vì bạn đã ở trong khung nhìn.
Lazy Loading tiết kiệm băng thông ở cả hai đầu và cải thiện thời gian tải! Bạn có thể sử dụng Lazy Loading trong WordPress với Plugin Lazyload
5. Không sử dụng CDN
Sử dụng Mạng phân phối nội dung (CDN) sẽ phân phát hình ảnh từ máy chủ gần nhất với vị trí của khách truy cập.
Nếu khách truy cập từ Ấn Độ yêu cầu hình ảnh và CDN có POP (điểm hiện diện hoặc đơn giản là máy chủ) ở Tokyo và New York, hình ảnh sẽ được phục vụ từ máy chủ đặt tại Tokyo.
Khi bạn có lưu lượng đáng kể, bạn nên thiết lập CDN với WordPress để giảm thời gian tải và đạt hiệu suất tổng thể.
Ở đây, Tài khuyên dùng Cloudflare. Đối với các trang web mới sinh, Tài sẽ đề xuất một danh sách các dịch vụ CDN miễn phí mà bạn có thể thử.
6. Không khai báo thuộc tính ‘alt’
Thuộc tính ‘alt’ mô tả hình ảnh cho công cụ tìm kiếm. Văn bản bạn nhập trong trường này sẽ được hiển thị cho người dùng trong trường hợp hình ảnh không thể được tải. Rất nhiều người có xu hướng để trống các lĩnh vực này.
Điều này rất bất lợi cho SEO hình ảnh và bạn mất lưu lượng truy cập. Bạn phải luôn cố gắng đưa từ khóa của trang web vào thẻ alt của hình ảnh.
7. Không tối ưu hóa hình ảnh
Hình ảnh được tối ưu hóa nhẹ hơn 40% so với hình ảnh bình thường. Điều này cải thiện thời gian tải và tiết kiệm băng thông.
Từ danh sách các Plugin tối ưu hóa hình ảnh WordPress tốt nhất của Tài , Tài sẽ đề xuất Shortpixel để tối ưu hóa hình ảnh của bạn. Kraken.io cũng là một tùy chọn trực tuyến tuyệt vời để nén hình ảnh trong nháy mắt.
8. Responsive Images
Ngay cả khi trang web của bạn phản hồi, điều đó không có nghĩa là hình ảnh của bạn. Điều đó có nghĩa là hình ảnh tiêu đề bạn sử dụng cho màn hình máy tính để bàn 22 cũng được cung cấp cho iPhone 5.
Khi bạn tải lên một hình ảnh, WordPress thay đổi kích thước của nó thành nhiều phiên bản – Hình thu nhỏ, Trung bình, Kích thước đầy đủ, v.v. Điều này có thể được nhà phát triển thay đổi.
Một chủ đề được mã hóa tốt sẽ phục vụ phiên bản hình ảnh có kích thước trung bình của tầm trung, do đó tiết kiệm băng thông.
9. Chú thích ảnh
Chú thích không phải lúc nào cũng cần thiết, mặc dù trong một số trường hợp, điều đó là bắt buộc – chẳng hạn như ảnh chụp màn hình trong hướng dẫn. Hình ảnh chú thích giúp người đọc hiểu chủ đề tốt hơn, đồng thời thúc đẩy SEO của bạn.
10. Tên tệp hình ảnh
Hãy suy nghĩ về tên tệp theo quan điểm của công cụ tìm kiếm. Sử dụng cùng một văn bản như bạn sẽ làm trong thẻ ‘title’ của hình ảnh. Ngoài ra, hãy cố gắng bao gồm các từ khóa phù hợp nhất với trang web của bạn.
8 Plugin tối ưu hóa hình ảnh trong WordPress
Rất may, với WordPress, bạn không cần phải thực hiện tất cả các định dạng hoặc nén bằng tay.
Bạn có thể sử dụng plugin để thực hiện ít nhất một số công việc cho bạn một cách tự động. Có một số plugin sẽ tự động tối ưu hóa các tệp hình ảnh của bạn khi bạn tải chúng lên.
Họ thậm chí còn tối ưu hóa hình ảnh mà bạn đã tải lên. Đây là một tính năng tiện dụng – đặc biệt nếu bạn đã có một trang web chứa đầy hình ảnh. Dưới đây, hãy xem một số plugin tốt nhất để định dạng hình ảnh của bạn để có hiệu suất tốt hơn.
Điều quan trọng là mặc dù bạn không chỉ dựa vào các plugin.
Ví dụ: bạn không nên tải lên hình ảnh 2 MB lên thư viện phương tiện WordPress của mình.
Điều này có thể dẫn đến việc tiêu tốn hết dung lượng lưu trữ web của bạn rất nhanh.
Phương pháp tốt nhất là nhanh chóng thay đổi kích thước hình ảnh trong một công cụ chỉnh sửa ảnh, sau đó tải nó lên và sử dụng một trong các plugin sau để giảm thêm.
ShortPixel Image Optimizer
ShortPixel Image Tối ưu hóa là một plugin miễn phí sẽ nén 100 hình ảnh mỗi tháng và sẽ nén nhiều loại tệp bao gồm PNG, JPG, GIF, WebP và thậm chí các tệp PDF. Nó sẽ thực hiện cả nén và mất hình ảnh.
Nó đưa hình ảnh và hình thu nhỏ của bạn vào đám mây để xử lý và sau đó đưa chúng trở lại trang web của bạn để thay thế bản gốc.
Nó tạo ra một bản sao lưu của các tập tin gốc để bạn có thể khôi phục chúng theo cách thủ công nếu bạn muốn.
Nó sẽ chuyển đổi các tập tin thư viện với số lượng lớn. Không có giới hạn về kích thước tập tin.
Imagify Image Optimizer
Imagify được tạo bởi cùng một nhóm đã phát triển WP Rocket, mà hầu hết các bạn có lẽ đã quen thuộc. Đó là WooC Commerce, NextGen Gallery và WP Retina tương thích.
Nó cũng có một tính năng tối ưu hóa hàng loạt và bạn có thể chọn giữa ba cấp độ nén khác nhau, bình thường, tích cực và cực kỳ.
Nó cũng có một tính năng khôi phục, vì vậy nếu bạn không hài lòng với chất lượng, bạn có thể khôi phục và nén lại chỉ bằng một cú nhấp chuột ở mức phù hợp hơn với nhu cầu của bạn.
Có một phiên bản miễn phí và cao cấp. Bạn bị giới hạn ở hạn ngạch 25 MB hình ảnh mỗi tháng với tài khoản miễn phí.
Loại bỏ hình ảnh gốc và thay đổi kích thước hình ảnh lớn hơn của bạn cũng có thể được thực hiện với plugin này.
Tưởng tượng cũng nén hình ảnh trên máy chủ của bên thứ ba của họ, không phải của bạn, điều này rất quan trọng khi nói đến hiệu suất. Hãy tưởng tượng nên làm chậm lại trang web WordPress của bạn
Optimole
Optimole là một plugin WordPress tối ưu hóa hình ảnh tự động giảm kích thước hình ảnh của bạn mà không cần bất kỳ công việc nào cần thiết cho bạn.
Nó có một lợi thế lớn khi nói đến tốc độ tải trang web của bạn vì nó hoàn toàn dựa trên đám mây và không bao giờ phục vụ hình ảnh lớn hơn mức cần thiết, hay còn gọi là hiển thị kích thước hình ảnh hoàn hảo cho trình duyệt và chế độ xem của khách truy cập.
Hơn nữa, plugin cung cấp khả năng tải hình ảnh lười biếng và thay thế hình ảnh hiệu quả – nó hạ thấp chất lượng hình ảnh nếu khách truy cập có kết nối internet chậm hơn – khiến nó nổi bật giữa đám đông.
Nó cũng tự động phát hiện trình duyệt của người dùng và phục vụ WebP nếu nó hỗ trợ.
Tất cả các hình ảnh mà Optimole nén được cung cấp qua CDN nhanh. Bạn có thể dùng thử Optimole miễn phí hoặc nâng cấp lên gói cao cấp nếu bạn cần thêm băng thông và không gian xử lý.
EWWW Trình tối ưu hóa hình ảnh giúp bạn làm cho hình ảnh của mình nhỏ hơn và trang web của bạn nhanh hơn với ít rắc rối hơn khi bắt đầu.
Không có giới hạn kích thước và nhiều tính linh hoạt, bạn có thể sử dụng mặc định hoặc tùy chỉnh hoàn toàn plugin theo ý thích của mình.
Tất cả người dùng IO EWWW có thể sử dụng Trình tối ưu hóa hàng loạt để nén hình ảnh hiện có của họ hoặc sử dụng chế độ danh sách Thư viện phương tiện để chọn và chọn hình ảnh cụ thể để nén.
Các thư mục bổ sung có thể được quét để đảm bảo mọi hình ảnh trên trang web của bạn đều được tối ưu hóa đúng cách.
EWWW IO thậm chí cho phép bạn chuyển đổi hình ảnh của mình sang các định dạng thế hệ tiếp theo như WebP hoặc tìm định dạng hình ảnh tốt nhất cho hình ảnh với các tùy chọn chuyển đổi đa định dạng. Nén hình ảnh bắt đầu chỉ với $ 0,003 / hình ảnh.
API nén cao cấp cho phép bạn thực hiện nén đến một cấp độ hoàn toàn mới mà không làm giảm chất lượng, mở khóa nén PDF và bao gồm sao lưu hình ảnh 30 ngày thuận tiện.
Tính năng ExactDN bắt đầu ở mức 9 đô la / tháng mang lại khả năng nén tự động (không cần nén phía máy chủ), thay đổi kích thước tự động và tất cả các lợi ích của CDN để có kết quả nhanh hơn và hiệu suất cao hơn trên mọi kích thước thiết bị.
Optimus Image Optimizer
Trình tối ưu hóa hình ảnh WordPress Optimus sử dụng nén không mất dữ liệu để tối ưu hóa hình ảnh của bạn. Lossless có nghĩa là bạn đã thắng được.
Nó hỗ trợ WooCoomerce và nhiều trang web và có một tính năng tối ưu hóa hàng loạt đẹp cho những người có thư viện phương tiện lớn hiện có. Nó cũng tương thích với plugin WP Retina WordPress.
Có một phiên bản miễn phí và cao cấp. Trong phiên bản cao cấp bạn trả tiền mỗi năm một lần và bạn có thể nén một lượng hình ảnh không giới hạn.
Nếu bạn kết hợp nó với plugin Cache Enabler của họ, bạn cũng có thể đi sâu vào hình ảnh WebP, đây là định dạng hình ảnh nhẹ mới từ Google.
WP Smush
WP Smush có cả phiên bản miễn phí và cao cấp. Nó sẽ giảm thông tin ẩn từ hình ảnh để giảm kích thước mà không làm giảm chất lượng.
Nó sẽ quét hình ảnh và giảm chúng khi bạn tải chúng lên trang web của bạn. Nó cũng sẽ quét các hình ảnh mà bạn đã tải lên và giảm những hình ảnh đó.
Nó sẽ làm nhòe hàng loạt lên đến 50 tệp cùng một lúc. Bạn cũng có thể tự làm nhòe nếu muốn. Nó sẽ làm nhòe các loại hình ảnh JPEG, GIF và PNG. Kích thước tệp được giới hạn ở 1MB.
- Nó tương thích với một số plugin thư viện phương tiện phổ biến nhất như WP All Import và WPML.
- Tất cả tối ưu hóa hình ảnh được thực hiện với các kỹ thuật nén không mất dữ liệu, giữ cho chất lượng hình ảnh của bạn cao.
- Nó không phải là vấn đề mà thư mục bạn lưu hình ảnh của bạn. Smush tìm thấy chúng và nén chúng.
- Smush có một tùy chọn để tự động đặt chiều rộng và chiều cao cho tất cả các hình ảnh, vì vậy tất cả các hình ảnh của bạn đều được thay đổi kích thước theo tỷ lệ giống hệt nhau.
TinyPNG (also compressed JPGs)
TinyPNG sử dụng dịch vụ TinyJPG và TinyPNG (tài khoản miễn phí cho phép bạn nén khoảng 100 hình ảnh mỗi tháng) để tối ưu hóa hình ảnh JPG và PNG của bạn. Nó sẽ tự động nén hình ảnh mới và nén số lượng lớn hình ảnh hiện có của bạn. Nó sẽ chuyển đổi CMYK sang RBG để tiết kiệm không gian.
Nó sẽ nén hình ảnh JPEG lên đến 60% và hình ảnh PNG lên đến 80% mà không làm giảm chất lượng hình ảnh. Nó không có giới hạn kích thước tập tin.
ImageRecycle
Plugin ImageRecyle là trình tối ưu hóa hình ảnh và PDF tự động. Plugin này tập trung vào không chỉ nén hình ảnh mà cả PDF. Một tính năng thực sự tiện dụng là khả năng đặt kích thước tệp tối thiểu để nén.
Ví dụ: nếu bạn có hình ảnh có kích thước 80 KB, bạn có thể tự động loại trừ chúng khỏi nén. Điều này đảm bảo hình ảnh và tập tin không bao giờ bị nén quá nhiều. Nó cũng bao gồm tối ưu hóa hàng loạt và thay đổi kích thước hình ảnh tự động.
Lưu ý: Họ có bản dùng thử 15 ngày miễn phí, nhưng đây là dịch vụ cao cấp và hình ảnh được tải lên và nén bằng máy chủ của họ. Họ không tính phí mỗi tháng, nhưng thay vào đó là tổng số hình ảnh được nén, bắt đầu từ $ 10 cho 10.000.
Phần kết luận
SEO hình ảnh là cực kỳ quan trọng đối với bất kỳ trang web – cũ hay mới. Những người thực hiện SEO hình ảnh đúng cách (đôi khi có thể khá trần tục), sẽ đạt được một lượng lưu lượng truy cập không phải trả tiền (loại lưu lượng tốt nhất) trong thời gian dài.
Bạn có cách nào khác để tối ưu hóa hình ảnh trên WordPress ? Hãy comment dưới đây để cùng trao đổi với Tài nhé.
titanic.vn .
