Logo phải thiết kế như thế nào để tăng tốc độ load website, bạn không nghe nhầm đâu cách vẽ nó ảnh hưởng rất nhiều đến để dung lượng của file của logo, và sử dụng định dạng nào hay đặt ở đâu thì tốt.
Mình sẽ hướng dẫn cách bạn tối ưu logo cho website của bạn.
logo là thứ khặng định bản thân doanh nghiệp với khách hàng, đôi khi theo bản năng khởi nghiệp của mọi công ty thì họ đặt tên và nghĩ ngay ra kiểu logo.
Sản phẩm tốt gắn ý nghĩa cho logo rồi logo gắn ý nghĩa cho sản phẩm.
Mục lục
Vẽ logo như thế nào thì chuẩn nhất giúp nhẹ logo
Nguyên tắc quan trọng nhất vẽ logo để được nhẹ chính là sử dụng càng ít màu thì tốt thông thường là dưới 4 màu.
đây là ảnh ví dụ những thương hiệu nổi tiếng và logo của họ nhìn rất đơn giản và tinh tế:
Bạn có thể dễ dàng tối ưu cho favicon và sử dụng định dạng png-8 và giảm được rất nhiều dùng lượng ảnh. kể cả khi bạn dùng jpg hay png-24.
Đặt logo ở đâu tốt nhất
đó chính là đặt ở đầu màn hình bên tay trái, nó là một tiêu chuẩn chuẩn của tất cả website, mọi khách hàng đã quen với kiểu như thế rồi, bạn không cần phải đột phá đặt đi đâu đó, đừng dạy người dùng cách sử dụng website của bạn hãy làm theo một tiêu chuẩn người dùng đã rất quen thuộc
Thói quen là một thứ dễ dàng của khách hàng
Hãy tăng tương phản cho logo
bạn muốn nổi bật một cái gì đó trong thiết kế nói chung và trong thiết kế website nói riêng thì kiến thức về sự tương phản.
mình có vài viết hướng dẫn về khái niệm và cách sử dụng tương phản trong thiết kế bạn có thể tham khảo.
Các định dạng file logo tốt nhất
Có rất nhiều định dạng file logo phổ biển được thường dùng trong thiết kế website.
- PNG-8: đây là định dạng ảnh trong suốt ưu điểm là nhẹ hỗ trợ tối đa 256 màu phù hợp cho logo
- PNG-24: định đạng trong suốt chất lượng xuất sắc nhưng hơi nặng
- JPG: định dạng nén hỗ trợ nhiều màu không đẹp bằng PNG nhưng hỗ trợ nhiều màu dung lượng nhẹ hơn png-24
- SVG: định dạng VECTOR định dạng này rất tuyệt vời, zoom to phóng nhỏ thoải mái không bị vỡ
- HTML: định dạng này thì ít người biết nhưng nó là một kỹ thuật hay để hiện thị sớm một số cao thủ tối ưu website hay dùng base64 nhược điểm của nó là tăng 30% dung lượng ảnh nhưng được cái hiển thị màn hình đầu sớm rất tốt vì hiện thị ngay yêu cầu máy chủ html đầu tiên
- font-icon: đây là định dạng yêu thích nhất của wp tăng tốc, đang sử dụng tại wp tăng tốc nó giảm được dung lượng rất lớn khi chuyển đổi từ svg, mình sẽ sớm viết một và làm video hướng dẫn về thủ thuật này nó giảm được đến 97% dung lượng load thì ngon lắm
còn một số định dạng pdf… thì mình thấy nó không có ưu điểm lớn trong làm logo thì mình sẽ không để cập ở bài viết này.
Định dạng dùng để làm logo website tốt nhất thì nên sử dụng png-8.
Định dạng nào là tốt nhất cho tôi
1: nếu bạn yêu cầu hiện thị màn hình sớm thì hãy chọn định dạng html.
<img src="data:image/png;base64,...[content]..."/>
website chuyển đổi https://www.base64-image.de/ bạn có thể vào trang này để chuyển đổi logo của bạn sang html.
2: phù hợp với đa số người dùng là PNG-8
PNG là định dang sử dụng nhiều nhất trong hiện thị logo, dễ dàng sử dụng tốc độ tốt hỗ trợ trong suốt, nên dễ tùy biến cho hình nền.
<img src="https://tenmiencuaban.com/logo.png"/>
cách theme họ hỗ trợ sẵn bạn chỉ cần vào up ảnh png lên là xong.
Vì dễ dàng cài đặt sử dụng, mọi sứ đang số là tốt.
3: SVG
SVG (Scalable Vector Graphics) là một định dạng hình ảnh khác được biểu diễn dưới dạng mã ở định dạng dựa trên XML. Nó lý tưởng cho hình ảnh vector. Thông thường logo, biểu tượng là hình ảnh vector.
SVG chứa các mã để vẽ các hình dạng như đường dẫn, đường viền, đường cong, v.v. Do đó, kích thước của SVG thường thấp hơn nhiều so với JPG / PNG / GIF.
<img src="https://tenmiencuaban.com/logo.svg"/>
chất lượng của SVG là đồ họa vector nên thiết kế phải sử dụng phần mềm chuyên nghiệp không dễ thiết kế như hình ảnh pixel phải sử dụng adobe illustrator là nổi tiếng trong làng thiết kế Vector.
4: đây là phương pháp yêu thích của mình font-icon.
là cách hiện kết hợp giữa font và css.
Cách là một cách khó cài đặt nhất trong tất cả các cách trên nhưng nó rất tuyệt vời.
site-title a::before{content:"123";font-family:wpgiatuan;font-size:50px;}Tốc độ có nó giảm được 97% dung lượng file khi kéo về từ svg chất lượng cực kì tốt, nếu kết hợp preload là sự hoàn hảo, đây là kĩ thuật hiện tại trên thế giới không mấy ai làm được và mình tự tin là một trong ít người trên thế giới có thể làm được kĩ thuật này.
Tối ưu logo favicon
Hãy sử dụng logo favicon nó là một điều bắt buộc, vì WordPress nó khai báo mặc định sẵn là website phải có logo favico.
nếu bạn không có nó sẽ báo lỗi liên tục 404 về máy chủ của bạn thời gian load logo favicon còn nhẹ hơn là tài nguyên đi tìm logo favicon báo lỗi 404.
Kích thước yêu thích của tôi favicon là 32px x 32px tiêu chuẩn đẹp tại sao không phải là to hơn để lưu ra trong điện thoại cho đẹp.
Khi bạn đã vẽ được một cái logo tối ưu về số lượng màu thì công việc này tối ưu favicon thì hết sức đơn giản với bạn, bạn có thể tham khảo bài viết: Hướng dẫn tối ưu favicon WordPress
Có một sự thật rằng website không phải là ứng dụng được tải trên appstore hay ch play mà cần favicon to và sắc nén chỉ cần hiện thị đủ, chả mấy ai cài đặt website của bạn về máy hình điện thoại với kích thước 180px x 180px chắc người kéo chắc chỉ có bạn.
Sử dụng favicon là điểm nhấn nâng tầm thương hiệu của bạn.
Bí quyết thành công trong thiết kế logo
Đơn giản là sự tinh tế tối thường
không cần ý nghĩa mà doanh nghiệp sẽ gắn ý nghĩa câu chuyên lên cái logo đấy. đó là sự ý nghĩa bạn đừng bắt nhà thiết kế của bạn phải vẽ thế này nó mới có ý nghĩa, logo đẹp mới thành công được.
Không theo mình ý nghĩa là do mình gán cho nó, sản phẩm tốt mới tạo ra thương hiệu logo tuyệt vời, logo không tạo lên một sản phẩm.
Để lại một bình luận