Display speed changes dramatically. Website speed optimization and performance tuning

#WEB#プログラミング#高速化#最適化

Last update : 2026.5.7

Posted : 2014.12.8

When creating a website, we’ll discuss “website speed optimization and performance tuning,” which can be very helpful. There are various ways to optimize display performance, but this time we’ll focus specifically on images.

Introduction

In recent years, page loading (display) speed has been added to Google’s search algorithms, and attention to website speed optimization continues to grow.
Optimizing images for speed isn’t just about making them appear faster and look better.
As seen with Google and Yahoo placing importance on display speed, it is also an essential task that helps increase traffic from search engines.

Choose the image format based on its characteristics

Four image file formats

The file formats are JPG, GIF, PNG-8, and PNG-24.

JPG
This format is commonly used for photographs. Although compressed images cannot be restored to their original quality, it offers a high compression rate and keeps file sizes small.
GIF
Suitable for illustrations that include large flat color areas along with sharp details, as well as text.
It is also required when exporting animated images.
PNG-8
Not very well known, but it is a format equivalent to GIF and is used for the same purposes (except animation).
PNG-8 has a higher compression rate than GIF, making files about 10% to 30% smaller.
However, for images made of simple patterns and a limited number of colors, GIF may sometimes be smaller.
PNG-24
Like JPG, this format is suitable for photographs.
It has a lower compression rate than JPG, resulting in larger file sizes.
Use PNG-24 when the image contains transparent areas.

Pay attention to file naming!

Use names that describe the meaning of the image

It is common to see photos named something simple like “image1.jpg.”
However, when uploading and using images on a website, these kinds of file names are not ideal.
Using descriptive file names not only makes it easier to organize your images.
Since search engines read files for optimization purposes, it is also important to use accurate names that are not excessively long.

Image optimization: lossless compression?

Image compression and its methods

Use a web service to compress images.
There are two methods of image compression: “lossless compression” and “lossy compression.”

Lossless compression
Also called lossless compression, this is a method where the original data and the decompressed data after compression are exactly the same.
Formats: PNG, GIF, TIFF, PSD, TGA
Lossy compression
This is a compression method in which the data after compression and decompression does not exactly match the original data.
Format: JPG

For compression, TinyPNG is recommended.
It can compress PNG and JPG files down to as little as 1/4 of their original size.
It is also convenient because it works on both Windows and Mac.

Another recommended tool is Compressor.io.
Both tools work simply by drag and drop.

Let’s check whether the site has been optimized successfully

You can easily measure page loading speed

Right-click the image file and select “Get Info” to check the file size. You should see that the file size has significantly decreased.
Often, websites load slowly because image files are too large.
The accumulation of small optimizations for each image leads to overall website speed improvement.
To verify whether your site has actually become faster and optimized, use tools provided by Google such as PageSpeed Insights or Pingdom.
Give it a try!

RECENT POSTS