How to lighten the photos on your inn site | Safely advance WordPress image optimization with AI

Illustration where the host and AI safely save original photos and optimize duplicated images for computers and smartphones AI site management

On the accommodation site, photos of the guest room, food, hot springs, and resident cat convey the charm. On the other hand, if you upload many large photos taken with a smartphone, it will take a long time for the page to open, and there is a possibility that users will leave the page before they can proceed to the reservation button.

However, overwriting the original photo or converting all media at once with an image optimization plugin may affect image quality, layout, SNS sharing, and past articles.

In this article, the host, even if not familiar with IT explains how to protect the original photo, try it with one copy, then expand it while asking Codex or Claude Code for help with research.

Conclusion: Separate the original photo and the one for web publication

Here are some basic safe steps:

  1. Save the original photo and usage permission in a safe place
  2. Find out which pages and which images are heavy
  3. Make a working copy
  4. Reduce the size to fit the display dimensions
  5. Choose the format and quality that match the photo content
  6. Register as a separate image in WordPress and compare
  7. Check PC, smartphone, and SNS sharing
  8. Record the effect and how to reverse it before increasing the number of targets

The original photo may be needed for future printed materials, reservation sites, reporting, and other designs. Do not overwrite with lighter images for web posting.

“Making the appearance smaller” and “making the file lighter” are different.

Even if you reduce the width of the image on the WordPress editing screen, the browser may load the large original file and then reduce it.

There are three things I would like to confirm:

  • How many pixels are displayed on the screen?
  • Dimensions of the image actually delivered
  • Actual file size loaded

For example, a photo displayed in an article with a width of about 800 pixels does not always require an image of several thousand pixels taken with a smartphone. However, the required dimensions vary depending on the theme, Retina display, enlarged display, and gallery function, so we do not convert all images using a uniform number.

Find heavy images first

Before processing all media at once, check the pages that have the greatest impact on users.

Priority pages:

  • Top page
  • guest room/price page
  • Cooking/hot spring page
  • resident cat introduction page
  • Page with reservation button
  • Articles often seen through search and SNS

Let AI, browser developer features, and PageSpeed Insights organize the image URL, dimensions, capacity, and display position. You may not be able to tell which size is actually being distributed just by looking at the media list on the management screen.

Select image format by content

JPEG

Suitable for photos with many color changes, such as guest rooms, food, landscapes, and resident cats. You can reduce the capacity while adjusting the image quality little by little. Does not support transparency.

PNG

Suitable for diagrams that require transparency, images with clear lines and text, etc. Saving general photos as PNG tends to take up a lot of space, so check if it’s necessary.

WebP

It is widely available in modern browsers and can be used with both photos and transparent images. Official WordPress optimization documentation also recommends WebP as a candidate for a smaller, modern format.

AVIF

Although this format can be expected to have high compression efficiency, it is necessary to check whether it can be created and distributed correctly with WordPress, the server, the image processing function, and the theme/plugin you are using. We do not perform bulk migration just by name.

Changing the format does not necessarily mean that the appearance will be the same. Compare the resident cat’s coat, the color of the food, the dark guest room, the detailed patterns, etc. on the actual screen.

Compare image quality by display, not numbers.

The compression ratio and quality value may have different meanings depending on the conversion software. Rather than fixing on “quality 80 is safe,” create multiple candidates using the same photo.

Where to compare:

  • Bright sky and wall gradation
  • Details such as cat hair and tatami mats
  • Red, green, and white for cooking
  • Shadow in the dark guest room
  • Difference in brightness of windows and lighting
  • Outline when logo or text is included

Check on both a large PC screen and a smartphone, and do not select candidates that have a small capacity reduction effect but degrade image quality.

WordPress creates multiple image sizes

WordPress generates multiple image sizes depending on your theme and settings when you upload. In articles, srcset and sizes may be used, allowing the browser to choose the option that fits the screen width.

This eliminates the need to send unnecessarily large photos to your smartphone. However, in the following cases, it may not be used correctly.

  • Themes and unique parts always specify the original image
  • Pasting image URL directly to HTML
  • Using a huge image as a CSS background image
  • Displaying images from external storage with a fixed URL
  • Attributes are missing in old articles or migrated data

Instead of directly rewriting the theme file, first read and check the actual HTML and network communication.

alts, captions, and credits have separate roles

alt

For those who cannot see the images, I will briefly explain what the images convey. This is not a field for stuffing keywords. An empty alt may be appropriate for images that are solely decorative and are well explained by the surrounding text.

Example:

Resident cat, a calico cat, sits by the window of the guest room
Local vegetable dishes served as dinner
Steps from the entrance to the reception desk

Don’t guess the cat’s name or guest room name, just write what you can confirm.

Caption

Information shown to readers on the screen, such as supplementary information about the photo, when it was taken, whether it is an illustrative image, and the provider.

Credits and Usage Records

We manage who takes pictures, who provides them, and how much they can use them. Even if you make the image lighter, the copyright and portrait rights conditions will not change. We will not reprint photos from reservation sites or SNS without permission.

Check location and personal information

Photo files may contain metadata such as the date and time they were taken and location information. Before publishing, we make sure that guests, staff, car license plates, documents, keys, management screens, and non-public areas are not included in the photos.

Even photos of resident cats cannot be published if there are reservations or guests in the background. When asking AI to check images, only use copies that can be made public, and avoid accidentally sending private photos or personal information to external services.

Safety steps to try with just one piece

1. Decide on the target image

Select the top or main page that has a large capacity and is affecting the display.

2. Check where it is used

Check where the same image is used, such as article text, eyecatches, OGP, gallery, background, reservation page, etc.

3. Save the original image and data

Records the original file, file name, dimensions, capacity, alt, caption, credits, and pages used.

4. Convert the duplicate

Reduce and compress the working copy without overwriting the original image. Check orientation, color, transparency, and presence of animation.

5. Register as a separate image

Do not directly replace the existing file first, but compare it in a verification environment or a duplicate of the target page.

6. Check the display and functions

  • PC and smartphone image quality
  • Aspect ratio and cropping
  • Image link and enlargement
  • Eye catch and article list
  • Image when sharing on SNS
  • alt, caption, credits
  • Page capacity and display speed

7. Leave instructions on how to return

We will confirm that you can restore the original image if there is a problem, and record the storage location of the original file even after adoption.

Check before using bulk optimization plugin

Image optimization plugins and CDNs have useful functions, but do not apply them to all images without checking the following.

  • Do you want to keep the original file?
  • Can it be restored after conversion?
  • Are existing images also eligible?
  • Will the file URL or extension change?
  • Is there an alternative image when WebP/AVIF is not supported?
  • Do you want to send the image to an external service?
  • Free tier, fees, capacity, behavior after cancellation
  • Overlap with WordPress, themes, caches, and CDNs
  • Is it included in the backup target?
  • Whether the generated image remains or disappears when deleted

Even if it says “back up before converting in bulk”, it may not be sufficient unless you have tried the restore method. Start with a testing environment and a few images.

Things that can be left to AI

  • List image URL, dimensions, and capacity of main pages
  • Prioritizing heavy images
  • Comparison of formats and compression candidates
  • Capacity, dimensions, and image quality confirmation table before and after conversion
  • Alt candidate draft
  • Investigation of usage pages and internal references
  • PC/smartphone display comparison
  • Documentation of work records and return methods

Don’t leave it to AI:

  • Batch overwrite/delete original images
  • Unauthorized conversion of all media
  • Publishing photos with unknown usage permissions
  • External transmission of photos including person/guest information
  • Generating a large number of alts and confirming them without looking at the content
  • Media replacement for backup unconfirmed

Request text to AI that can be used with copy and paste

Investigate heavy photos

Please investigate the images that affect the display speed on your inn's WordPress site.
Please do not convert, replace, delete images, or install plugins yet.

About the top, guest room, food, resident cat, and reservation information page,
List the image URL, actual size, display dimensions, capacity, format, and location of use.
Please organize the improvement candidates in order of impact.

Please do not output private images, personal information, or authentication information.

Create only one conversion plan

Do not overwrite the single approved original image, but instead create a conversion plan using a working copy.
Please check the official documentation for dimensions that suit your display purpose and compatibility with JPEG, WebP, and AVIF.

Indicates the dimensions, capacity, reduction rate, image quality check points, and expected usage location of each candidate,
Please do not update to WordPress yet.

Inspect after reflection

After replacing one image. Please check the settings without changing them.

PC/smartphone image quality, aspect ratio, cropping, image links,
Eye catch, article list, SNS sharing, alt, caption, credits,
Please check the page capacity and display speed.
Please let us know if it is possible to restore the original image in case of a problem.

Checklist for the host

  • [ ] Separate the original photo and the one for web publication
  • [ ] I have confirmed the rights and terms of use of the photo.
  • [ ] Confirmed people, documents, location information, etc.
  • [ ] Examined heavy images on main pages
  • [ ] Distinguished between the apparent dimensions and the actual file.
  • [ ] Select the format that matches the photo content
  • [ ] I tried with one image without overwriting the original image.
  • [ ] Confirmed image quality on PC and smartphone
  • [ ] Confirmed eyecatches, lists, and SNS sharing.
  • [ ] Checked alts, captions, and credits.
  • [ ] Confirmed the impact on reservations and inquiries.
  • [ ] Recorded how to undo
  • [ ] Confirmed the verification environment and restoration method before batch conversion

For information on why the entire site is slow, please refer to How to check if your inn’s WordPress is slow or slow, and to check image rights before publishing, please refer to Checklist before publishing articles created with AI.

Information used for reference

Summary

Photos for the inn site must not only be lightweight, but also have a quality that accurately conveys the charm of the guest room, food, and resident cat. Protect your original photos and duplicate one heavy page to compare dimensions, format, quality, and file size.

AI can help with image list, conversion candidates, alt drafts, and comparison before and after changes, but it cannot delete original images, convert all images at once, or determine rights. Please check not only the speed, but also PCs, smartphones, SNS, and reservation channels before expanding your target range.

Title and URL copied