Bạn có thích hình ảnh không?

Chúng có thể biến một đoạn văn bản thành một trải nghiệm hấp dẫn khi bạn đọc. Hình ảnh cải thiện bài đăng trên blog, làm cho bài đăng đó dễ chia sẻ hơn, đồng thời thiết lập tông màu và thương hiệu cho toàn bộ trang web của bạn.

Và bạn biết gì không? Chúng tôi được thiết lập sẵn để đáp ứng với hình ảnh. Đó là lý do tại sao việc kết hợp hình ảnh vào nội dung của bạn là một công cụ mạnh mẽ để sử dụng khi tiếp thị blog của bạn.

Tuy nhiên, nếu bạn không cẩn thận, hình ảnh có thể chiếm hơn một nửa (hoặc nhiều hơn) tổng kích thước trang web của bạn. Chỉ vài năm trước, kích thước trung bình của một trang web là 600–700K. Hiện tại, dung lượng trung bình là 2 MB và đang tăng lên hàng năm.

Thật là lớn!

Lý do chính khiến điều này xảy ra là do nhiều hình ảnh đang được sử dụng thường xuyên hơn trên các trang web và những hình ảnh này không không đúng kích thước và tối ưu hóa. Điều này có nghĩa là chúng không được lưu hoặc biên dịch theo cách thân thiện với web mà thay vào đó, chúng làm đầy các trang của bạn.

Tuy nhiên, hầu hết chúng ta đều để việc tối ưu hóa hình ảnh là việc sau và muốn làm những điều thú vị hơn như tạo một bài đăng hoành tráng hoặc kết nối mạng với các blogger khác trong thị trường ngách của bạn.

Tuy nhiên, việc trang bị phình ra đồng nghĩa với việc tốc độ tải trang của bạn bị ảnh hưởng. Bạn có thể không nghĩ rằng đây là vấn đề lớn nếu bạn đang sử dụng kết nối tốc độ cao, nhưng nhiều khách truy cập của bạn thì không. Ngoài ra, Google không thích các trang tải chậm và điều đó có thể ảnh hưởng tiêu cực đến SEO của bạn.

Tại sao bạn cần tối ưu hóa hình ảnh

Bạn làm việc chăm chỉtạo nội dung xuất sắc và bạn dành vô số thời gian để quảng bá blog của mình và kết nối mạng với các blogger khác, vì vậy, điều cuối cùng bạn muốn là khách truy cập tiềm năng từ bỏ trang web của bạn trước khi nó tải!

Các nghiên cứu cho thấy rằng có tới 40% khách truy cập nhấp vào nút quay lại nếu trang web mất hơn ba giây để tải.

Tôi biết, ba giây thực sự không dài đến thế, nhưng khi bạn đang kết nối di động và đang chờ đợi để tải trang web, một giây có vẻ như kéo dài mãi mãi.

Và vì nhiều khách truy cập của bạn có thể sử dụng kết nối di động chậm hơn nên rõ ràng là – bạn cần giảm kích thước trang của mình. Và chúng tôi đã biết thủ phạm lớn nhất khiến kích thước trang phình to là gì – chính là hình ảnh của bạn.

Hình ảnh lớn không cần thiết cũng chiếm dung lượng trên tài khoản lưu trữ của bạn. Mặc dù một số bạn có thể có dịch vụ lưu trữ với dung lượng lưu trữ “không giới hạn”, nhưng nhiều nhà cung cấp dịch vụ lưu trữ cao cấp giới hạn cho bạn khoảng 10 GB dung lượng lưu trữ trên các gói cấp thấp hơn. Điều này có thể nhanh chóng lấp đầy, đặc biệt nếu bạn đang lưu trữ nhiều trang web có nhiều hình ảnh trên cùng một tài khoản.

Vì vậy, làm thế nào bạn có thể biết liệu hình ảnh của mình có đang làm chậm trang web của bạn hay không? Kiểm tra tốc độ trang web của bạn bằng Google PageSpeed ​​Insights.

Nếu Google báo cáo hình ảnh không được tối ưu hóa là có vấn đề, thì đây là những điều bạn cần biết để khắc phục.

Khái niệm cơ bản về tối ưu hóa hình ảnh

Khi nói đến việc tối ưu hóa hình ảnh trên blog của bạn, có một vài điều khác nhau mà bạn cần phải làmbiết về: loại tệp, kích thước và kích thước hình ảnh, cách bạn cung cấp hình ảnh và nén hình ảnh.

Chúng ta hãy xem xét kỹ hơn từng lĩnh vực này.

Loại tệp

Hình ảnh trên web thường được lưu ở định dạng tệp PNG hoặc JPEG – hoặc GIF cho ảnh động. Ai lại không thích những ảnh GIF động vui nhộn trôi nổi trên web!

Bây giờ, về mặt kỹ thuật được nếu bạn lưu hình ảnh của mình ở một trong hai định dạng – trình duyệt của khách truy cập sẽ không gặp khó khăn khi hiển thị trang web của bạn – nhưng để có chất lượng và tối ưu hóa tốt nhất, hãy tuân thủ các quy tắc sau:

• JPEG – sử dụng cho ảnh và thiết kế có người, địa điểm hoặc sự vật được làm nổi bật
• PNG – tốt nhất cho đồ họa , biểu trưng, ​​thiết kế nhiều văn bản, ảnh chụp màn hình và khi bạn cần hình ảnh có nền trong suốt
• GIF – nếu bạn cần hoạt ảnh, nếu không thì hãy sử dụng PNG

Vậy tại sao lại có các định dạng khác nhau ?

Chà, PNG thường được sử dụng để lưu biểu trưng và đồ họa vì nó giữ được chất lượng hình ảnh gốc – không ai muốn văn bản mờ và hình dạng pixel. Tuy nhiên, nếu bạn thử lưu ảnh dưới dạng PNG, ảnh sẽ trông tuyệt vời nhưng kích thước tệp thu được sẽ nhỏ hơn mức tuyệt vời.

JPEG thường được sử dụng để lưu ảnh. Một số dữ liệu hình ảnh bị loại bỏ để tạo kích thước tệp nhỏ hơn đáng kể, nhưng vì ảnh chứa nhiều màu sắc khác nhau và các biến thể tự nhiên nên chất lượng bị giảm sút.thường không thể nhận thấy bằng mắt người.

Chúng ta sẽ đi vào chi tiết hơn về nén sau, nhưng bây giờ nếu bạn chỉ nhớ hai điều, hãy nhớ: JPEG cho ảnh và PNG cho văn bản/đồ họa.

Kích thước hình ảnh

Bạn đã bao giờ tải một trang web lên và nhận thấy rằng một bức ảnh nhỏ (có thể là ảnh chụp trực diện chẳng hạn) phải mất rất nhiều thời gian để tải xuống chưa? Giống như, chậm đến mức bạn có thể thấy từng dòng đến? Bạn tự nghĩ, tại sao một hình ảnh nhỏ như vậy lại có thể mất nhiều thời gian để tải xuống như vậy?

Và khi nó xảy ra với một hình ảnh tiêu đề lớn, điều đó thậm chí còn tệ hơn vì nó có thể làm ngừng tải toàn bộ trang.

Lý do điều này xảy ra là do blogger đã không thay đổi kích thước và tối ưu hóa hình ảnh của họ đúng cách, và trong trường hợp ví dụ về ảnh chân dung của chúng tôi, có thể đã tải lên một JPEG có độ phân giải đầy đủ trực tiếp từ máy ảnh DSLR của họ.

Và đó là một tệp rất lớn!

Bạn thấy đấy, một trình duyệt web sẽ (thường) chia tỷ lệ hình ảnh từ kích thước ban đầu của nó để hình ảnh vừa vặn với vị trí của nó trên trang web. Những gì có vẻ là một hình ảnh nhỏ trên màn hình thực sự có thể là một bức ảnh 10 megapixel khổng lồ, được trình duyệt thu nhỏ lại trong thời gian thực.

Giờ đây, một số nền tảng xuất bản web sẽ tự động tạo nhiều biến thể của hình ảnh có độ phân giải đầy đủ của bạn theo các cách khác nhau kích thước, nhưng nếu không, bạn nên thay đổi kích thước hình ảnh của mình trước trong trình chỉnh sửa hình ảnh như Photoshop, Lightroom, Pixlr – hoặc thậm chí là MS Paint. Nó có thể có nghĩa là sự khác biệtgiữa tệp 50K và tệp 5MB.

Ví dụ: WordPress sẽ tự động tạo ba bản sao (hoặc nhiều hơn, tùy thuộc vào chủ đề của bạn) hình ảnh đã tải lên của bạn – tất cả đều có các kích thước khác nhau – mà bạn có thể sử dụng trong các bài đăng trên blog, thay vì luôn sử dụng hình ảnh có kích thước đầy đủ.

Nếu bạn có thói quen tải lên kho ảnh khổng lồ và muốn tiết kiệm dung lượng trong tài khoản lưu trữ của mình, plugin WordPress Imsanity hỗ trợ bạn.

Nó thay đổi kích thước và thay thế hình ảnh ban đầu thành một thứ gì đó dễ quản lý hơn, vì vậy ngay cả khi bạn chèn hình ảnh có kích thước đầy đủ vào bài đăng của mình thì nó cũng không tệ lắm.

Sau khi được kích hoạt, Imsanity cũng có thể tìm kiếm hình ảnh hiện có của bạn và thay đổi kích thước cho phù hợp.

Cung cấp hình ảnh của bạn

Cách bạn cung cấp hình ảnh của mình cho khách truy cập không hoàn toàn là tối ưu hóa chúng , nhưng nó có thể có tác động đáng kể đến thời gian tải trang của bạn.

Hầu hết các blogger phân phát hình ảnh của họ ngay từ tài khoản lưu trữ của họ và điều đó thường không sao, nhưng nếu bạn thực sự muốn tận dụng tối đa hiệu suất trang web của bạn, sau đó lưu trữ hình ảnh của bạn trên Mạng phân phối nội dung (CDN) có thể tạo ra sự khác biệt lớn.

CDN bao gồm các máy chủ web được đặt ở vị trí chiến lược tại các trung tâm dữ liệu trên toàn thế giới. Các máy chủ này lưu trữ các bản sao trùng lặp hình ảnh của bạn và khi trình duyệt của khách truy cập yêu cầu hình ảnh từ trang web của bạn, CDN sẽ tự động hướng trình duyệt đến mộtmáy chủ gần họ nhất về mặt địa lý.

Điều này có nghĩa là khách truy cập từ Châu Âu chẳng hạn sẽ nhận được hình ảnh được cung cấp từ máy chủ địa phương ở Châu Âu, thay vì máy chủ từ Hoa Kỳ hoặc nơi khác. Do thời gian phản hồi và độ trễ mạng giảm nên hình ảnh tải xuống nhanh hơn nhiều, giảm thời gian tải trang.

Trình hướng dẫn viết blog sử dụng Sucuri (nó bao gồm Tường lửa để bảo mật cũng như CDN), nhưng có những nhà cung cấp chất lượng khác như Cloudfront của Amazon hoặc KeyCDN. Ngay cả CloudFlare phổ biến, không hoàn toàn là CDN, cũng cung cấp CDN miễn phí và dễ thiết lập trong hầu hết các gói lưu trữ được chia sẻ.

Nén hình ảnh

Khi nói đến việc tối ưu hóa của bạn hình ảnh, không có gì làm giảm kích thước tệp của bạn hơn là nén hình ảnh bị mất dữ liệu nâng cao.

Hầu hết các công cụ chỉnh sửa hình ảnh như Visme hoặc Photoshop sẽ lưu tệp bằng cách sử dụng nén JPEG bị mất dữ liệu vì nó có khả năng giảm kích thước tệp tốt nhất. Vì vậy, mặc dù chất lượng hình ảnh bị giảm đi một chút, nhưng việc sử dụng tính năng nén hình ảnh bị mất dữ liệu sẽ giảm các hình ảnh lớn xuống kích thước thân thiện với web.

Tôi chắc rằng nhiều người sử dụng Photoshop có thể xem tính năng Save for Web của nó là tất cả và cuối cùng của tối ưu hóa hình ảnh. Và ngay cả các công cụ chỉnh sửa hình ảnh trực tuyến như PicMonkey hoặc Visme cũng tối ưu hóa hình ảnh của bạn.

Nhưng bạn có biết rằng có những công cụ có thể lấy hình ảnh “đã tối ưu hóa” của bạn từ Photoshop hoặc các công cụ chỉnh sửa khác, chia nhỏ và nén nó thêm 40% (hoặc hơn),và vẫn hình ảnh gần giống với mắt người?

Dưới đây là một số công cụ miễn phí và trả phí giúp bạn giảm bớt hình ảnh của mình xuống trạng thái thân thiện với web.

Các công cụ trên máy tính để bàn

ImageAlpha / ImageOptim

Đối với người dùng Mac, ImageOptim là một công cụ miễn phí trên máy tính để bàn mà tôi sử dụng hàng ngày để tối ưu hóa hình ảnh PNG – chủ yếu là ảnh chụp màn hình – trước khi tải chúng lên. Những công cụ này rất dễ sử dụng, bạn chỉ cần kéo và thả các tệp của mình, nhưng bạn phải thực hiện từng hình ảnh một.

Mẹo chuyên nghiệp : Đối với những người am hiểu công nghệ, có ImageOptim– CLI, nơi bạn có thể tối ưu hóa toàn bộ thư mục hình ảnh cùng một lúc.

ImageAlpha là trình nén PNG bị mất dữ liệu và có thể làm nên điều kỳ diệu trong việc thu nhỏ các tệp PNG trong khi ImageOptim thực hiện nén không mất dữ liệu nâng cao (với tùy chọn mất dữ liệu) – và nó loại bỏ siêu dữ liệu không cần thiết khỏi các tệp PNG, JPEG và GIF.

Đối với hình ảnh PNG của tôi, trước tiên tôi chạy chúng qua ImageAlpha:

Ở đây, nó đã giảm hình ảnh chụp màn hình của tôi từ 103K xuống 28K.

Sau đó, tôi chạy nó qua ImageOptim và tiết kiệm thêm 10%.

JPEGmini

Đối với các tệp JPEG của mình, tôi tối ưu hóa chúng bằng ứng dụng JPEGmini dành cho máy tính để bàn, có sẵn dành cho cả Mac và Windows.

Phiên bản Lite cho phép bạn tối ưu hóa miễn phí tối đa 20 hình ảnh mỗi ngày và có giá 19,99 USD để loại bỏ giới hạn.

Mẹo chuyên nghiệp : Người dùng nâng cao muốn tích hợp JPEGmini vào Photoshop hoặc Lightroom bằng plugin có thể mua phiên bản Pro với giá99,99 USD.

Các công cụ Trực tuyến / Đám mây / SaaS

TinyPNG

Nếu bạn đang tìm kiếm một công cụ nén hình ảnh trực tuyến chất lượng cao, thì TinyPNG (công cụ này tối ưu hóa JPEG files mặc dù có tên như vậy) là một ứng dụng web cho phép bạn kéo tối đa 20 hình ảnh có kích thước 5MB hoặc nhỏ hơn vào trình duyệt của mình và tối ưu hóa tất cả chúng cùng một lúc.

Họ cũng có API nhà phát triển và tạo một WordPress có sẵn plugin có thể tự động tối ưu hóa hình ảnh của bạn khi tải lên.

TinyPNG cung cấp cho bạn 500 lần tối ưu hóa hình ảnh miễn phí mỗi tháng và sau đó tính phí từ 0,002–0,009 đô la cho mỗi hình ảnh, tùy thuộc vào khối lượng.

Bây giờ là 500 hình ảnh mỗi tháng nghe có vẻ nhiều, nhưng khi bạn xem xét thực tế thì WordPress thường tạo từ ba đến năm biến thể của mỗi hình ảnh ở các kích cỡ khác nhau, 500 hình ảnh dường như không nhiều như vậy đối với một blogger chuyên nghiệp. May mắn thay, chi phí cho mỗi hình ảnh phù hợp với ngân sách.

Trình tối ưu hóa hình ảnh EWWW

Nếu bạn chưa sẵn sàng chi tiền và không muốn bận tâm đến việc tối ưu hóa hình ảnh của bạn theo cách thủ công, plugin EWWW Image Optimizer miễn phí dành cho WordPress có thể tự động tối ưu hóa hình ảnh tải lên của bạn.

Bạn có thể chọn đăng ký cao cấp thực hiện nén không mất dữ liệu nhưng phiên bản miễn phí chỉ thực hiện nén không mất dữ liệu nên tiết kiệm được' t gần như đáng kể. Tuy nhiên, nó sẽ giúp bạn tiết kiệm thời gian và tốt hơn là không làm gì.

Lưu ý: Để có danh sách đầy đủ, hãy xembài đăng của chúng tôi về các công cụ nén hình ảnh.

Tóm lại

Với một số người dự đoán kích thước trang web trung bình sẽ đạt 3 MB vào năm 2017, giờ là lúc bắt đầu tối ưu hóa hình ảnh của bạn.

Hãy nhớ rằng, không phải tất cả khách truy cập của bạn sẽ sử dụng kết nối tốc độ cao và trang bị phình to cũng như thời gian tải trang chậm có thể ảnh hưởng đến xếp hạng của bạn với Google. Để giúp bạn giảm tải, có thể nói như vậy, hãy tập thói quen tối ưu hóa hình ảnh của bạn ngay hôm nay.

Hãy chú ý đến kích thước hình ảnh của bạn và đổi kích thước mọi ảnh lưu trữ quá lớn hoặc hình ảnh từ máy ảnh kỹ thuật số xuống một kích thước phù hợp kích thước.

Tiếp theo, hãy tận dụng tính năng nén hình ảnh hiện đại với các ứng dụng dành cho máy tính để bàn như JPEGmini hoặc các công cụ đám mây như TinyPNG hoặc Kraken – tích hợp chúng vào WordPress bằng plugin nếu có thể.

Cuối cùng, nếu bạn nền tảng xuất bản tự động tạo các biến thể đã thay đổi kích thước của hình ảnh gốc của bạn, hãy chọn một trong số các biến thể này cho bài đăng trên blog của bạn, thay vì ảnh gốc có kích thước đầy đủ.

Bài đọc liên quan: 7 cách để giảm kích thước Kích thước của tệp PDF.