...
...
| Table of Contents | ||||
|---|---|---|---|---|
|
Naming
Name your images descriptively and in plain language.
...
<img src=”July-2021-CDA-Journal-Publication.png” alt=”July 2021 CDA Journal Publication.png”>
The number one priority when it comes to image optimization is to fill out each alt attribute for each product image on your site.
...
A good rule of thumb is to try to keep your image file size below 70 kb.
Optimize images in Photoshop
...
Quality: Find this in the top, right-hand corner (i.e. 70).
File format: Find this in the top, right-hand corner (i.e. JPEG).
Optimization: Find this checkbox in the top, right-hand corner (i.e. Optimized).
Color: Find this checkbox in the top, right-hand corner (i.e. Convert to sRBG).
Downsizing and sharpening: Find this in the bottom, right-hand corner (i.e. W: and H:).
Expected file size: Find this in the bottom, left-hand corner (i.e. 136.7K).
...
As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to remain at the same low file size.
Here are some tips to remember when choosing file types:
In most cases in ecommerce, JPEGs will be your best bet. They provide the best quality for the smallest file size.
Never use GIFs for large product images. The file size will be very large and there is no good way to reduce it. Use GIFs for thumbnails and decorative images only.
PNGs can be a good alternative to both JPEGs and GIFS. If you are only able to get product photos in PNG format, try using PNG-8 over PNG-24. PNGs excel as simple decorative images because of their extremely small file size.
...
You want to check the file sizes of all the decorative images on your site and use a template that minimizes file sizes.
Here are some tips for reducing the file sizes of your decorative images:
For images that make up borders or simple patterns, make them PNG-8 or GIFs. You can create good looking images that are only a few hundred bytes in size.
If possible, use CSS to create colored areas instead of using images. Use CSS styling as much as possible to replace any decorative images.
Take a close look at that large wallpaper-style background image. Those can be huge files. Shrink them down as much as possible without ruining the image quality.
...