When considering SEO in creating web pages, it’s essential to create high-quality content. While providing valuable information is crucial in pursuing high-quality page creation, it’s also important to ensure that the page is easy to read for site visitors.

That’s where the importance of image data comes in. Inserting images between the text on a page not only enhances understanding of the content being explained but also provides readers with a break. When aiming for high-quality content, consider optimizing your images.

In this article, we’ll explain the importance of image optimization, especially for super SEO beginners. If you’re completely new to SEO, please read ‘What is SEO?’ first before reading this page.

What is Image Optimization? 

Image optimization involves editing image data elements such as file size and format to make them suitable for use on web pages. When editing images, specific points are reviewed, such as;

-File size 

-Image dimensions 

-Resolution 

-Image format

File Size 

File size refers to the amount of information contained in a file, indicating the capacity of the file. The units of capacity are represented in binary, including;

Bytes (B) 

Kilobytes (KB) 

Megabytes (MB) 

Gigabytes (GB)

For image data commonly used on web pages, they usually have capacities measured in kilobytes. However, more complex image data generated using tools like Illustrator or Photoshop may have capacities exceeding gigabytes. When posting such large file-size image data on web pages, it’s necessary to optimize them by reducing their size.

Image Size 

Image size refers to the dimensions of the image itself, indicating the total number of pixels. Essentially, image data is formed by color information called pixels, which represent the smallest unit of the image. Specifically, the size is calculated as follows:

-Image Size = Number of Pixels Horizontally × Number of Pixels Vertically

Pixels are measured in units such as

-px (pixels)

Resolution

Resolution refers to the density of pixels or the size of pixels. It determines which size of pixels is arranged within the framework of the image data. In essence, the appearance of image data is as follows

-Higher resolution makes the image appear sharper with more pixels

-Lower resolution makes the image appear rougher with fewer pixels

Resolution is measured in units such as;

-dpi (dots per inch): Number of pixels per inch

Image format

Image format refers to the recording method used when saving file data. Since the data saved to the file varies depending on the image format, there are differences in file sizes. When posting images on a website, it’s generally desired to keep the file size small. Therefore, the following formats are commonly used.

-JPG (JPEG) 

-PNG 

-GIF 

-BMP 

-WebP

The Importance of Image Optimization

Typically, as the information within a web page increases, the loading speed of the page decreases. When site visitors open a web page, if the time it takes for the page to display increases, it leads to a decrease in usability. Consequently, visitors who feel stressed by page usage may backtrack.

Therefore, it’s necessary to reduce the data volume within an inflated web page. Since image data constitutes a significant portion of the content on a web page in terms of volume, it’s important to minimize the file size to reduce the load on the page.

Hence, when posting image data on a web page, it’s common practice to compress images or convert formats to adjust file sizes. Reducing the file size reduces the burden on the web page and server. By minimizing image file sizes, the loading time for site visitors to open the web page is shortened. A shorter loading time enhances the browsing experience for site visitors. Shorter loading times not only directly impact SEO but also lead to increased site navigation and dwell time by site visitors.

Benefits of Posting Images on Web Pages

Posting image data on web pages offers several advantages as below.

-Enhanced understanding of text

-Increased dwell time on the page 

-Easier indexing in Google image search

Enhanced Understanding of Text

Especially on information-heavy pages, text tends to dominate. Therefore, by posting image content that complements the text, site visitors can deepen their understanding of the text content.

Increased Dwell Time on the Page

It’s generally believed that posting image data on web pages leads to increased dwell time. This is because when site visitors skim through text, seeing image data momentarily halts their scrolling. By optimizing the page environment in this way, the quality of content improves, making it easier to achieve SEO effectiveness.

Improved Indexing in Google Image Search

Google search engine includes a feature for image searching. In image search, image data is indexed. Therefore, by featuring image data on a web page and indexing it, it’s possible to anticipate an influx of page traffic from users searching for information through image searches.

The Mechanism of Google Image Search: From Utilization to Search Methods Explained

Methods for Posting Images on Web Pages

The method for posting images on web pages is as follows.

-Prepare the materials

-Optimize the images

-Determine the image file names

-Upload to the server

-Specify the image URL in the HTML file

1. Prepare the Materials 

First, gather the data that will serve as the source material for the image data. Common methods for obtaining materials include the following.

• Generate with image editing software
• Capture photos through photography or screenshots

2. Optimize the Images 

Next, proceed to optimize the obtained image data. First, confirm whether the image data is in the appropriate file format. Particularly, main visuals or banner images generated with image editing software may have large file sizes, so please pay attention to this.

Once you’ve converted the images to the appropriate file format, use compression software or services to reduce the file size.

3. Determine the Image File Name 

Once you’ve created the image, decide on its file name. This file name will be displayed as the URL of the image file when it’s published on the web. Therefore, input alphanumeric words that are highly relevant to the image.

4. Upload to the Server

Next, upload the prepared image to the server. There are various methods for uploading, but taking WordPress CMS as an example, you can simply drag and drop the image onto the upload screen from your computer.

At this point, the URL for the image data will be generated, so make sure to copy and save it.

5. Embed the Image URL in the HTML File 

Finally, paste the image URL into the web page. Specifically, write the tags in the HTML file to display the image. Use tags like the following to publish the image data.

<img src=” ※ Image URL” alt=” ※ Description of the image data” />

In the “src” part above, insert the URL of the image data, and in the “alt” part, enter a description of the image data.

The Relationship Between Google Search Engine and Image Data 

Google values ​​not only text but also image data in its search results algorithm. Therefore, there is a close relationship between the Google search engine and image data. Google offers services utilizing image data such as

• Google Image Search Engine
• Google Lens
• WebP”

Google Image Search Engine

The Google Image Search Engine is a service that picks out relevant images from indexed image data when keywords are searched, displaying them in search results. The use of the Google Image Search Engine varies for each person, but it’s mainly used for purposes such as;

• Searching for specific image data
• Checking explanatory content through visual diagrams

Using the Google Image Search Engine is simple. Just access Google Image Search , and you can search for image data using keywords.

Google Lens 

Google Lens is a feature of a search engine that uses image data to search for other indexed images. The difference between an image search engine and Google Lens is that the former requires text (keywords) input for searching, while the latter uses images.

Google Lens allows searching for similar images based on image data. Since Google Lens can analyze the content within the image data, it can also;

• Translate text contained within the image used for searching
• Search for maps of buildings contained within the image used for searching

Furthermore, Google introduced a feature called Multi-Search to Google Lens worldwide in February 2023. Now, it’s possible to search using “image + text.”

WebP 

WebP is a new image format developed by Google. It incorporates the strengths of JPEG, PNG, and GIF formats, and it has the following features

• Lossless compression
• Transparency support
• Animation

Moreover, it offers higher compression rates and smaller file sizes. As a result, compared to existing image formats, it has the advantage of higher functionality and faster web page loading.

However, initially, WebP had limited browser support due to being a new image format. Despite the advantages of WebP as an image format, if it couldn’t display images, it would affect the user experience for site visitors. Due to this background, it has been difficult to spread. However, as of 2023, given that the following major browsers support it, it is considered that this image format will become mainstream in the future.

-Microsoft Edge 

-Firefox 

-Safari

-Google Chrome

What is the Next-Generation Image Format WebP? Explaining How to Create and Use WebP

Points to Index Image Search Results 

To index image data in image search results, it’s essential to focus on the following points.

-Create excellent image data 

-Ensure relevance to the webpage theme 

-Include alt tags 

-Use image site maps

Create Excellent Image Data 

A fundamental principle of the Google search engine is to index valuable information for users. Therefore, to index in image search engines, high-quality images are necessary, just like for web pages.

Ensure Relevance to the Webpage 

Theme Images that are irrelevant to the content of the webpage may be judged as having low content value by Google. Therefore, always consider the intention or purpose of placing images before including them.

Include alt Tags 

To index image data, it’s crucial to help search engines understand ‘what the image is about.’ This is where the HTML ‘alt’ (alternative) attribute comes into play. Initially, to display an image, you need to insert the image URL into the HTML file.

<img src=” ※ Image URL” />

While this allows images to be displayed on web pages, adding the alt attribute within the img tag provides a textual description of the image data to search engines.

<img src=” ※ Image URL” alt=” ※ Description of the image data” />

However, be cautious not to write lengthy descriptions or cram keywords into the alt attribute, as it may be deemed spammy by search engines.

What is the Alt Attribute? Writing Methods to Maximize SEO Effectiveness

Using Image Sitemaps 

Similar to a website’s sitemap, preparing an image sitemap allows search engines to recognize the presence of image data. Particularly for e-commerce sites, displaying images of each product in search results directly impacts conversions, making this a crucial strategy. When creating an image sitemap, refer to the example code below.

<?xml version=”1.0 “ encoding=”UTF-8 “ ?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9 ″

xmlns:image=” http://www.google.com/schemas/sitemap-image/1.1 ″ >

<url>

<loc> http://example.com/sample.html </loc>

image:image

image:loc http://example.com/image.jpg </image:loc>

</image:image>

image:image

image:loc http://example.com/photo.jpg </image:loc>

</image:image>

</url> </urlset>

Reference: Image Sitemaps | Google Search Central

Frequently Asked Questions about Image Optimization

Here we have compiled some frequently asked questions about Image Optimization.

Q: Why is image optimization necessary? 

A: It’s necessary to improve page loading speed when displaying web pages.

Image data accounts for a significant portion of the content within web pages, affecting the overall page loading speed. By reducing the file size of image data, overall page loading speed can be improved.

Q: What is the difference between image size and file size? 

A: The term ‘size’ refers to different aspects.

Image size refers to the total number of pixels contained within an image, indicating the length and width of the image file. On the other hand, file size refers to the overall capacity of the image file itself.

Q: How can file size be reduced? 

A: By changing the format of the image file or using compression tools to reduce its capacity.

There are various types of formats for generating image files, some of which tend to increase the size of image files, while others can reduce the size of image data. Additionally, there are tools and services available for compressing image files, which can be utilized to reduce the file size of images.

Summary 

By optimizing images, you can ensure that appropriate image files are used for web page display. First, consider what type of image data would be useful within your web page. Then, use methods such as format conversion and compression to reduce the file size of images and incorporate them into your page. By considering usability and preparing images accordingly, you can thereby improve page quality and enhance page loading speed, maximizing SEO Effectiveness.

Author Profile

Mr. Takeshi Amano, CEO of Admano Co., Ltd.

Mr. Takeshi Amano is a graduate of the Faculty of Law at Nihon University. With 12 years of experience working in the advertising agency industry, he discovered SEO and began his research during the early days of SEO. He self-taught and conducted experiments and verifications on over 100 websites. Using this expertise, he founded Admano Co., Ltd., which is currently in its 11th year of operation. Mr. Amano handles sales, SEO consulting, web analytics (holding the Google Analytics Individual Qualification certification ), coding, and website development. The company has successfully managed SEO strategies for over 2000 websites to date.

Return to the top of Japan SEO