Hướng dẫn quản lý hình ảnh trong wordpress cơ bản

Hình ảnh là một trong web yếu tố quan trong trên trang web, đặc biệt là khi nói đến một chiến dịch tiếp thị số. Vậy cách quản lỹ hình ảnh trong WordPress như thế nào để tối ưu nhất. Hãy cùng webaffiliatevn.com xem bài viết dưới đây! Bài viết cung cấp cho bạn các công cụ cần thiết để quản lý hình ảnh trong wordpress - . Những thứ đó bao gồm tối ưu hóa kỹ thuật, SEO, tích hợp CDN và quản lý thư viện. Trong hướng dẫn này, chúng tôi sẽ chỉ đề xuất các phương pháp, hướng dẫn, plugin và theme mà chúng tôi đã thử hoặc được các người sử dụng wordpress lâu năm giới thiệu.

Mẹo tối ưu hóa hiệu suất và kỹ thuật cho hình ảnh WordPress

Có khá nhiều tùy chọn tối ưu hóa hình ảnh có sẵn trong WordPress. Chúng ta sẽ xem xét một số mẹo tối ưu hóa hình ảnh phổ biến nhất mà mọi người nên tuân theo, cùng với một số mẹo khác có ích trong một số trường hợp.

JPG hay PNG? Sử dụng định dạng hình ảnh chính xác

Bước đầu tiên trong tối ưu hóa hình ảnh là chọn một dịnh dang tốt. Đây là trường hợp tối ưu hóa hình ảnh trong WordPress. Tất cả bắt đầu với việc chọn định dạng hình ảnh phù hợp. JPG và PNG là hai định dạng hình ảnh phổ biến nhất được sử dụng phổ biến nhất trong tiếp thị nội dung. Bí quyết là hiểu định dạng nào sẽ chọn cho từng loại hình ảnh. Chọn sai, gây ra sự gia tăng lớn về kích thước hình ảnh. Đây là các quy tắc.

Khi nào nên sử dụng định dạng PNG?

Đối với hình ảnh phẳng - chẳng hạn như vectơ, hình minh họa, phông chữ, logo, biểu ngữ, hình dạng, biểu ngữ, v.v. - bất kỳ thứ gì được tạo ở định dạng vectơ như định dạng EPS hoặc Adobe Illustrator (.AI), hãy sử dụng PNG. Nếu bạn sử dụng JPG trong trường hợp này, bạn sẽ không thỏa hiệp về kích thước. Trên thực tế, ở độ phân giải cao hơn, PNG sẽ nhẹ hơn mà không giảm chất lượng. JPG sẽ bị ảnh hưởng. Lấy ví dụ của anh ấy. Chúng tôi sẽ tạo một hình ảnh phẳng ở 5000px và lưu nó dưới dạng JPG và PNG.


So sánh

Hình ảnh phẳng
JPG 233KB
PNG 42KB
Tóm lại, hình ảnh JPG có dung lượng cao hơn 455% so với PNG cho cùng độ phân giải.

Khi nào nên sử dụng định dạng JPG?

Đối với mọi thứ khác, sử dụng JPG. Bất cứ điều gì khác ngoài hình ảnh phẳng hoặc vector, hãy sử dụng JPG. Hình ảnh về con người, địa điểm, đồ vật, v.v. - sử dụng JPG. Hầu như tất cả các hình ảnh chứng khoán thuộc thể loại này sử dụng JPG. Nếu bạn sử dụng PNG thay cho JPG, bạn sẽ gặp phải một số vấn đề nghiêm trọng về hiệu suất. Bạn cần phải hết sức cẩn thận trong trường hợp này. Nếu bạn sử dụng JPG thay cho PNG, sẽ có rất ít hoặc không có thiệt hại. Tuy nhiên, nếu bạn sử dụng một PNG đẫm máu trong trường hợp JPG, bạn sẽ tạo ra nhiều khoảng trống. Hãy xem ví dụ này. Thiết lập: Tôi đã tải xuống hình ảnh này từ Shutterstock, nặng khoảng 10,3 MB ở độ phân giải 6149 × 4562 - về cơ bản là ảnh chứng khoán 28MP. Trừ khi chúng tôi đang chuẩn bị một cái gì đó như một tập tài liệu in sẵn, chúng tôi sẽ không sử dụng độ phân giải đầy đủ của ảnh trong blog của chúng tôi. Giả sử chúng ta có kích thước hình ảnh tối đa cố định của blog là 1600px. Thử nghiệm: Chúng tôi sẽ thay đổi kích thước hình ảnh nguồn thành 1600px và tạo bốn phiên bản - hai cho định dạng PNG và hai cho JPG. Đối với mỗi định dạng (JPG / PNG), chúng tôi sẽ sử dụng (a) đề xuất cài đặt nén và (b) cài đặt nén tối đa.


Hình ảnh mẫu cho thí nghiệm JEPG

Kết quả: Dưới đây là kết quả trong một biểu đồ đẹp để bạn theo dõi:
Ảnh gốc (KB) 10870
Mục tiêu giải quyết 1600px
định dạng Cài đặt Kích thước (KB) Giảm%
JPG Tiến bộ, Chất lượng = 85 231 98%
Không tiến bộ, chất lượng = 85 239 98%
PNG Nén = 0 5575 49%
Nén = 6 1852 83%
Nén = 9 1750 84%
Từ cái nhìn đầu tiên, người ta có thể nghĩ rằng nén 84% PNG là đủ tốt so với 98% đạt được trong JPG. Điều đó không hoàn toàn đúng. Nếu bạn xem xét kỹ hơn về kích thước hình ảnh, bạn sẽ thấy rằng PNG nặng hơn 1,7 MB một chút trong khi JPG là 0,22 MB. Điều đó có nghĩa là, PNG nặng hơn 8 lần so với phiên bản JPG của cùng một hình ảnh ở cùng độ phân giải. Nói cách khác, với cùng một hình ảnh và độ phân giải, phiên bản JPG nhẹ hơn 700% so với PNG!
Đối với cùng một hình ảnh và độ phân giải, phiên bản JPG nhẹ hơn 700% so với PNG!
Theo nguyên tắc thông thường, hãy sử dụng PNG cho hình ảnh phẳng và JPG cho mọi thứ khác.

Danh sách kiểm tra để tải lên hình ảnh chứng khoán trong blog

Có hàng tấn blog nơi các biên tập viên trực tiếp tải lên phiên bản độ phân giải đầy đủ của hình ảnh trong các bài đăng trên blog của họ. Dưới đây là một vài gợi ý để tải ảnh stock lên blog. Tôi sử dụng một phần mềm miễn phí có tên là IrfanView có nhiều tính năng tuyệt vời. Tôi sẽ minh họa từng cái cho bạn.

1. Thay đổi kích thước hình ảnh của bạn

Trước hết, bạn cần quyết định độ phân giải tối đa cho tất cả hình ảnh của bạn trong trang web WordPress của bạn. Bất kỳ hình ảnh nào trên kích thước đó sẽ được thay đổi kích thước, trừ khi tất nhiên nó nhỏ hơn. IrfanView có tính năng Chuyển đổi hàng loạt (nhấn B sau khi khởi chạy ứng dụng) có thể áp dụng danh sách các chức năng cho một loạt các hình ảnh trong một lần. Đối với mục đích của chúng tôi, các chức năng bao gồm thay đổi kích thước, cắt xén, thêm hình mờ, v.v.

2. Xóa dữ liệu EXIF

Ảnh được nhấp vào máy ảnh thông thường có rất nhiều siêu dữ liệu được nhúng - không có gì ngoài những thông tin nhỏ (nhưng hữu ích) về hình ảnh. Ví dụ về thông tin như vậy bao gồm tọa độ GPS của địa điểm là hình ảnh được nhấp, cài đặt ISO, kiểu máy ảnh, v.v.


Thông tin EXIF ​​của một bức ảnh ngẫu nhiên được nhấp vào iPhone của tôi

Trừ khi chúng tôi viết blog bằng hình ảnh, chúng tôi thường không muốn có thông tin như vậy trong hình ảnh của một bài đăng trên blog. Khi bạn lưu hoặc chuyển đổi hàng loạt hình ảnh trong IrfanView, dữ liệu EXIF ​​thường bị xóa. Điều này giúp bảo vệ sự riêng tư của bạn - đặc biệt là vị trí thực tế của bạn. Sự khác biệt về kích thước cho hầu hết các bức ảnh là khoảng 200-300 KB mỗi hình ảnh.

3. Lưu dưới dạng JPG lũy tiến



IrfanView đã lưu JEPG theo tiến bộ theo mặc định

Một hình ảnh JPG liên tục tải lớp hình ảnh theo từng lớp - do đó tăng tốc thời gian tải. Mạng phân phối nội dung như KeyCDN đã bắt đầu tự động chuyển đổi JPG sang JPG liên tục để tăng tốc độ phân phối hình ảnh và tối ưu hóa lưu trữ.

4. Đặt DPI thành 72

DPI hoặc số chấm trên mỗi inch là thước đo chất lượng của hình ảnh. Giá trị DPI cao được sử dụng cho vật liệu in. Đối với web, giá trị 72 là hoàn hảo. Được rồi, vì vậy, tóm tắt ở trên, sau đây là cài đặt của tôi. Tôi chạy tính năng này một khi tôi đã biên soạn tất cả các hình ảnh cho bài đăng trên blog của mình - trước khi tải hình ảnh lên WordPress.

Cài đặt chuyển đổi hàng loạt trong IrfanView cho một blog WordPress điển hình

5. Tối ưu hóa hình ảnh của bạn

Bất kể bạn đã sử dụng JPG hay PNG, bạn cần tối ưu hóa hình ảnh của mình. Có rất nhiều công cụ trực tuyến tuyệt vời giúp bạn tối ưu hóa hình ảnh của mình và tiết kiệm rất nhiều không gian. Tôi đang nói về các dịch vụ như TinyPNG hoặc TinyJPG chỉ đơn giản là tối ưu hóa hình ảnh PNG / JPG của bạn với một số thuật toán nâng cao.


Hình ảnh được tối ưu hóa trong TinyPNG

Thành thật mà nói, tôi không biết các thuật toán hoạt động như thế nào, nhưng chúng làm được và tôi luôn có thể giảm được 50-70% cho dù tôi có cứu chúng tốt nhất như thế nào. Bạn cũng có thể mua phiên bản pro của dịch vụ dưới dạng plugin Photoshop với giá $ 50 USD. Cả hai phiên bản Windows và Mac đều có sẵn. Đối với mục đích của tôi, phiên bản trực tuyến (kết hợp với tính năng Lưu vào Dropbox ) hoạt động tốt nhất.

Plugin tối ưu hóa hình ảnh trong WordPress

Cho đến nay, chúng tôi đã học được các bước để bắt đầu đúng. Điều gì sẽ xảy ra nếu bạn tình cờ thấy bài đăng này ngay bây giờ và đã có 100 hình ảnh được tải lên? Vâng, đây là một số plugin giúp bạn điều đó:

Trình tối ưu hóa hình ảnh đám mây EWWW



Plugin này là một nhánh của plugin 
EWWW Image Tối ưu hóa ban đầu và cực kỳ phổ biến . Với hơn 500.000 lượt tải xuống, các plugin tối ưu hóa hình ảnh này cho phép bạn tối ưu hóa hình ảnh khi chúng được tải lên WordPress. Điều làm cho nó khác biệt so với đối thủ là khả năng tối ưu hóa hình ảnh hiện có trong cơ sở dữ liệu của bạn, điều này dẫn đến một vết sưng hiệu suất rất lớn. Nó cũng tiết kiệm chi phí băng thông đáng kể vì hầu hết lưu lượng truy cập của bạn đến từ các bài viết cũ. Bạn cũng có thể tùy chọn chọn bật tính năng nén hình ảnh bị mất (mà hầu như không nhìn thấy được bằng mắt thường) nhưng có thể tiết kiệm rất nhiều không gian và băng thông. Về mặt công nghệ tối ưu hóa, nó có thể sử dụng API của TinyPNG hoặc TinyJPG để tối ưu hóa hình ảnh mới và hiện có. Nhưng đây là vấn đề. Rất nhiều máy chủ (bao gồm cả WPEngine) không cho phép plugin Tối ưu hóa hình ảnh EWWW vì nó đặt rất nhiều tải bổ sung trên máy chủ. Nếu bạn bằng cách nào đó quản lý để vượt qua các hạn chế của máy chủ, bạn có thể gặp rủi ro tài khoản của mình bị đình chỉ do vi phạm chính sách. Đây là nơi plugin EWWW Cloud Tối ưu hóa đến chơi. Nó giảm tải tất cả các tính toán cần thiết để tối ưu hóa hình ảnh lên đám mây và chỉ cần thay thế các hình ảnh chưa được tối ưu hóa bằng các hình ảnh được tối ưu hóa. Vì nguồn CPU gần như bằng 0 được sử dụng để nén, không có tải bổ sung cho máy chủ. Điều này hợp lệ cho tất cả các chuyển đổi hình ảnh mới và hiện tại trong trang web WordPress của bạn. Gói & giá: Như mọi người mong đợi, plugin không miễn phí vì nhà phát triển phải trả hóa đơn điện toán đám mây. Tuy nhiên, mức giá cực kỳ hợp lý có giá $ 9 USD cho tối ưu hóa 3000 hình ảnh cho một thuê bao trả trước. Plugin EWWW Cloud Tối ưu hóa được thiết kế đẹp mắt. Trình quét phương tiện cho bạn biết có bao nhiêu hình ảnh bạn cần để tối ưu hóa trước khi mua hàng. Dựa trên hình ảnh của máy chủ của bạn, bạn có thể mua gói trả trước có liên quan.

Plugin TinyPNG WordPress



Đây là một plugin tối ưu hóa hình ảnh tuyệt vời khác tích hợp trực tiếp với dịch vụ TinyPNG / JPG. Nó tự động hình ảnh mới và hiện có được tải lên thư viện phương tiện WordPress. Plugin này cung cấp gói miễn phí tối ưu hóa 100 hình ảnh mỗi tháng.
Freddy đã biên soạn một danh sách các plugin tối ưu hóa hình ảnh một lúc trước - hãy đọc nó nếu bạn muốn biết thêm về chủ đề này.

Phần kết luận

Điều này đưa chúng ta đến cuối bài đầu tiên trong loạt bài này. Trong bài viết tiếp theo, hãy tìm hiểu cách một số mẹo và thủ thuật tối ưu hóa hình ảnh ít được biết đến như ngăn chặn liên kết nóng, tìm nạp hình ảnh từ các máy chủ từ xa và tương tự. Bạn có một số lời khuyên dưới danh mục bắt đầu đúng ? Cho chúng tôi biết trong các ý kiến ​​dưới đây.

Nhận xét

Bài đăng phổ biến từ blog này

Slider là gì? Hướng dẫn cơ bản tạo slider trong wordpress site