Image Optimization

They say a picture is worth a thousand words, which is one of the reasons images are so important in web design and ecommerce. So it goes without saying that your images need to be hi-resolution and crisp. But, this comes at a price. Large, high definition images can have huge file sizes. Put a few of these on your site and that snappy experience of navigating your online store can end up feeling more like swimming through molasses. Not only will this cause visitors to bounce, but in time, Google will notice as well, and this can affect your SEO. The other challenge is that you need different size images for your website depending on what device or medium your visitors use. A mobile device, smart phone, or iPhone has in general a slower internet. Visitors will not wait for images to load. According to Google, 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load, it’s important that your images are small enough to ensure a speedy site, no matter the internet speed or the screen size.

 

Images need to look good no matter if it a 60 inch TV or a 3.5 inch screen. Not only does your framework need to be responsive to the screen size. Your images need to be as well.  Every image that you add to a page has to be downloaded by visitors from your server to their device.  This increases page loading times, which can frustrate visitors and have an adverse effect on search engine rankings. Nothing will slow a page down like tons of unoptimized graphics. In my experience, images tend to account for the majority of a page’s total file size (commonly known as “page weight”).


Image types

it can be confusion at what type of file you need for the image. There are so many file types… which file types look good? Does one file type look better than the other? There are three main file types we’ll want to focus on for saving images optimized for the web: GIF, JPG and PNG. Each file type has its own strengths and weaknesses and it is very important to know and keep these in mind when saving an image.

  • JPG (pronounced J-pegs) – are the most popular file type for images on the web. JPGs are perfect for photographs, or complex images containing lots of colors, shadows, gradients, or complex patterns. JPGs handle these type of images well because JPGs have a huge color pallet to work with. JPGs can also be saved in in high quality, low quality or anywhere in between. This allows you to adjust and save the image exactly how you want, balancing quality and file size.
  • PNG – PNGs are another popular file format online. In Adobe Photoshop, you’ll have the option to save PNG’s as PNG-8 or PNG-24. PNG-8 has a very limited color pallet of 256 colors. While the image size is smaller, this wont be a good option for complex images and photographs. PNG-24 provides a much higher quality image but comes at the cost of a larger file size. Most importantly, PNGs can handle transparency. Transparency is a clear area of the image that allows whatever is underneath (like a background) to show through. Transparent areas take up little or no space. That is why many logos or header areas use PNGs. Transparency is one of the biggest differentiation points between PNGs and JPEG’s.
  • GIF – GIFs were more popular many years ago, but are still an option for small image sizes where only a few colors are needed. Much like PNG-8, GIF files are restricted to only 256 colors. Because of this, GIFs should never be used for product photos. Use of GIF’s are still used for buttons, shopping carts, and/or small images that are used to direct the eyes of the visitor. The other major advantage is that GIFs may contain more than one frame, so it can be animated.

Now that we have covered file types and their usage, we now will offer tips to optimizing the images itself

  • Optimizing Your Images before Uploading to Your Website – the acceptable DPI (dots per inch) is 72 DPI. Simply put, most screens cannot show high DPI than that. Lesser quality images however will show poorly on larger screens. Make sure the image is also the right size. It does not make sense to have a 50 – 120 inch image if the image will not be seen at 5 inch, even on a large TV screen. This is a lot of wasted space that the server needs to send and the viewers device needs to download and then compress down. It is also wise to research the standard acceptable image size that you have chosen for your website and then tailor every single image to that same size and dimension. Acceptable sizes are A) up to 1,000 pixels wide/high for a full page image B) up to 600 pixels wide/high for a large image C) up to 300 pixels wide/high for a medium image and D) up to 150 pixels high/wide for a thumbnail. File size is also something to watch out for. Based on what your website offers, Acceptable File sizes are as follows (for a desktop)

Maximum – 1.38 MB | Very High – 611 KB | High – 339 KB | Medium – 152 KB | Low – 86k

  • Create multiple sizes – I know this sounds complicated, but an image size needs to be smaller on a mobile device than on a desktop. You will need up to 5 different sizes for each image and then program that image to show based on the device the viewer is using. There are many software’s now that can do this for you if you get the original image size right. WordPress has a useful thumbnail feature that will automatically create three different sizes of any image you upload. This can be found in the WordPress admin area under settings/media. Photoshop and many photo editing apps off a “save for web” feature that automatically puts in the right size.
  • Name Your Images and metatags descriptively and in Plain English – 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.


  • Optimize Your Alt Tags intelligently – Alt tags are a text alternative to images when a browser can’t properly render them. Even when the image is rendered, if you hover over it with your mouse pointer, you can see the alt tag text created for that image (depending on your browser settings). The alt attribute also adds SEO value to your website. Adding appropriate alt tags to the images on your website can help your website achieve better rankings in the search engines by associating keywords with images. As a matter of fact, using alt tags is probably the best way for your eCommerce products to show up in Google image and web search.
  • Test Your Images! – The entire point of optimizing your images is to help increase your bottom line. We’ve talked about reducing file sizes and getting the search engines to index them – but what about testing images to see what converts into more business? Since loading time is an issue for some non-hosted ecommerce sites, you may find that reducing the number of images on a page will increase click-through rates and sales.
  • Use Animated GIFs Very Sparingly – In the 1990s, animated GIFs were everywhere. They’ve recently made a comeback, although not in the form of spinning logos and page counters. The rule here is pretty simple: animated GIFs tend to be large in file size (often even larger than an HTML5 video). If you want to use an inline animated GIF to demo a super quick concept (such as how to use a UI feature in a web app), then just be sure to keep an eye on how each GIF impacts the overall page weight. If you just want to make a fun webpage with a zillion animated images that have questionable copyright, please keep it on Tumblr.

 

If you have further questions or a need for us to optimize your images, please feel free to Contact Us.