Do you have images on your site? Did you know that images are usually why sites are slow and take time to load? You might say, but Tiffany, images make my site look attractive and people like them. Are you telling me to remove the images?
No, I am not. Large images can affect your page load times – and they don’t need to!
In this article we learn to improve images so your site loads fast. We also talk about making your images accessible to everyone. This is called image optimization.
Topics covered
- How do you optimize images for the web?
- Should you save an image as JPG or PNG for the web?
- Why is it not okay to have text embedded in my background image?
This page is updated constantly, so be sure to check back or bookmark this page.
How do you optimize images for the web?
In a nutshell, you can take these steps to optimize your images:
- Crop and resize your images
- Rename your images
- Save them in the right format
- Compress your images
- Add ALT (alternate) text to your images
- Advanced ways to optimize images
1. Crop and resize your images
Cropping and resizing pictures not only makes them look better, it helps your site load faster. When you get rid of unneeded details in an image or adjust the size of the image so it fits where you’re putting it, you reduce the file size. This matters because if images are too big, they take longer to appear on a website, especially for people with slower internet.
2. Rename your images
When you take a photo, by default, the image filename is not meaningful. It looks something like “P10124349.jpg”. When you rename the image, it is easy to understand, and makes Google more likely to suggest your image. Make sure the filename describes the image, includes relevant words, and uses hyphens instead of spaces between words.
For example you can rename an image to: “young-girl-happily-holding-a-balloon.jpg”.
3. Save images in the right format
Saving your images in the right format can help you save space and help your visitors view your page faster. See Should you save an image as JPG or PNG for the web? for a deeper dive on what format to save images.
4. Compress your images
After cropping, resizing, and choosing the right format, you can further shrink the file size with compression. Compression works like squeezing the air out of a balloon – it reduces the amount of data in the image file without sacrificing much of its quality.
Here are some you can use:
- For WordPress sites, I like EWWW Image Optimizer, although there are many other image optimization plugins too.
- For Mac users, I recommend using ImageOptim.
- Online image compressor: TinyPNG
5. Add ALT (alternate) text to your images
Describe your images with words. This helps people who can’t see well understand what’s in the pictures and also helps search engines know what your pictures are about.
HTML
If you’re using HTML, you can add an “alt” attribute to your <img> tag. Like this:
<img src="your-image.jpg" alt="A descriptive text about your image">WordPress
- Classic Editor:
- In the WordPress Classic Editor, click on the image you’ve inserted.
- A toolbar will appear. Look for the “Image Details” or “Edit Image” option.
- In the image details/settings, you’ll find a field for “Alt Text.” Enter your descriptive text here.
- Block Editor (Gutenberg):
- In the WordPress Block Editor, click on the image block.
- On the right sidebar, you’ll find the “Image Settings” panel. Look for the “Alt Text” field and enter your description.
6. Advanced ways to optimize images
I won’t go into detail here but these are advanced ways to optimize images:
- Serve them in NEXTgen format
- Serve them over CDN (content delivery network)
Should you save an image as JPG or PNG for the web?
When you save an image for your site or blog, save it in JPG format. This reduces the file size and speeds up page loading time.
For example, a 3.2MB image in PNG format reduces to 378KB when saved as JPG– that’s 11% of the original size!
Exceptions
- When the image is a vector graphic (ex. logo) and the PNG file is about the same size as a JPG file, use the PNG file. It provides better detail.
- For images that need transparency, save it as a PNG file.
When do you save images in the PNG format?
- For images that are vector graphics, such as logos, use PNG format.
- For printed materials, you can use PNG or TIFF. These formats are higher quality.
- For images that need transparency, save it as a PNG file.
Generally, save images in JPG format. This reduces the file size and speeds up page loading time.
Why is it not okay to have text embedded in my background image?
One mistake I see often is when web administrators and designers create background images with text on them. This gives them control on the placement of the text but they don’t realize this doesn’t always translate well on the web.
Reason #1: Hard to read on smaller screen sizes
Background images often span the full width of the screen. When you resize the browser window or view it on a small device, the image and text will shrink proportionally. This makes the text really small and hard to read.
Reason #2: Background images should not have important information
Background images are ambient images. They are not meant carry important information. In code, they often don’t have alternate (ALT) text to describe the image. So if you include important information with text on the background image, then that information won’t be available to screen readers (used by those who are visually impaired).
Better solution
If you want text on top of the background image, use HTML. That way, it can be read by screen readers and can wrap to the next line when the screen size changes. You can also add style rules so that the font size is bigger on smaller devices.
Tip: For accessibility, make sure you have use high contrast between the text and background image.
When can you use text on images?
When the image is not a background image, sometimes it is useful to have text on images. For example, for the thumbnail image or the featured image for a blog post, you may want to include the title to attract readers. When including text on images, you’ll want to note the following:
- Make sure the text is easy to read on all screen sizes. Avoid using lengthy phrases and small font sizes.
- Add alternate (ALT) text to describe the image
- If you want to upload posters or flyers, consider creating a thumbnail of the document and link it to the actual file (whether it is PDF or a larger image file) so visitors can open the file and zoom in to read the text.
No, for background images, avoid designing the graphic with text on it. It is not mobile responsive and not accessible.
Ready to start?
Bring out the excitement. Let’s discuss your vision!