Bạn không thích hình ảnh?
Họ có thể chuyển đổi một văn bản thành một trải nghiệm hấp dẫn khi bạn đọc. Hình ảnh nâng cao một bài đăng trên blog, làm cho nó dễ chia sẻ hơn và đặt tông màu và thương hiệu cho toàn bộ trang web của bạn.
Và bạn biết những gì? Chúng tôi được lập trình để đá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.
Nhưng, 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 hơn) tổng kích thước của 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 mộc700K. Bây giờ trung bình là 2 MB và nó tăng lên hàng năm.
Đó là rất lớn!
Lý do chính điều này xảy ra là vì nhiều hình ảnh đượ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 được kích thước và tối ưu hóa đúng. Đ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 và 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 để lại hình ảnh tối ưu hóa như một suy nghĩ và thay vào đó sẽ làm những điều thú vị như tạo một bài đăng hoành tráng hoặc mạng với các blogger khác trong hốc của bạn.
Nhưng, việc trang bị đầy có nghĩa là tốc độ tải trang của bạn bị ảnh hưởng. Bạn có thể không nghĩ rằng đây là một vấn đề lớn nếu bạn đang 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à nó 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à dành vô số giờ để quảng bá blog và mạng của bạn 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 rời khỏi trang web của bạn trước khi 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 một 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 lắm, nhưng khi bạn đang kết nối di động và chờ tải trang web, một giây có vẻ như là mãi mãi.
Và vì một nửa số khách truy cập của bạn có thể ở trên các kết nối di động chậm hơn, nên rõ ràng: Bạn nên giảm kích thước trang của mình. Và chúng ta đã biết ai là người phạm tội lớn nhất đối với sự phình to kích thước trang – đó là hình ảnh của họ.
Hình ảnh lớn không cần thiết cũng chiếm không gian trong tài khoản lưu trữ của bạn. Trong khi một số bạn có thể có chỗ ở với không gian lưu trữ không giới hạn trên mạng, thì nhiều nhà cung cấp dịch vụ lưu trữ cao cấp giới hạn ở khoảng 10 GB lưu trữ trên các kế hoạch cấp thấp hơn. Điều này có thể lấp đầy nhanh chóng, đặc biệt nếu bạn 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 nếu hình ảnh của bạn đang làm chậm trang web của bạn? Kiểm tra tốc độ trang web của bạn với Google PageSpeed Insights.
Nếu Google báo cáo rằng hình ảnh không được tối ưu hóa là một vấn đề, thì đây là những gì nó cần biết để khắc phục nó.
Cơ sở 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 số điều khác nhau cần lưu ý: loại tệp, kích thước và kích thước hình ảnh, cách bạn phục vụ hình ảnh và nén hình ảnh.
Chúng ta hãy xem xét kỹ hơn về từng khu vực.
Loại file
Hình ảnh trên web thường được lưu ở định dạng tệp PNG hoặc JPEG hoặc GIF cho hoạt hình. Ai mà không yêu những GIF hoạt hình ngộ nghĩnh đó trên mạng!
Bây giờ là về mặt kỹ thuật tốt Nếu bạn lưu hình ảnh của mình ở bất kỳ định dạng nào, trình duyệt của khách truy cập của bạn sẽ không gặp vấn đề gì khi hiển thị trang web của bạn, nhưng để có đượ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 – Được sử dụng cho ảnh và bố cục hiển thị người, địa điểm hoặc vật
- PNG: Lý tưởng cho đồ họa, logo, thiết kế có nhiều văn bản, ảnh chụp màn hình và khi bạn cần hình ảnh với nền trong suốt
- GIF: nếu bạn cần hoạt hình, nếu không hãy sử dụng PNG
Vậy tại sao có các định dạng khác nhau?
Theo truyền thống, PNG thường được sử dụng để lưu logo 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. Nhưng, nếu bạn cố lưu ảnh dưới dạng PNG, nó sẽ trông tuyệt vời, nhưng kích thước tệp kết quả sẽ ít gây ngạc nhiên hơn.
JPEG thường được sử dụng để lưu ảnh. Một số dữ liệu hình ảnh được 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 và biến thiên tự nhiên, nên việc giảm chất lượng thường không đáng chú ý đối với 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 và nhận thấy rằng một hình ảnh nhỏ (có thể là một headshot chẳng hạn) sẽ lấy f-o-r-e-v-e-r để tải xuống? Chậm đến mức bạn có thể thấy mọi dòng vào? Bạn tự nghĩ, làm thế nào có thể mất nhiều thời gian để tải xuống một hình ảnh nhỏ như vậy?
Và khi nó xảy ra với một hình ảnh tiêu đề lớn, nó thậm chí còn tệ hơn bởi vì nó có thể ngăn toàn bộ trang tải.
Lý do điều này xảy ra là vì blogger đã không thay đổi kích thước và tối ưu hóa đúng hình ảnh của anh ấy, và trong trường hợp ví dụ về headshot của chúng tôi, anh ấy có thể đã tải lên một JPEG độ phân giải đầy đủ trực tiếp từ máy ảnh DSLR của mình.
Và đó là một tập tin lớn!
Bạn thấy đấy, một trình duyệt web (thường) sẽ chia tỷ lệ hình ảnh theo kích thước ban đầu của nó để phù hợp với vị trí của nó trên trang web. Thứ dường như là một hình ảnh màn hình nhỏ thực sự có thể là một bức ảnh lớn 10 megapixel, được trình duyệt giảm 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 độ phân giải đầy đủ của bạn ở các kích thước khác nhau, nhưng nếu không, bạn cầ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í MS Paint . Nó có thể có nghĩa là sự khác biệt giữa tệp 50K và tệp 5 MB.
Ví dụ, WordPress sẽ tự động tạo ba (hoặc nhiều hơn, tùy thuộc vào chủ đề của bạn) hình ảnh được tải lên của bạn, tất cả với 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 ở kích thước đầy đủ.
Nếu bạn đang có thói quen tải lên hình ảnh chứng khoán lớn và muốn tiết kiệm dung lượng trên tài khoản lưu trữ của mình, plugin Imsanity WordPress hỗ trợ bạn.
Thay đổi kích thước và thay thế hình ảnh gốc bằng một cái gì đó dễ quản lý hơn, vì vậy ngay cả khi bạn chèn hình ảnh kích thước đầy đủ vào bài đăng của mình, nó sẽ không tệ đến thế.
Sau khi được kích hoạt, Imsanity cũng có thể tìm kiếm hình ảnh hiện tại của bạn và thay đổi kích thước cho phù hợp.
Phục vụ 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 tối ưu hóa chúng mỗi lần, nhưng nó có thể có tác động lớn đến thời gian tải trang của bạn.
Hầu hết các blogger đăng hình ảnh của họ trực tiếp từ tài khoản lưu trữ của họ và điều đó thường tốt, nhưng nếu bạn thực sự muốn loại bỏ mọi hiệu suất ra khỏi trang web của mình, thì việc lưu trữ hình ảnh của bạn trên mạng phân phối nội dung (CDN) có thể làm được một sự khác biệt lớn .
Một CDN bao gồm các máy chủ web có vị trí chiến lược được đặt 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 hình ảnh trùng lặp 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 họ, CDN sẽ tự động trỏ trình duyệt đến một máy chủ gần hơn về mặt địa lý với họ.
Điều này có nghĩa là khách truy cập đến châu Âu, ví dụ, sẽ nhận được hình ảnh được phục vụ từ một máy chủ địa phương ở châu Âu, chứ không phải từ Hoa Kỳ hoặc các nơi khác. Vì thời gian phản hồi và độ trễ mạng giảm, 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 (bao gồm Tường lửa để bảo mật và CDN), nhưng có những nhà cung cấp chất lượng khác như Amazon Cloudfront hoặc KeyCDN. Ngay cả CloudFlare phổ biến, không hoàn toàn là CDN, cung cấp CDN miễn phí và dễ dàng cấu hình 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 hình ảnh của bạn, không có gì làm giảm kích thước tệp của bạn hơn việc nén hình ảnh 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ư Canva hoặc Photoshop sẽ lưu các tệp nén JPEG bị mất vì nó có khả năng giảm kích thước tệp tốt nhất. Vì vậy, trong khi chất lượng hình ảnh giảm đi một chút, việc sử dụng nén hình ảnh bị mất làm giảm hình ảnh lớn xuống kích thước tương thích web.
Tôi chắc rằng nhiều người sử dụng Photoshop có thể thấy Tiết kiệm cho web tính năng như toàn bộ và kết thúc 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 hay Canva 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 được tối ưu hóa của bạn từ Photoshop hoặc các công cụ chỉnh sửa khác, nén và nén nó thêm 40% (hoặc hơn) vẫn Nó trông 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 hình ảnh của mình xuống trạng thái tương thích với web.
Dụng cụ để bàn
ImageAlpha / ImageOptim
Đối với người dùng Mac, ImageAlpha và ImageOptim là hai công cụ máy tính để bàn miễn phí 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 lên. Các công cụ này rất dễ sử dụng, chỉ cần kéo và thả các tệp của bạn, nhưng bạn phải thực hiện một hình ảnh cùng một lúc.
Tư vấn chuyên nghiệp: Đối với các chuyên gia 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à một trình nén PNG mất dữ liệu và có thể làm nên điều kỳ diệu bằng cách giảm các tệp PNG, trong khi ImageOptim thực hiện nén không mất nâng cao (với tùy chọn mất) và xóa 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 thông qua ImageAlpha:
Ở đây, tôi đã giảm hình ảnh chụp màn hình của mình từ 103K xuống còn 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 tôi, tôi tối ưu hóa chúng bằng ứng dụng máy tính để bàn JPEGmini, có sẵn cho Mac và Windows.
Phiên bản Lite cho phép bạn tối ưu hóa tối đa 20 hình ảnh mỗi ngày và chi phí $ 19,99 để loại bỏ giới hạn.
Tư vấn chuyên nghiệp: Người dùng nâng cao muốn tích hợp JPEGmini vào Photoshop hoặc Lightroom thông qua plugin có thể mua phiên bản Pro với giá 99,99 đô la.
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, TinyPNG (cũng tối ưu hóa các tệp JPEG mặc dù tên) là một ứng dụng web cho phép bạn kéo tối đa 20 hình ảnh từ 5 MB hoặc nhỏ hơn trong trình duyệt của bạn và tối ưu hóa chúng. đột ngột.
Họ cũng có API nhà phát triển và cung cấp plugin WordPress có thể tự động tối ưu hóa hình ảnh của bạn khi tải chúng.
TinyPNG cung cấp cho bạn 500 tối ưu hóa hình ảnh miễn phí mỗi tháng, sau đó tính phí từ $ 0.002-00,009 mỗi hình ảnh, tùy thuộc vào khối lượng.
Bây giờ 500 hình ảnh mỗi tháng có vẻ rất nhiều, nhưng nếu bạn xem xét thực tế rằng WordPress thường tạo ra 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 giống rất nhiều cho các blogger sung mãn. May mắn thay, chi phí cho mỗi hình ảnh là không tốn kém.
Kraken.io
Một công cụ trực tuyến phổ biến khác là Kraken. Mặc dù đây chủ yếu là một công cụ trả phí, nhưng họ có tùy chọn tải hình ảnh lên trang web của họ miễn phí, có giới hạn. Bạn chỉ có thể tải lên hình ảnh tối đa 1 MB kích thước; nếu không, bạn phải trả tiền cho dịch vụ.
Ngoài ra còn có một plugin WordPress có sẵn cho người đăng ký và plugin sẽ tự động tối ưu hóa hình ảnh của bạn khi bạn tải chúng lên thư viện phương tiện của mình.
Nếu bạn cần nén hình ảnh nhiều hơn 1 MBhoặc chỉ muốn tự động hóa mọi thứ, bạn có thể chọn đăng ký đi từ gói Micro sang $ 5 / tháng cho 500 MB hình ảnh, lên tới $ 70 / tháng Gói doanh nghiệp cho một con số khổng lồ 60 GB hình ảnh tối ưu mỗi tháng.
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ị làm phiền bằng cách tối ưu hóa hình ảnh của mình một cách thủ công, plugin EWWW Image Tối ưu hóa miễn phí cho WordPress có thể tự động tối ưu hóa hình ảnh được 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 tổn thất, nhưng phiên bản miễn phí chỉ thực hiện nén không mất dữ liệu, vì vậy mức tiết kiệm không đá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 có gì.
Gói nó lên
Với một số người dự đoán rằng kích thước trang web trung bình sẽ tiếp cận những người đó 3 MB Trong năm 2017, bây giờ là thời điểm để 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ẽ ở trên các kết nối tốc độ cao và thời gian tải trang chậm và tải trang chậm có thể ảnh hưởng đến thứ hạng Google của bạn. Để giúp bạn giảm tải, có thể nói, 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 của hình ảnh của bạn và thay đổi kích thước ảnh hoặc hình ảnh lớn từ máy ảnh kỹ thuật số sang kích thước phù hợp.
Sau đó, tận dụng tính năng nén hình ảnh hiện đại với các ứng dụng trên 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 với một plugin nếu có thể.
Cuối cùng, nếu nền tảng xuất bản của 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 những biến thể này cho bài đăng trên blog của bạn, thay vì kích thước gốc.
Ly hôn: bài này có chứa các liên kết liên kết. Điều này có nghĩa là chúng tôi có thể thực hiện một khoản hoa hồng nhỏ nếu bạn mua hàng.
