Images are an important part of a good website. They help tell your story, attract attention and make content easier to understand. But large image files can slow down your website and create a frustrating experience for visitors—especially on mobile devices.
The goal isn’t simply to make images smaller. The goal is to use the right image dimensions, format and file size for the way the image will appear on your website.
In this article
Start with the right image size
Before uploading an image, consider how it will be used on the page. A full-width banner image needs more pixels than a small image displayed alongside text.
Avoid uploading the original, full-resolution photo from your camera or phone unless you actually need those dimensions. Resize or crop the image for its intended use first.
An easy option: CAES Canva templates
CAES Canva for Teams includes website image templates with the appropriate dimensions for CAES and UGA Extension websites. Learn more about Canva for Teams.
Use the templates whenever possible to create images at the right size before uploading them to your website.
CAES Canva website templates:
Choose the right file format
The image format you choose affects both quality and file size.
JPEG (or JPG) — a good choice for photographs
JPEG is a good choice for photographs and other images with many colors. When saving a JPEG for the web, you generally do not need to use the highest quality setting. Moderate compression can significantly reduce file size while maintaining good visual quality.
PNG — use when you need transparency
PNG is useful for logos, graphics or other images that require a transparent background. For photographs, however, PNG files are often much larger than necessary.
CAES recommendation: Use JPEG for most photographs and PNG when you need transparency for logos.
Keep image files small
As a general CAES best practice, aim for an image file size of 500 KB or less. This is a target rather than a hard rule. Some large, high-quality images may need to be larger, while many images can and should be much smaller.
When an image is larger than necessary:
- Check its pixel dimensions and resize it if needed.
- Choose an appropriate file format.
- Compress the image.
- Check the final image to make sure it still looks good.
Remember: A smaller image file isn’t helpful if the image is too small or blurry for its intended use.
Compress your images
If your image is still too large after resizing, use an image-compression tool before uploading it.
Tools such as TinyPNG/TinyJPG can reduce file size while maintaining good visual quality.
Compression works by removing image data that isn’t necessary for displaying the image effectively. A well-compressed image can look nearly identical to the original while loading much faster.
Name your image files clearly
Give your image files short, descriptive names before uploading them. A descriptive filename makes it easier to identify and manage images later.
CAES recommendations:
- Use descriptive words that identify the image.
- Keep the filename short and meaningful.
- Use lowercase letters.
- Separate words with hyphens.
- Avoid special characters.
- If a date is important, use the format YYYY-MM-DD.
Examples:
2026-09-29-cotton-workshop-attendees.jpgdean-nick-place-with-students.jpgclayton-county-soil-sample-kit.jpg
Don’t forget alternative text
Image optimization isn’t just about file size. Images should also be accessible.
When an image conveys information or meaning, provide concise alternative text that describes what is important about the image. If an image is purely decorative, it generally does not need descriptive alternative text.
Use guidance from the CAES Digital Accessibility Handbook on writing alternative text and descriptions for images for examples and best practices.
Review images regularly
Don’t let your website’s Media Library become a storage space for every image you’ve ever used.
Periodically review your images and remove outdated or unnecessary files when appropriate. When replacing an image, make sure the new version is appropriately sized and optimized before uploading it.
Quick checklist
Before uploading an image to a CAES website, ask:
- Is it the right size? Resize or crop it for how it will appear on the page.
- Is it the right format? Use JPEG for photographs and PNG when you need transparency or lossless quality.
- Is the file as small as practical? Aim for 500 KB or less.
- Is the filename descriptive? Use lowercase words separated by hyphens.
- Does it need alternative text? Add concise, meaningful alt text when the image conveys information.
Taking a few minutes to optimize an image before uploading it can improve page performance and create a better experience for everyone who visits your website.
Need help?
The CAES Web Team can help you determine the best approach for your website images. Contact caesweb@uga.edu with questions.
