Weight of site is "Weight of image"

Display speed of Web site is super important item directly connected to both user experience (UX) and SEO. According to Google survey, if it takes more than 3 seconds to display, 53% of mobile users leave.

Then, why does site become heavy? According to data of HTTP Archive, images account for about 50-60% of capacity of entire Web page. In other words, optimizing images appropriately can speed up overwhelmingly efficiently rather than desperately cutting JavaScript and CSS.

This time, we explain comprehensively "Modern image optimization techniques" to reduce file size to limit while maintaining image quality.

Image CompressorCompress bulk images without losing visible quality.

1. How to Choose Format (Graduate from "Just JPEG")

Optimal file format differs depending on content of image.

Format	Features	Optimal Use
JPEG (JPG)	Strong for photos. High compression rate, but transparency not possible.	Photo, background with many gradients
PNG	Supports transparency. Good at logos and figures, but photos become heavy.	Logo, icon, screenshot
WebP	Developed by Google. About 30% lighter than JPEG, transparency and animation OK.	Basically this (Recommended)
AVIF	Latest standard. Higher compression than WebP, but be careful with compatible browsers.	When aiming for ultimate weight reduction
SVG	Vector data. Does not blur no matter how much you enlarge.	Icon, simple logo

Conclusion: For both photos and illustrations, basically convert to WebP and use it. Supported by all major browsers (Chrome, Safari, Edge, Firefox).

2. Resize to Appropriate Size

Mistake No.1 that tends to be done is "Upload photos taken with digital camera or smartphone as they are". Recent smartphone photos have 4000px or more, but display area on Web site is at most 400px on smartphone and about 1000px on PC.

Width 1000px is enough: For blog eye-catch and product images, width 800-1200px is high enough quality.
Prepare 2x size: For Retina display (high resolution screen), it is standard to prepare image of "2x" of display size.
- Display: 300px × 200px
- Image: 600px × 400px

3. Responsive Image Delivery (srcset)

Making smartphone users load huge images for PC is waste of packets. If you use srcset attribute of HTML, browser automatically downloads optimal image according to screen size.

<img  src="image-800.jpg"  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"  sizes="(max-width: 600px) 100vw, 800px"  alt="Example of responsive image">

With this, 400w (width 400px) image is selected for smartphone, and 800w image for PC.

4. Lazy Loading

There is no need to load footer images not yet seen at the moment of opening page. Just by adding loading="lazy", you can make image loading wait "until it approaches screen".

<img src="heavy-image.png" loading="lazy" width="800" height="600" alt="...">

Note: Do not attach to images in first view (range seen first when opening page). Conversely, display will be delayed.

5. Prevent CLS (Layout Shift)

Phenomenon that layout shifts "clunkily" after image loading (CLS) becomes minus evaluation of SEO. To prevent this, be sure to specify width and height attributes to secure location (aspect ratio) of image.

<!-- Good example --><img src="photo.jpg" width="800" height="600" alt="...">

Even when making responsive with CSS, recent browsers calculate aspect ratio from attribute values of HTML, so this description is essential.

3 Recommended Optimization Tools

Even without Photoshop, professional compression is possible with free tools.

1. Jenee Image Compression Tool

Jenee Image Compression Tool You can easily compress and resize on browser. With emphasis on privacy, process without uploading to server.

2. Squoosh (Google)

For those who want to stick to each one. Functions such as conversion to WebP and AVIF, comparison slider before and after compression are substantial.

3. TinyPNG

Standard panda site. It reduces capacity of PNG and JPEG firmly "without changing appearance". API is also convenient.

Summary: Image Diet is Extremely Effective

It takes skill to reduce server response speed by 0.1 second, but halving image file size is instant just by passing through tool.

Use WebP
Resize to Appropriate Size
Add loading="lazy"
Specify Width and Height

Just by this, your site becomes dramatically lighter, and becomes site liked by both users and search engines. First of all, why not start by checking heavy images on top page?

Image CompressorCompress bulk images without losing visible quality.