In today's #ThrowbackThursday, I'm jumping back to April 2011 when I wrote about image sizes. You can read the old Gold Nugget here. This is still a very relevant topic today that's worth revisiting.
In this age of high speed internet, there are many times when you can get a faster connection through the 4G on your smartphone than through the wired connection you have on your computer. You might think that there's no need to worry about optimal image sizes with all that blazing speed, but you should worry... a lot.
Those blazing speeds only occur when the conditions are right. Speeds slow down when more people are using that internet connection at home and in the office.
Your smartphone speed will depend on how many bars you have and how much battery power you have. Some people complain about 3G internet speeds on their phone and give up when their phone is on "E". Others will struggle through a mobile connection no matter how bad it gets, even if it takes a few minutes to load the home page.
A point of note about this Nugget: When I mention file size, I'm referring to the amount of storage space needed to save the images on a hard drive. The larger the image, the longer it takes for a website to load. The file size should not be confused with the image size, which is the height and width of the images as it appears on your screen.
Images on the home page of a website can be a killer bandwidth hog. While is should be no surprise that I'm not a fan of home page sliders and rotators; many websites use them. Even with a responsive website design, those sliders still download the same size images to a mobile devices as they do to a desktop device.
The photos used in those home page sliders can be stunning, as they should be for a jewelry website. However, they don't have to be stunning to the point of print quality. A computer screen will only display 72 dots per inch (dpi) whereas a printer will use 300 or 600dpi for high quality. There's no need to have those higher color depth images on your website... They slow everything down because the file size grows real fast as you cram more colors into the height and width of your image.
Image File Types
Most good looking jewelry photos need to be saved in the JPG format. Using a program like PhotoShop, you can select the quality of the JPG to be saved on a scale of 1 to 100. You only need to save your images so they are good enough for how they will be used. No need to cut back on quality; just don't over use it.
Some people like to save their photos in the PNG format instead of JPG. There are two types of formats for PNG: the lower quality PNG8 and the high quality PNG24. Both PNG types are best used for images that contain mostly solid backgrounds and words, but not usually for photos because you can't control the quality of the PNG24--it's always high quality and therefore always a large file size.
When using PNG files, always check the settings in PhotoShop to see if you can use a PNG8 before selecting PNG24. You should be able to use PNG8 most of the time unless you need see-through backgrounds.
It Adds Up
All of those home page slider images need to be downloaded in order for the animation to work. A set of 7 images at 175KB each translates into 1.22MB download just to see your home page.
Consider for a moment that most smartphone plans do not have unlimited data usage any more. My own plan has 10GB per month with rollover date (AT&T). A quick visit to a home page with 7 sliders will eat up 0.0012GB of my data plan.
Furthermore, most of the images I encounter on home pages are not even optimized and are around 300KB. That would eat up my data plan much faster while also slowing down the experience I'm having on your website.
This month, Google officially announced that there are more searches on mobile than on desktop, so before you decide to clog your home page with a slider of beautiful photos and a conveyor belt of 20 designer logos, think about your customers usage on mobile.
Is it worth the increased download time you are forcing on your users? Will they appreciate that you just zapped 0.2% of their monthly data allocation on a page they will only spend 11 seconds on?
If you absolutely feel that the need to use sliders and rotators on the home page, then make sure you optimize the images!
Site Wide Slowdown
Image size and download isn't only a concern for your home page. It's a site-wide concern. The more optimized your images are site wide the better experience your user will have browsing every page.
Even if you only have 1 image per page, the time accumulates through the browsing experience. The user might get tired waiting 2 or 3 extra seconds for every page to download on mobile when they could be using those 2 or 3 seconds to read your page instead. My current tracking shows mobile users visiting an average of 4 pages per session, that's only 12 extra seconds, but won't you rather have those precious 12 seconds to convey a message instead of waiting for a download?
Image Suggestions
Learn how to optimize your image sizes in PhotoShop. I use the "Save for Web & Devices" setting all day long, every day. Every time I save an image, I cross reference the potential to save as a JPG, PNG, and even a GIF. It only takes a few extra second of my time to do this, which translates into website users saving several minutes of saved time every month.
Never assume one file type will always be the best. Always check. In the long run, your users will appreciate that you care about them.
