We know that images are a powerful way to attract attention. Appealing, relevant images help us present our information in a more digestible way by breaking up content and making it more memorable. But did you realize that large image sizes could negatively impact your website performance?
It’s important to find the right balance between creating visual impact and still putting together a fast and user-friendly web experience. If you care about improving your page load time, increasing your traffic, and elevating your search engine rankings, you need to control your image file sizes.
What affects overall image file size?
- Pixel Dimensions: Length and width of an image. Larger dimensions equal larger file size.
- File Format: Different file formats (we will discuss JPG and PNG) take up space based on their use and the amount of information they contain. That matters when it comes to appearance, performance and scalability.
- Quality: Maintaining the original, high-resolution quality of an image will result in larger file size. Compressing files keeps image quality looking great for the web, while resulting in small and manageable file size.
Tips for Optimizing Web Images
Use Canva for Teams
UGA Cooperative Extension leadership invested in Canva for Teams to make creating promotional materials easier. Our ready-to-use website templates make sizing images to the appropriate resolution and dimensions incredibly simple.
Choose the Right Image File Format
JPG (or JPEG) is the most common format used on the web because of its small file size and universal browser support. JPG files are fast loading and are a great option for displaying photos with lots of colors.
When exporting and compressing JPG images, you will almost never need to export images at 100% in the quality slider. You should be able to use between 6o to 80% without any noticeable quality loss.
PNG is another popular file format with universal browser support. They support transparent backgrounds whereas JPGs do not. PNGs are best for saving graphics with text that need to stay sharp, like logos, icons, and simple illustrations.
Recommendation
Currently, we recommend using the JPG format for photographs with PNG files being used only if needed for logos. Ultimately, images on your website should never be larger than 500KB in file size.
Image File Compression
If you find your image file size is still too large, you can use a compression tool called TinyJPG to achieve optimal compression rates.
What does TinyJPG do?
TinyJPG uses smart compression techniques to reduce the file size of your JPG and PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a huge difference in file size!
How to use TinyJPG
Step One: Open TinyJPG and click the box in the middle to upload the image you want to compress.
Step Two: The panda will raise his arms once the process is finished. Download the compressed image.
Bonus Tips
File Naming
File names can include any information that will make each file unique and easily distinguished from one another. The key to making image management easier is using a consistent file naming convention.
OIT recommends the following strategy:
- Include important, descriptive and easily understood terms in the file name.
- Keep it short and concise.
- When using dates, format as YYYY-MM-DD. Using a numerical date format can be incredibly helpful for chronological sorting — especially if the date is located at the beginning of the file.
- Avoid using special characters such as ~ ! @ # $ % ^ & * ( ) + ` ; / \ : ? “ < > |[ ] and { } because they have special meanings to operating systems.
- Use all lowercase letters with hyphens between words when naming files.
Examples of effective file names:
- 2023-09-29-cotton-workshop-attendees.jpg
- dean-nick-place-with-students.jpg
- clayton-county-soil-sample-kit.jpg
Regularly Review and Optimize
Web content managers should periodically review image assets. Remove outdated files. If image file sizes are above 500KB, take time to optimize them using TinyJPG or similar tools to maintain website performance. This will ensure that your images are both high quality and web-friendly.
Need help?
Contact caesweb@uga.edu for assistance.
