Cách tối ưu hóa hình ảnh để có hiệu suất tốt nhất

Hình ảnh đóng một vai trò lớn trên web.

Nội dung trực quan chiếm phần lớn kích thước trang web và theo cách này kể từ khi giới thiệu các yếu tố hình ảnh trong thiết kế web HTML. Có đến 64% kích thước trang web trung bình được đưa lên bằng hình ảnh. Làm việc để tối ưu hóa hình ảnh không chỉ làm giảm kích thước trang web mà còn cải thiện đáng kể hiệu suất / thời gian tải trang web.

cỡ trang trung bình
Và mặc dù công nghệ được sử dụng để chạy một trang web tiếp tục phát triển, trong 6 năm qua, kích thước trang web trung bình đã tăng hơn 300%. Một ví dụ về sự tăng trưởng tẻ nhạt này sẽ là bất kỳ trang web hướng nội dung nào liên quan đến nhiều phần nội dung trên một trang, ví dụ, các trang web thương mại điện tử dựa vào rất nhiều nội dung trực quan để hiển thị các sản phẩm, có thể nhanh chóng xếp chồng lên một trang web lớn kích thước trang do thực tế là một danh mục Thương mại điện tử có thể có hơn 20 sản phẩm để hiển thị.

Tối ưu hóa hình ảnh nên được dạy trong tất cả các cuốn sách, khóa học và hướng dẫn có liên quan đến việc tạo trang web.

Trong hướng dẫn này, bạn sẽ tìm hiểu về các loại hình ảnh (định dạng) khác nhau và khả năng nén của chúng cũng như cách tối ưu hóa hình ảnh của bạn để có hiệu suất tốt nhất.

Bạn muốn tìm hiểu thêm về WordPress SEO, UX, UI, tối ưu hóa trang web, tối ưu hóa tốc độ, tối ưu hóa tỷ lệ chuyển đổi? Truy cập WPAll ngay hôm nay. 

Các loại hình ảnh phổ biến và khả năng sử dụng của chúng
Báo cáo thống kê từ Lưu trữ HTTP cho thấy các hình thức hình ảnh được sử dụng phổ biến nhất trên web là JPG (46%), PNG (29%) và GIF (23%) theo sau là SVG (1%) và WebP (0 ~%) .

JPG sử dụng nén mất dữ liệu, điều này có nghĩa là thay đổi kích thước hình ảnh JPG thành kích thước nhỏ hơn sẽ đi kèm với chi phí giảm chất lượng hình ảnh. PNG và GIF sử dụng cái được gọi là nén không mất dữ liệu, lossless có nghĩa là kích thước tệp có thể được giảm mà không ảnh hưởng đến chất lượng hình ảnh. Hình ảnh của bạn phải là duy nhất và đối với hình ảnh độc đáo, bạn có thể sử dụng một công cụ như tìm kiếm hình ảnh ngược .

Vì vậy, tại sao JPG rất phổ biến, mặc dù kích thước khổng lồ của chúng và thực tế là hình ảnh JPG mất chất lượng với việc giảm kích thước? Các tệp JPG phổ biến hơn trong số các ấn phẩm và nhiếp ảnh gia muốn duy trì chất lượng ảnh nguyên sơ. JPG phù hợp hơn để nén hình ảnh xử lý các loại màu sắc và hình dạng mở rộng.

Khi nào nên sử dụng jpeg và png
Hãy nghĩ về nó theo cách này, JPG là những bức ảnh được chụp theo kịch bản đời thực, trong khi PNG thường là hình ảnh được chế tạo bằng kỹ thuật số chỉ nhằm mục đích sử dụng kỹ thuật số.

Và ngay cả khi bạn nghĩ rằng tất cả các JPG của bạn được tối ưu hóa một cách an toàn để có hiệu suất tối ưu, hãy chạy trang web và trang web của bạn thông qua PageSpeed ​​Insights - điều này sẽ cho bạn ý tưởng tốt hơn về việc có còn tệp nào để tối ưu hóa hay không.

Ở đây chúng tôi có một ví dụ về việc chạy trang web NY Times thông qua PageSpeed ​​Insights:

Mặc dù không đáng kể, đối với tất cả các hình ảnh có trên trang chủ, có thể giảm 81% cho tất cả các hình ảnh hiện tại. Những cải tiến nhỏ như thế này có thể dẫn đến điểm chuẩn hiệu suất cao hơn nhiều trong bức tranh lớn hơn.

Hiệu suất hình ảnh trong thiết kế Web đáp ứng
Trước khi chúng tôi đi sâu vào danh sách các công cụ có thể được sử dụng để nén hình ảnh, bạn nên nói một chút về Thiết kế Web đáp ứng và tác động của nó đối với các thiết bị di động liên quan đến nội dung hình ảnh.

Tạo một hình ảnh duy nhất cho tất cả các thiết bị sẽ có tác động trở lại, dưới hình thức cung cấp cho người dùng di động các tệp hình ảnh lớn không cần thiết, trong khi thực tế có một giải pháp thay thế. Có, việc chia tỷ lệ hình ảnh cho các kích thước thiết bị khác nhau sẽ giúp bạn làm việc nhiều hơn, nhưng nếu hiệu suất là điều bạn muốn cải thiện, bạn phải trả tiền để thực hiện công việc.

Làm thế nào để phục vụ hình ảnh phản hồi trên các trang web của bạn?

Có một thuộc tính HTML được gọi là srcset cho phép bạn chỉ định nhiều phiên bản của hình ảnh và để trình duyệt quyết định xem phiên bản nào sẽ là tốt nhất trong mọi tình huống cụ thể. Một ví dụ về srcset trong hành động sẽ như sau:

<img src = '' '' '' '' '' '' '' '' '' '' '' '' '' '

Điều xảy ra ở đây là trình duyệt tự động quyết định độ rộng của thiết bị đang truy cập trang web của bạn và cung cấp cho nó hình ảnh phù hợp nhất từ ​​hình ảnh bạn đã chỉ định bằng thuộc tính srcset .

Những lợi ích ở đây là vô giá, với chi phí phải tạo lại một hình ảnh theo nhiều biến thể. Bất cứ ai quan tâm đến độc giả của họ đủ sẽ thấy không có vấn đề với phương pháp này.

Người dùng WordPress nên biết rằng WordPress thực hiện quá trình thay đổi kích thước hình ảnh tự động bất cứ khi nào bạn tải lên hình ảnh mới thông qua trình quản lý phương tiện, bạn có thể đọc thêm về trang Thumbnails của WordPress Codex Post . Vì vậy, về cơ bản, bạn sẽ chỉ cần thêm thuộc tính srcset .

Tối ưu hóa hình ảnh của bạn cho hiệu suất
Về tất cả các kỹ thuật, chúng tôi sẵn sàng tiến về phía trước với hiệu suất hình ảnh và tìm hiểu về các công cụ đang được sử dụng trong các tình huống trong thế giới thực, không chỉ bởi các blogger WordPress mà bất kỳ ai duy trì trang web với hình ảnh trực quan như một phần của nội dung.

Xem xét đồ họa véc tơ (SVG)
Đồ họa vector là việc tạo ra các hình ảnh kỹ thuật số thông qua một chuỗi các lệnh hoặc câu lệnh toán học đặt các đường và hình dạng trong một không gian hai chiều hoặc ba chiều nhất định. Trong vật lý, một vectơ là một đại diện của cả một đại lượng và một hướng cùng một lúc. Trong đồ họa vector, tệp kết quả từ tác phẩm của một nghệ sĩ đồ họa được tạo và lưu dưới dạng một chuỗi các câu lệnh vector. Ví dụ, thay vì chứa một bit trong tệp cho mỗi bit của bản vẽ đường thẳng, tệp đồ họa vector mô tả một loạt các điểm sẽ được kết nối. Một kết quả là một tập tin nhỏ hơn nhiều. - TechTarget

Trên internet, đồ họa vector được sử dụng thông qua định dạng SVG (Đồ họa vectơ có thể mở rộng) có nguồn gốc từ web. Thật không may, SVG vẫn đang được triển khai mạnh mẽ để có hỗ trợ trình duyệt chéo thực sự, nhưng bạn có thể xem báo cáo sau đây từ Tôi có thể sử dụng :

Hỗ trợ SVG cho trình duyệt
Đồ họa SVG được hỗ trợ bởi tất cả các trình duyệt chính, bao gồm cả hệ điều hành di động. Vì vậy, những lợi ích thực sự của việc sử dụng đồ họa vector, thay vì nói JPG hay PNG là gì?

Đồ họa vector độc lập với chất lượng từ kích thước độ phân giải. Bạn có thể chia tỷ lệ hình ảnh vector theo bất kỳ hướng nào và nó sẽ không làm mất bất kỳ chi tiết nào về chất lượng hình ảnh. Sử dụng một SVG duy nhất cho các yếu tố như logo trang web có thể cải thiện đáng kể việc bảo tồn tài nguyên và hiệu suất phân phối hình ảnh.
Hình ảnh vector thường được xếp lớp và cho phép dễ dàng chỉnh sửa với việc sử dụng phần mềm vector phổ biến, chẳng hạn như Illustrator và Sketch cho người dùng Mac.
Các vectơ thường có kích thước nhỏ hơn nhiều so với các PNG hoặc JPG.
Sự nhấn mạnh ở đây là các yếu tố đồ họa như logo thương hiệu, biểu tượng phông chữ và các yếu tố hình ảnh chung được tạo ra trong môi trường kỹ thuật số.

Công cụ nén hình ảnh (Dòng lệnh)
Tiến về phía trước, chúng ta hãy xem các công cụ nén hình ảnh phổ biến nhất cho các định dạng hình ảnh phổ biến. Đây cũng sẽ là những công cụ mà bạn rất có thể sẽ chỉ sử dụng trong trường hợp có máy chủ web VPS / dành riêng cho trang web của bạn vì tất cả các công cụ sau đây chạy trực tiếp từ giao diện dòng lệnh.

MozJPEG -
Đập nát PNG -
OptiPNG -
PNGQuant -
Gificle -
ImageOptim -
Nén hình ảnh trên web
Vận chuyển GIF và các thuật toán nén định dạng hình ảnh phổ quát khác lên web không phải là một nhiệm vụ dễ dàng, đó là lý do tại sao có nhiều ứng dụng nén hình ảnh được xây dựng cho JPG và PNG, và một trong những mục yêu thích mọi thời đại của tôi là TinyPNG; nền tảng nén hình ảnh sẵn có trong một ứng dụng trình duyệt, có khả năng nén cả tệp JPG và PNG. Những kẻ này đã thực sự nỗ lực để biến đây thành tài nguyên nén hình ảnh tốt nhất mà bạn sẽ tìm thấy trên web. Trung bình, hình ảnh của tôi giảm 60% ~ kích thước khi đưa qua TinyPNG .
Tạo Website
Nền tảng trang web TinyPNG
TinyPNG, cũng có thể chuyển đổi các tệp JPG, có thể nén tối đa 20 tệp cùng một lúc - mặc dù, gần đây tôi đã có thể tải lên tới 30 tệp trực tiếp thông qua trang web, vì vậy hãy tự mình thử nghiệm.

Nếu bạn là người tạo nội dung cho web hoặc thường làm việc với hình ảnh trong quy trình làm việc của mình, thì TinyPNG sẽ là một sự bổ sung tuyệt vời vào danh sách các công cụ hiện có của bạn để tối ưu hóa hiệu suất nội dung. Một plugin riêng cho Photoshop và API dành cho nhà phát triển cũng có sẵn.

Tuy nhiên, tôi muốn tiếp tục với bài đăng để đề cập đến các công cụ nén hình ảnh có liên quan trực tiếp đến WordPress và sẽ giúp bạn với tư cách là một blogger WordPress để tự động hóa quá trình nén hình ảnh và bỏ lại công việc thủ công.

Tối ưu hóa hình ảnh & tự động hóa cho WordPress
Tự động hóa là rất tốt vì nó giúp loại bỏ nhu cầu xử lý thủ công, và thay vào đó, mục tiêu - nén hình ảnh - có thể để lại trong tay một thuật toán. Và vì nén hình ảnh và hiệu suất web là những chủ đề rất lớn trên web, bạn sẽ thấy không thiếu các plugin, dịch vụ và nền tảng WordPress cung cấp một số dạng khả năng tối ưu hóa hình ảnh. Tôi muốn cho bạn thấy một số yêu thích cá nhân của tôi.

Lưu trữ một dịch vụ tối ưu hóa hình ảnh cho hiệu suất không phải là một liên doanh giá rẻ. Điều này liên quan đến việc sử dụng năng lượng máy tính để nén hình ảnh trên quy mô lớn, dựa trên số lượng yêu cầu đến từ các blogger tại bất kỳ thời điểm nào. Đây là lý do tại sao lần đầu tiên chúng tôi khám phá một số công cụ độc lập tuyệt vời mà bạn có thể tự dạy mình sử dụng. Các plugin sau đây đều cung cấp một gói cơ bản với hàng trăm hình ảnh miễn phí mà bạn có thể xử lý, nhưng nếu bạn đang chạy một trang web nặng nội dung, các gói giá cao cấp cũng có sẵn. Photon là miễn phí mãi mãi vì được phát triển bởi Automattic .

Tối ưu
Optimole - Dịch vụ tối ưu hóa hình ảnh
Optimole là một plugin WordPress miễn phí sẽ làm giảm hình ảnh trang web của bạn mà không làm thay đổi chất lượng của chúng. Trên thực tế, một hình ảnh được tối ưu hóa sẽ trông giống hệt như phiên bản gốc của nó, chỉ có điều nó sẽ nhẹ hơn. Plugin sử dụng cả tối ưu hóa lossless và lossy để xử lý hình ảnh và hoạt động trên chế độ lái tự động. Sau khi cài đặt, nó sẽ thực hiện công việc một mình - bạn không phải làm thêm.

Optimole thay đổi kích thước, nén và phục vụ hình ảnh của bạn thông qua CDN ở bất kỳ vị trí nào. Hơn nữa, plugin đã được tối ưu hóa để cung cấp kết quả tương tự trên tất cả các thiết bị và cho phép bạn theo dõi và giám sát hoạt động của nó từ bảng điều khiển thân thiện và hiện đại.

Photon
Jetpack Photon
Photon là một plugin Jetpack được phát triển tự động có thể giúp mở rộng quy mô nội dung trực quan của bạn trên blog WordPress của bạn. Điều này đạt được thông qua việc lọc nội dung và phục vụ các phiên bản được cá nhân hóa hơn cho các phiên bản trình duyệt có chiều rộng khác nhau. Nhược điểm của Photon là hiện tại nó không cung cấp tính năng vô hiệu hóa bộ đệm, có nghĩa là nội dung trực quan sẽ được lưu trữ vĩnh viễn trừ khi bạn bắt đầu thay đổi tên tệp. Hình ảnh cũng sẽ không được nâng cấp nếu sử dụng Photon, nhưng điều này có ý nghĩa vì việc nâng cấp làm cho hình ảnh của bạn mất rất nhiều chất lượng. Lựa chọn tốt cho người dùng WordPress.com và những người mới tham gia viết blog, nên sử dụng bất kỳ công cụ nào sau đây.

TinyPNG cho WordPress
Plugin TinyPNG WP
TinyPNG đã nhận được một đề cập trước đó và hiện đang được giới thiệu lần thứ hai. Điều làm cho TinyPNG trở nên độc đáo là thuật toán của họ, hiện đã được đưa vào WordPress dưới dạng một plugin. Plugin sẽ tự động nén bất kỳ hình ảnh JPG hoặc PNG mới nào mà bạn tải lên Blog WordPress của mình bằng Trình quản lý tệp phương tiện, với giới hạn 500 lần nén hình ảnh trong khoảng thời gian một tháng. Một gói giá cao cấp, mà bạn có thể tùy chỉnh theo số lượng hình ảnh bạn dự định nén, có sẵn và sẽ không cung cấp bất kỳ hạn chế nào.

Sử dụng plugin TinyPNG sẽ giúp bạn tiết kiệm rất nhiều thời gian mà nếu không bạn sẽ phải thay đổi kích thước và tự nén hình ảnh.

ShortPixel
Plugin ShortPixel
ShortPixel hoạt động tương tự, nhưng hiểu rằng đó không chỉ là nội dung mới của bạn cần được nén, hình ảnh cũ cũng cần được nén để tăng thời gian tải trang cho nội dung cũ hơn và điều này sẽ có thể thông qua tính năng độc đáo của ShortPixel cho phép bạn nén tập tin phương tiện truyền thông cũ ngay lập tức. Plugin hỗ trợ nén cho các loại tệp sau: JPG, PNG, GIF và PDF. Nó sẽ tự động tìm nạp dữ liệu hình ảnh và nén hình ảnh đặc trưng / hình thu nhỏ bên cạnh bản gốc, không có giới hạn nào cho kích thước tệp mà bạn có thể nén, tuy nhiên, một tài khoản miễn phí chỉ có thể tận hưởng tối đa 100 lần nén mỗi tháng. Bạn sẽ có quyền truy cập bên trong bảng điều khiển quản trị của mình để báo cáo chi tiết về hình ảnh mà bạn đã nén.

Optimus
Plugin Optimus
Optimus cũng là một sản phẩm tinh vi, tiếp thị bản thân thông qua các tính năng hiệu suất web độc đáo để tối ưu hóa hình ảnh. Cái đầu tiên được gọi là JPEG Progressive JPEG, một tính năng sẽ tự động tải sự xuất hiện của các tệp JPG của bạn, với pixel nhẹ cho đến khi dữ liệu được tải đầy đủ, điều này phản ánh quá trình cơ bản của việc tải hình ảnh JPG, thường có nghĩa là hình ảnh được tải từ trên xuống dưới, có nghĩa là các tệp JPG lớn có thể mất nhiều thời gian để xuất hiện trên trang và không khuyến khích người đọc tiếp tục. Optimus hứa hẹn sẽ tối ưu hóa hình ảnh mà không làm giảm chất lượng. Optimus cũng là nền tảng duy nhất tại thời điểm này cung cấp chuyển đổi hình ảnh sang định dạng WebP của Google, được cho là nhanh hơn 70% so với bất kỳ thứ gì khác trên thị trường ngay bây giờ.