If you run an online business, image optimization is an art that you want to master. From attracting shoppers perusing Google images to reducing site load time – image optimization can be an important part of building a successful ecommerce business.
Have you ever stayed up at night wondering:
- Why is it that when I do a Google image search, my product photos never show up?
- Do I need to add “Alt Tags” to my images?
- What’s the difference between a JPEG, GIF and PNG – should I use one over another?
1. Name Your Images Descriptively and in Plain English
It’s really easy to blast through hundreds of product shots and keep the default file name your camera gives them. But before you keep that habit, let’s discuss why that’s not a good idea.
When it comes to SEO, it’s important to use acceptable keywords to help your webpage rank on search engines. Creating descriptive, keyword-rich file names is absolutely crucial for image optimization. Search engines not only crawl the text on your webpage, but they also search for keywords within your image file names.
Let’s use this image as an example:
You could use the generic name that your camera gave to the image such as DCMIMAGE10.jpg. However, it would be much better to name the file: 2012-Ford-Mustang-LX-Red.jpg
Also think about how your customers search for products on your website. What naming patterns do they use when they search? In the example above, car shoppers may search using the terms:
- 2012 Red Ford Mustang LX
- Ford Mustang LX Red 2012
- Red Ford Mustang LX 2012
A good habit to get into is to look at your website analytics, and see what phrasing patterns your customers use to perform searches. Determine the most common naming patterns they use, and apply that formula to your image naming process.
If you are not going to get that detailed, just be sure to use good keywords when naming your images (and try to be descriptive!).
2.Reduce the File Sizes of Your Images
- Most consumers wait about 3 seconds for a website to load on a desktop or laptop.
- …and about 5 seconds on their mobile device.
- Amazon found that if their pages slow down by 1 second, they lose $1.6 billion a year.
- Google uses page load time as a factor in their ranking algorithm.
If you have images that slowly “drool” down the screen and take over 15 seconds to load – well, you can count that prospective customer goodbye!
A Word of Caution About Providing Larger Images
Now you might want to provide larger views for your visitors, which is a great user experience enhancement – just be careful.
Whatever you do, don’t place the largest image on your webpage and simply shrink the dimensions via the source code. This will increase your page load time because of the larger file size associated with the large image.
Instead, make it a smaller image and provide the option to view a larger image in a pop-up or to be displayed on a separate webpage.
So What Do You Do?
When a customer goes to your site, it can take a while depending on how large your files are. Specifically with images, the larger the file size the longer it takes a webpage to load.
If you can decrease the size of the image files on your webpage and increase pageload speed, less people who visit your site will click away.
One way you can reduce image file size is by using the “Save for Web” command in Adobe Photoshop. When using this command, you want to adjust the image to the lowest file size acceptable while keeping an eye out for image quality.
NOTE to HS: The max site to headers and slide show is 1680px width. For galleries 960px is fine.
How Large Should My Image Files Be?
A good rule of thumb for ecommerce images is to try to keep your image file size below 70kb. That can be difficult sometimes, especially for larger images, but I’ll get into that in a minute…
Know Which Image File Type to Use for the Right Situations
There are three common file types that are used to post images. These are JPEG, GIF, and PNG.
Let’s look at the 3 file types and how they affect the same image:
JPEG (or .jpg) images are a somewhat of an old file type and has become the de facto standard image of the Internet. JPEG images are able to be compressed considerably, which results in quality images with small file sizes. In the image above, the JPEG format provides nice quality and low file size.
GIFs (.gif) are lower quality images than JPEGs and are used for more simple images such as icons and decorative images. GIFs also support animation as I’m sure all you Redditors know. Regarding image optimization, it’s great to use GIFs for the plain and simple images on a webpage (that are just a few colors), but for complex images and photos, GIFs are not always as attractive – this is especially true for bigger and more photoesque image.
The MacBook GIF above is a case where we can get away with using GIF. This is because the photo is small enough where GIF works well.
PNG images are becoming more popular as an alternative to GIFs. PNGs support many more colors than GIFs, and they don’t degrade over time with re-saves like JPEGs. Even though the PNG file type is starting to be used more, the file sizes can still be much larger than what you would find with JPEG images.
Notice how the PNG-24 image is over three times larger in file size than the PNG-8 version. This is why you need to be very careful with PNGs.
Here’s an extreme example, where the image file size has been held constant at 24 kb for all three files formats:
As you can see, JPEG is the clear winner here. GIFs and PNGs must degrade in quality in order to stay at a low file size.
Here are some tips to remember when choosing file formats:
- For most ecommerce situations – JPEGs will be your best bet. They provide the best quality and the smallest file size.
- Never use GIFs for large product images. The file size will be very large and there is nogood way to reduce it. Use GIFs for thumbnails and decorative images.
- 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 at simple decorative images because of their extremely small file size.
- Most image editing software can save images to any of the file types discussed above.
There´s anothers pois less important I suppress, but you can read original text at
https://www.shopify.com/blog/7412852-10-must-know-image-optimization-tips (some good tips)