Tối ưu hóa hình ảnh để cải thiện tốc độ trang web và quảng bá trang web - Chuyên gia Semalt

Hình ảnh là một trong những thành phần quan trọng nhất của web, tất nhiên là sau văn bản. Một trang web không có hình ảnh thường sẽ nhàm chán và ít tạo động lực cho người lướt hơn một trang web có hình ảnh.

Ngoài ra, có khá nhiều lĩnh vực mà việc sử dụng hình ảnh là bắt buộc và thậm chí cần thiết để chứng minh cho trang web.

Ví dụ:

Các trang thương mại trực tuyến
Các trang danh mục đầu tư và trưng bày các tác phẩm
Các trang web hình ảnh nơi ảnh là "sản phẩm" - ví dụ: váy cưới, chụp ảnh sự kiện, v.v.
Mạng xã hội - Ngày càng có nhiều nghiên cứu chỉ ra rằng các bài đăng có ảnh nhận được nhiều bình luận và chia sẻ hơn, bằng một tỷ lệ đáng kể so với các bài đăng và trạng thái không có ảnh

Quảng cáo hình ảnh của Google: sử dụng hình ảnh đúng cách

Bạn đã đầu tư và mua ảnh từ các trang web ảnh/kho ảnh, hay thậm chí bạn đã tự mình phóng to và chụp ảnh? Bạn cũng nên tối đa hóa chúng cho mục đích SEO!

Quảng cáo Hình ảnh của Google là một trong những cách tốt nhất để tăng lưu lượng truy cập trang web ở một số khu vực nhất định - đặc biệt là những khu vực tập trung vào mặt trực quan.

Mặc dù vậy, việc sử dụng hình ảnh không đúng cách có thể gây hại nhiều hơn là có lợi cho trang web và thậm chí làm giảm đáng kể nỗ lực quảng bá. Khi nói về việc sử dụng hình ảnh trong bối cảnh của quảng cáo hữu cơ, điều quan trọng là bạn cũng cần lưu ý một vài quy tắc, việc sử dụng hình ảnh không đúng cách có thể làm giảm đáng kể tốc độ của trang web và do đó có thể có tác động đáng kể đến việc quảng cáo.

Các quy tắc tối ưu hóa hình ảnh cơ bản:

1. Trọng lượng và kích thước của hình ảnh

Một trong những thông số quan trọng để quảng bá hình ảnh trực tuyến - đó là trọng lượng của hình ảnh.

Một mặt, chúng tôi muốn sử dụng hình ảnh chất lượng cao nhưng mặt khác, nó sẽ không đi kèm với tốc độ trang web, trải nghiệm người dùng và quảng cáo. Khuyến nghị luôn luôn là "tối ưu hóa" (từ tối ưu hóa) hình ảnh ở mức tối đa có thể, mà không làm giảm đáng kể chất lượng. Để làm điều này, hãy làm theo tất cả các quy tắc sau:

Sử dụng định dạng phù hợp với các tình huống khác nhau (jpg, png, gif, v.v.) - đầy đủ chi tiết về các loại định dạng khác nhau bên dưới.
Quan trọng - Đặt kích thước của từng hình ảnh trên trang web - Tránh hiển thị hình ảnh nhỏ hơn kích thước thực (vật lý) của hình ảnh càng nhiều càng tốt, để không lãng phí tài nguyên không cần thiết. Trang web càng lớn và càng di động thì ý nghĩa càng lớn.
Đảm bảo Đối sánh đáp ứng - Nếu bạn làm việc với WordPress và một mẫu hiện đại, rất có thể bạn đã đóng góc này. Nhưng nếu không, điều quan trọng là phải luôn đảm bảo rằng hình ảnh trên trang web, đặc biệt là hình ảnh bên trong bài đăng, có khả năng đáp ứng và hiển thị tốt trên thiết bị di động, máy tính bảng, v.v.
Nén tối đa trọng lượng hình ảnh mà không làm giảm chất lượng đáng kể (mở rộng trên các công cụ và phương pháp để làm như vậy - bên dưới).

Trọng lượng đề xuất cho ảnh

Hầu hết mọi hình ảnh đều có thể được nén ở mức độ này hay mức độ khác, vì vậy bạn luôn nên chỉ sử dụng các kích thước thực sự cần thiết và được hiển thị vật lý trên trang web và giảm trọng lượng của hình ảnh càng nhiều càng tốt. Điều này đúng cho bất kỳ trang web nào. Nhưng đặc biệt là đối với các trang web có nhiều hình ảnh. Không có một quy tắc nào đúng trong mọi trường hợp, nhưng bạn nên đảm bảo rằng trọng lượng hình ảnh không vượt quá 70-80K trừ khi đó là hình ảnh bộ sưu tập/thanh trượt có tầm quan trọng đặc biệt.

2. Chọn tên thích hợp cho hình ảnh

Trong tìm kiếm hình ảnh của Google, một số tham số được tính đến để hiển thị hình ảnh có liên quan đến truy vấn. Một trong số đó là tên tệp. Bạn nên dành thêm một giây nữa và đặt tên cho hình ảnh mô tả những gì bạn nhìn thấy trong hình ảnh. Điều quan trọng là phải giữ tên tệp bằng tiếng Anh và sử dụng các dòng giữa chứ không phải khoảng trắng. Lý do là Google đối phó tốt hơn với dấu gạch ngang giữa.

Ví dụ về tên xấu cho một bức tranh:

DSC2387.jpg

Trang web promoter.png

Ví dụ về tên hay cho hình ảnh:

Search-engine-Optimizer.jpg

Đối với những người bạn tự hỏi - vâng, Google cũng biết cách xử lý tên hình ảnh tiếng Anh cho các ngôn ngữ khác. Vì nó biết cách dịch các chuỗi tìm kiếm và đánh dấu các từ đã dịch trong kết quả tìm kiếm.

3. ALT sang hình ảnh

Thẻ alt, là từ viết tắt của thay thế, là một tham số nhằm mục đích mô tả hình ảnh. Thẻ alt được định nghĩa trong hệ thống quản lý/mã HTML cho từng hình ảnh riêng lẻ và chức năng ban đầu của nó là phục vụ người mù và người khuyết tật sử dụng phần mềm đặc biệt quét các thẻ này và đọc nội dung được viết.

Về mặt kỹ thuật trong mã, nó trông như thế này:

<imgsrc="tree.jpg" alt="tree">

Ngoài tầm quan trọng của thẻ về khả năng truy cập trang web, nó còn có tầm quan trọng đối với các công cụ tìm kiếm. Thẻ alt giúp công cụ tìm kiếm hiểu chủ đề của hình ảnh là gì (cùng với những thứ khác như tên tệp, ngữ cảnh của trang mà nó đang ở trên, v.v.) và nó cũng ảnh hưởng một cách tự nhiên đến việc tìm kiếm hình ảnh trên Google.

Ngoài ra, thẻ alt là một phần của tối ưu hóa trên trang cho mọi thứ. Ngoài ra, khi có một liên kết bên ngoài thoát ra khỏi hình ảnh, thẻ alt đóng vai trò như một loại liên kết văn bản ("anchor text") cho hình ảnh.

Làm cách nào để kiểm tra xem hình ảnh có thẻ ALT hay không?

Có một số cách:

Toàn bộ cách - nhấp vào hình ảnh bằng chuột -> nhấp chuột phải -> kiểm tra một phần tử (từ ngữ khác nhau trong các trình duyệt khác nhau).
Chúng tôi muốn tìm kiếm thẻ trong lệnh <img> như được minh họa trước đó.
Sử dụng một plugin có tên là Web Developer (tuyệt vời cho nhiều tác vụ khác). Phần mở rộng cho phép chúng tôi, chỉ với một cú nhấp chuột, để hiển thị tất cả các thẻ alt mà hình ảnh có trên một trang cụ thể.

Ếch hét - Sử dụng một con ếch thích hợp khi chúng tôi muốn thực hiện quét toàn bộ hình ảnh trên trang web.

Quá trình này là nhập một URL để quét và sau đó nhấp vào tab Hình ảnh.

Ở đó, chúng ta sẽ thấy danh sách các hình ảnh trên trang web, có thể được sắp xếp theo một số tham số:

Hình ảnh nặng hơn 100kb
Hình ảnh không có thẻ ALT
Hình ảnh có thẻ ALT chứa hơn 100 ký tự (và bạn có thể nên rút ngắn chúng một chút)

Tất nhiên có nhiều cách hơn và nhiều plugin khác nhau, nhưng có vẻ như đối với tôi, tôi đã đề cập đến chủ đề ở đây về nhu cầu điểm, trên mỗi trang và đánh giá toàn diện về trang web.

Quảng cáo hình ảnh của Google - mẹo để tối ưu hóa thẻ ALT

Bạn không nên ép từ khóa mà hãy cố gắng mô tả những gì bạn thấy trong hình.

Nếu có thể kết hợp mô tả hình ảnh + từ khóa liên quan để nổi bật tự nhiên - thì tốt biết mấy.
Không cần phóng đại mô tả, một thẻ alt từ 2-5 từ là quá đủ.
Chúng tôi khuyến nghị rằng thẻ alt và thẻ tiêu đề cho hình ảnh không được giống hệt nhau.
Đối với các trang web thương mại - nếu sản phẩm có số kiểu máy, bạn nên sử dụng nó trong thẻ alt (để xuất hiện trong các tìm kiếm hình ảnh của Google).

Không cần thiết phải sử dụng alts cho hình nền/hình ảnh trang trí - thậm chí bạn không nên làm như vậy để Google không nghi ngờ rằng bạn đang cố gắng tối ưu hóa quá mức.

4. Thẻ tiêu đề cho hình ảnh

Chú thích hình ảnh, hoặc Phụ đề, là một loại chú giải công cụ có thể được nhìn thấy bằng cách di chuyển chuột qua hình ảnh. Nhiều người nhầm lẫn chúng với thẻ ALT.

Tiêu đề hình ảnh là một dấu hiệu khác về mức độ liên quan và chủ đề của hình ảnh có thể giúp Google hiểu hình ảnh đang nói về điều gì và cải thiện thứ hạng tìm kiếm hình ảnh. Không giống như thẻ ALT, thẻ tiêu đề thường sẽ mang tính mô tả hơn và dài hơn một chút, và mục đích của nó là mô tả cho người lướt sóng những gì được nhìn thấy trong hình ảnh và/hoặc những gì sẽ đến sau khi nhấp vào hình ảnh. Các trang web tin tức sử dụng thẻ này thường xuyên.

Đây là những gì nó trông giống như trong mã:

5. Loại hình ảnh và phần mở rộng tệp

Có một số định dạng phổ biến để sử dụng hình ảnh trực tuyến. Tôi sẽ mở rộng ngắn gọn về từng loại trong số chúng:

JPEG/JPG - Định dạng lâu đời nhất và có lẽ là phổ biến nhất cho hình ảnh trên web. Ưu điểm của định dạng JPG là khả năng hiển thị hình ảnh chất lượng tương đối cao và trọng lượng thấp. Hình ảnh JPG không hỗ trợ độ mờ.
GIF - Định dạng GIF cũng đã gắn bó với chúng ta từ khá lâu, bắt đầu từ những ngày còn đĩa mềm. Gifs chỉ hỗ trợ 256 màu, vì vậy chúng là định dạng hình ảnh chất lượng kém hơn và chủ yếu nhằm mục đích sử dụng làm biểu tượng hoặc trang trí các loại. Ngoài ra, định dạng GIP hỗ trợ hình ảnh động và thậm chí Facebook gần đây đã bắt đầu hỗ trợ định dạng này trong nguồn cấp dữ liệu.

Điểm mấu chốt - gif không có nghĩa là để hiển thị hình ảnh, đặc biệt là khi nói đến chất lượng hình ảnh, mà dành cho các biểu tượng, hoạt ảnh và yếu tố đơn giản hơn.

PNG - Đây là định dạng mới (tương đối) trong nhóm. Ưu điểm chính của tệp PNG - chất lượng cao hơn so với JPG và GIF và hỗ trợ tính minh bạch. Các tệp PNG được chia thành 2 định dạng - PNG24 có chất lượng tốt hơn (và trọng lượng của hình ảnh tương ứng) và PNG8 là định dạng kinh tế nhất trong số đó.

Có rất nhiều định dạng hình ảnh khác có sẵn, nhưng chúng ít thích hợp hơn để sử dụng trên các trang web.

tiền boa - Đối với những người sử dụng Photoshop, tôi luôn khuyên bạn nên so sánh trọng lượng hình ảnh bằng Save for web và thiết bị giữa các định dạng khác nhau (có một bản xem trước trọng lượng hình ảnh trước khi lưu tệp).

Quy tắc chung để chọn định dạng hình ảnh

Trong hầu hết các trường hợp, định dạng JPG sẽ thực hiện công việc. Hình ảnh JPG cho phép chất lượng cao và trọng lượng tệp thấp.
Không sử dụng GIF trong các tệp lớn chứa nhiều chi tiết - trọng lượng tệp sẽ lớn. Định dạng này không được thiết kế cho việc này và phù hợp hơn để sử dụng với các yếu tố nhỏ và đơn giản.
Nếu độ trong suốt đóng một vai trò quan trọng - hãy sử dụng định dạng PNG. Bạn nên so sánh PNG24 và PNG8 để giảm trọng lượng của hình ảnh xuống mức thấp nhất có thể.

6. Sử dụng hình thu nhỏ đúng cách

Hình thu nhỏ (bản xem trước) là một thành phần quan trọng và thậm chí là quan trọng của một số trang web - đặc biệt là các trang web dựa trên thư viện và trang web thương mại. Hình thu nhỏ ("Thumbnails" của Google Translateâ € ¦) một mặt có thể tuyệt vời nhưng mặt khác lại phá hoại đáng kể trang web và trải nghiệm người dùng.

Điều quan trọng nhất trong việc sử dụng những hình ảnh này là duy trì chất lượng hợp lý và trọng lượng càng thấp càng tốt. Trong các trang web thương mại lớn dựa vào hình thu nhỏ để hiển thị các trang danh mục và bản xem trước sản phẩm, điều này đặc biệt quan trọng. Bạn có biết rằng mỗi giây chậm trễ trong việc tải trang web khiến Amazon mất 1,6 tỷ đô la mỗi năm? Phần lớn thời gian tải trên các trang web như vậy là hình ảnh.

Đúng vậy, hầu hết chúng ta chỉ có thể mơ ước có một địa điểm tầm cỡ như thế này. Nhưng bạn biết đấy - những thay đổi lớn bắt đầu từ dưới lên và những thay đổi nhỏ. Chúng tôi giải quyết càng sớm càng tốt.

Mẹo sử dụng Hình thu nhỏ đúng cách

Rất nên tạo hình thu nhỏ cho hình thu nhỏ và hình ảnh lớn hơn cho chính trang sản phẩm. Không sử dụng hình ảnh lớn làm hình thu nhỏ! Điều này sẽ tải nhiều lần tải của trang web, đặc biệt là khi có nhiều hình thu nhỏ trên một trang. Trong các hệ thống CMS khác nhau, bạn tự động được miễn trừ vấn đề này.

Khi nói đến các quy tắc tối ưu hóa hình ảnh, bạn nên đầu tư nhiều hơn vào hình ảnh lớn hơn là hình thu nhỏ. Ví dụ: - không bao gồm các hình thu nhỏ trong Sơ đồ trang web Hình ảnh (phần mở rộng bên dưới), trong một số trường hợp, thậm chí không đặt thẻ ALT cho chúng. Tham vọng là Google sẽ lập chỉ mục những bức ảnh lớn với chi phí là hình thu nhỏ chứ không phải ngược lại.

Bạn nên đặt Tiêu đề hình ảnh thành Hình thu nhỏ, mô tả sản phẩm bằng một vài từ và nói chung những gì người lướt sẽ thấy sau khi nhấp vào hình ảnh.

Nếu mỗi trang danh mục sản phẩm có nhiều sản phẩm (giả sử trên 30 sản phẩm), bạn nên sử dụng tập lệnh Lazy Load chỉ tải hình ảnh khi người lướt cuộn đến khu vực có chúng.

7. Sử dụng gói văn bản

Thông thường, hình ảnh đến để phục vụ văn bản chứ không phải ngược lại. Nhưng liên quan đến việc tối ưu hóa hình ảnh và quảng bá hình ảnh của Google, và nếu trang web là một mạng dựa trên hình ảnh, thì rất đáng để không bỏ qua vấn đề văn bản, ngay cả khi đó là những thứ cơ bản.

Đối với những người muốn duy trì vẻ ngoài gọn gàng và tối giản nhất có thể (ví dụ: trên trang web danh mục đầu tư của nhiếp ảnh gia), ít nhất anh ta nên xác định những điều sau trên mỗi trang có hình ảnh:

H1 Theo chủ đề của hình ảnh
Một mô tả ngắn (thậm chí 10-20 từ vẫn tốt hơn là không có gì) trên hình ảnh, tốt nhất là với một hoặc hai từ khóa có liên quan
Tất nhiên, tiêu đề và mô tả có liên quan (trong trường hợp đó là một trang thực chứ không phải hình ảnh bật lên từ thư viện).
Thay thế và tiêu đề ảnh - Rất khuyến khích trong trường hợp này.

8. Sơ đồ trang web cho ảnh

Sơ đồ trang web Hình ảnh (image-sitemap.xml) giúp Google đọc và lập chỉ mục hình ảnh của chúng tôi trên trang web tốt hơn. Tương tự như một sơ đồ trang XML chuẩn, một sơ đồ trang web có hình ảnh có thể được gửi bằng cách sử dụng Search Console, trong khu vực của sơ đồ trang web.

Thêm Sơ đồ trang web trong Search Console

Sơ đồ trang gồm các hình ảnh đặc biệt hữu ích khi sử dụng tất cả các loại thư viện với các tập lệnh và các hiệu ứng khác nhau - điều mà Google gặp khó khăn khi quét thông thường.

Có một số thông số để sử dụng sơ đồ trang của hình ảnh.

Cách tạo sơ đồ trang web?

WordPress - Như thường lệ nếu bạn làm việc trên WordPress, cuộc sống của bạn thật dễ dàng. Plugin Sơ đồ trang web dành cho tất cả hình ảnh của Udinra đã đóng cửa cho bạn. Tất cả những gì bạn phải làm là cài đặt plugin, đánh dấu một số V trong cài đặt, tạo sơ đồ trang web và khởi chạy nó lên Google thông qua Search Console.

Trên bất kỳ nền tảng nào khác - nó phụ thuộc. Nếu không có giải pháp Out of box như plugin, v.v., bạn có thể thực hiện điều này bằng cách sử dụng Screaming Frog.

Chú ếch có thể giúp bạn tạo sơ đồ trang web bằng hình ảnh một cách dễ dàng. Vấn đề duy nhất - nó sẽ không cập nhật tự động (không giống như một plugin) và phải được làm mới theo thời gian.

Làm thế nào để bạn làm điều đó?

Phải thực hiện quét toàn bộ trang web được yêu cầu và sau đó trong menu trên cùng của phần mềm, chuyển đến Sơ đồ trang web -> Tạo Sơ đồ trang web Hình ảnh. Những gì bạn sẽ nhận được là một tệp XML kosher để sử dụng và khởi chạy thông qua Search Console.

9. Khuyến khích chia sẻ ảnh

Nếu bạn tự hào về việc sử dụng nhiều hình ảnh gốc (cho dù là hình ảnh vật lý hay yếu tố đồ họa) và hình ảnh là thứ chính hoặc ít nhất là một phần thiết yếu của trang web, thì việc khuyến khích người dùng chia sẻ hình ảnh trên mạng xã hội là rất đáng giá. mạng và giúp họ làm như vậy dễ dàng hơn.

Như thường lệ, tôi có các mẹo thiết thực cho nền tảng WordPress, trong các hệ thống khác, tôi khuyên bạn nên sử dụng một lập trình viên hoặc kiểm tra xem có plugin dành riêng cho nó hay không.

WordPress có 2 plugin tốt cho mục đích này:

Social Image Hover cho WordPress - Plugin trả phí (em; sơn móng tay - $ 17).
Pinterest Pin it Button - Một plugin thêm biểu tượng Pinterest nhỏ vào ảnh trên trang web.

10. Các công cụ giảm thiểu và tối ưu hóa hình ảnh

TinyPNG - một dịch vụ tuyệt vời cho phép bạn nén ảnh trực tuyến với giao diện kéo đặc biệt tiện lợi. Họ cũng có một API cho phép bạn làm việc với số lượng lớn hơn và tự động, và cũng là một plugin tuyệt vời cho WordPress cho phép bạn nén tất cả hình ảnh trên trang web - yêu cầu sử dụng API của họ (miễn phí 500 hình ảnh mỗi tháng).

Fotosizer - phần mềm máy tính đẹp cho phép bạn chỉnh sửa hình ảnh với số lượng lớn - không chỉ nén mà còn giảm kích thước, thêm hình mờ và các hiệu ứng khác nhau cho hình ảnh và nhiều tính năng hay khác.

Phần kết luận

Bạn vừa hiểu được tầm quan trọng của việc tối ưu hóa hình ảnh của một trang web. Tuy nhiên, nếu bạn muốn biết trạng thái hiện tại của trang web của mình, bạn có thể làm điều đó miễn phí, nhờ Semalt's Tư vấn SEO.

Semalt sẽ giúp bạn xác định các vấn đề SEO liên quan đến trang web của bạn. Ngoài ra, với Chuyên gia Semalt, bạn có thể dễ dàng cải thiện hiệu suất kinh doanh trực tuyến của bạn với chi phí thấp hơn.

send email