How to Optimize Images for Your School Website

A great campus photo should make your school look inviting—not make families wait for a page to load. Use this workflow to prepare sharp, fast, accessible images before you upload them to HubSpot or another content management system (CMS).

The 5-minute workflow

1. Confirm the placement. Is this a card, an in-page photo, or a full-width banner? Ask your web partner for the intended aspect ratio if the crop is not obvious.
2. Start with Pepperland's free Website Photo Prep tool. Choose one photo or use the bulk option, then select “Everyday page photo” or “Full-width banner or hero.” The tool keeps photos on your device.
3. Download the prepared copy. The tool resizes only when needed, reduces file size when it can, preserves transparency, and never stretches a smaller image.
4. Rename the file. Use a short, descriptive name such as students-robotics-lab.jpg, not IMG_4827.jpg. Keep the existing extension unless you actually convert the file with an image tool.
5. Upload, add alt text, and preview. Check the page on desktop and mobile before publishing.

Important: Never enlarge an image just to reach a suggested dimension. Enlarging adds pixels, not detail, and usually makes the result softer. Use the original size or choose a different photo.

Choose dimensions for the placement

There is no single pixel width or file-size limit that works for every image. A logo, a card photo, and a full-width campus hero have different jobs. Use these as starting points, then follow your site's template requirements.

• Cards, thumbnails, and small promos: Start around 800–1200 pixels wide. A 4:3 or square crop is common. Many well-optimized photos land around 80–200 KB.
• In-page photos and stories: Start around 1200–1600 pixels wide. Match the content column and intended crop. Many land around 150–350 KB.
• Full-width banners and heroes: Start around 2000–2560 pixels wide when the original is large enough. Confirm the required aspect ratio and safe area for faces. Many land around 250–600 KB.
• Logos and simple icons: Use an approved SVG when your CMS and brand standards allow it; otherwise use a transparent PNG sized for the placement.

These file-size ranges are practical review points, not pass/fail rules. A detailed crowd scene may need more data than a simple portrait. If a photo still looks clean at a smaller size, use the smaller file. If compression creates blocky faces, halos, banding, or unreadable text, increase quality slightly.

You do not need a universal “72 DPI” setting. For a website, concentrate on pixel dimensions, aspect ratio, format, compression, and the final download size. Changing DPI/PPI metadata by itself does not make a large image web-ready.

Crop before you compress

Aspect ratio is the relationship between width and height. A 16:9 banner is wide; a 4:3 story photo is more balanced; a 1:1 image is square. Cropping to the intended ratio before upload prevents surprise cutoffs.

• Keep important faces, hands, signage, and school marks away from the outer edges of a hero image.
• Preview both desktop and mobile. A wide desktop banner may crop tightly on a phone.
• Do not force a new width and height independently. Preserve the aspect ratio so the photo does not stretch.
• Keep an untouched original in your photo archive. Export a separate web-ready copy.

Use the right source format

For a correctly developed HubSpot site, editors generally do not need to convert JPEGs or PNGs to WebP before uploading. HubSpot can automatically serve a WebP version to supported browsers when it is smaller than the original, while the image URL keeps its original extension.

• JPEG/JPG: A dependable choice for photographs. It supports efficient compression but not transparency.
• PNG: Use when you need transparency or crisp raster artwork. PNG is often much larger than JPEG for photographs.
• SVG: Best for approved vector logos and simple icons because it scales cleanly. It is not a photo format.
• WebP: Fine to upload when an image tool has actually created a WebP file, but manual conversion is usually unnecessary on HubSpot.

A filename extension describes the file's real format. Renaming photo.jpg to photo.webp does not convert the image and may prevent it from being handled correctly.

Option 1: Pepperland Website Photo Prep

1. Open Website Photo Prep.
2. Choose Single image for one photo or Bulk for multiple files, a ZIP, Google Drive, or Dropbox.
3. Select Everyday page photo for cards, stories, and content images. The tool limits these to 1600 pixels.
4. Select Full-width banner or hero for large edge-to-edge placements. The tool limits these to 2560 pixels.
5. Prepare and download the new copy, then check the displayed dimensions and actual file size.

Your photos stay on your device while you use the tool. Smaller images are not enlarged, transparent graphics stay transparent, and already-efficient files can remain unchanged.

Option 2: Adobe Photoshop

1. Keep your layered original, then create a web copy.
2. Use the Crop tool to set the placement's aspect ratio.
3. Use Image > Image Size to set the pixel width while keeping width and height linked. Do not increase the original dimensions.
4. For JPEG or PNG, use File > Export > Save for Web. Adobe's preview lets you compare quality and estimated file size before saving.
5. For reliable browser color, export in sRGB and inspect faces, gradients, text, and school colors before saving.

See Adobe's current guidance for Save for Web.

Option 3: Google's Squoosh app

Squoosh is available at squoosh.app and processes images locally in your browser.

1. Drop or paste an image into Squoosh.
2. Turn on Resize and enter the width needed for the placement. Do not make the image larger than the original.
3. Keep the original format unless you have a specific reason to change it. Use the Resize and quality controls for the main optimization work.
4. Adjust the quality while dragging the before-and-after divider. Stop before important details look damaged.
5. Download the optimized file, then give it a descriptive name without changing its extension.

Write filenames and alt text for people

Filenames

Rename files before upload. Use lowercase words separated by hyphens and describe what is actually shown: nursing-students-simulation-lab.jpg. Hyphens are easier to read than underscores. Avoid camera names, dates without context, spaces, and keyword stuffing. Keep the extension that matches the actual file type.

Alt text

Alt text explains the image's purpose to someone who cannot see it and gives search engines useful context. Write one concise sentence based on the page—not a list of keywords.

• Useful: “Two eighth-grade students test a robot in the school's engineering lab.”
• Avoid: “image of students school education robotics best private school.”
• Decorative image: Use an empty alt attribute when the image adds no information. In HubSpot, leave the alt text blank only after confirming the image is decorative.
• Linked image: Describe the link's function or destination, such as “Explore undergraduate nursing programs.”

Do not begin every description with “image of.” Do include visible details that matter in context, such as the activity, people, location, or program. Google advises descriptive filenames and useful, context-specific alt text and warns against keyword stuffing.

Let the CMS finish the job

Pre-optimization and CMS optimization work together. Upload a sensibly sized source file in its real format, then let the website host handle delivery formats and responsive versions.

• On HubSpot, you generally do not need to convert a JPEG or PNG to WebP yourself. HubSpot's CDN automatically serves WebP to supported browsers when the WebP is smaller, without changing the original extension in the image URL.
• This works best when the HubSpot theme is developed with standard image fields, responsive sizing, and correct image markup. Use automatic sizing or the site's standard responsive setting when available.
• Set or preserve image width and height so the layout can reserve space and HubSpot can generate appropriately sized versions.
• HubSpot automatically resizes many hosted images, but images larger than 4096 pixels in either dimension are not automatically resized. Prepare oversized originals before upload.
• Use lazy loading for images below the fold when your template allows it. Do not lazy-load the main hero image that visitors see immediately.
• If you replace a file that appears on several pages, check where it is used first. Replacing the existing file may update every use.
• After publishing, test desktop and mobile for unexpected crops, stretching, blurry detail, missing alt text, and slow loading.

For more technical detail, see HubSpot's CDN and image optimization overview, automatic image resizing guidance, SEO recommendations, Google's image SEO best practices, and web.dev's responsive image guidance.

Final check before you publish

• The crop fits the placement on desktop and mobile.
• The image was reduced, not enlarged.
• The format matches the content and transparency needs.
• The filename extension matches the actual file type.
• The file looks clean at its actual on-page size.
• The filename is short and descriptive.
• Informative images have useful alt text; decorative images have empty alt text.
• The CMS is allowed to serve responsive sizes.