Principle of using images on website

Uploading images to the web is quite simple.

However, that images can work properly, you need to be aware of principal images on websites. 


1. Principle image 1: Image quality 

Good image quality will increase user experience. 

First, images to use on website need to be consistent, sharp, have a reasonable layout, appropriate colors. 

Second, the messages that images need to convey using the visitor need to be: clear, easy to understand, related to the content.

Third, high-quality images will attract customers even if they don’t read the text. That’s great, especially for fashion and travel websites.

Note: That images with the highest resolution are not used in all cases. because high-quality images mean website loading time will increase. In some specific cases, you should use medium resolution images to reduce the file size and speed up the page load. 


2. Principle image 2: Suitable image format 

There are many image formats you can use for your website: JPG, JPEG, PNG, GIF,..


With different formats, images displayed on websites will be different. 

  • JPG: reduce image size, and image quality decreases. 

Có rất nhiều định dạng hình ảnh bạn có thể sử dụng cho website: JPG, JPEG, PNG, GIF,..

Với mỗi định dạng khác nhau hình ảnh hiển thị trên website sẽ khác nhau.

  • JPG: Reduce image size, at the same time image quality decreases. Recommended for information-sharing blog posts, news articles.
  • PNG: Clearer images, larger image size JPG. Suitable for product images, services, user manual articles.
  • GIF: animation, used for logo images and decorative images or for product showcase posts. 


3. Principle for using image size


Image size is one of the requirements of search engines when evaluating a website. So, before uploading the image, you need to edit the correct image size. 

You can refer to some of the following sizes:

  • Image size in homepage slider: 1360 x 540 pixel 
  • Image size in news articles: 500 - 700 pixel
  • Project, product or service image size: 800 - 1000 pixel

General, there are many factors that influence image size determinations: type of article, layout, display, device,... But, shouldn’t use an image size that deviates too much from the standard frame. Because the image is too small to ensure the visibility of information content to customers, large images occupy large hosting capacity, slowing down the website.


Some of the popular image resizing tools are: 

  • Adobe Photoshop: market-leading software for photo design and editing. This is a tool used by professional designers.
  • Pain (on Window): Standard image resizing for amateurs. 
  • Pixlr: Cloud-based image editing suite and add-ons. Includes: photo editor, screen recording browser widget, and photo sharing service.

4. Principle image 4: Save the standard filename

Surely you are no stranger to the term SEO website, right. Proper naming before being posted on the website will aid in the SEO process. Make sure that image name is selected appropriately.

Requirements when naming image files:

  • Related to image content
  • Write in lowercase
  • Match words with underscores
  • The filename is not too long

For example: website-image


5. Principle image 5: Alt Image

The image title is the description line placed just below the image.

Search engines will rely on the title to identify your image, thereby understanding the content you want to convey to customers.

It affects the SEO ranking of the website. The most effective description snippet should show the visual content and contain keywords.


6. Principle image 6: Prioritize images related to people

Many studies show that using images of people on the website will increase the conversion rate for the website.

However, you should note that it is not advisable to use images of famous artists or influencers. This will get you in trouble with image copyright.


7. Principle image 7: Exclusive image

Using exclusive images, actually captured images or new designs will help your website SEO better.

If the website introduces the company, you can take photos of employees, facilities to make an image gallery for the website. If the website sells products or services, set up a space to display pictures of beautiful products to attract customers to buy.


8. Principle image 8: Insert the website logo on the image

This keeps your exclusive image from being copied over the internet.

Furthermore, using a logo is extremely helpful if your image is at the top of customer searches.

They can see your brand even without clicking on the image. This is a free form of marketing that increases customer awareness for your website.


Meeting the principles of using images on the website will create a foundation to help you build and develop an effective website.

If you need further advice on problems on the website, please contact our technician team at Magepow contact or leave a comment below.

See you in the following article.