{"id":14224,"date":"2017-04-20T13:30:41","date_gmt":"2017-04-20T18:30:41","guid":{"rendered":"http:\/\/www.shipstation.com\/?p=14224"},"modified":"2024-10-08T16:25:39","modified_gmt":"2024-10-08T21:25:39","slug":"optimized-images","status":"publish","type":"post","link":"https:\/\/www.shipstation.com\/blog\/optimized-images\/","title":{"rendered":"How to Make Your Web Pages Load Faster by Optimizing Images"},"content":{"rendered":"\n

Browsing the internet is a test of patience. A big video or image file will slow down a website\u2014not to mention what a slow internet connection means for loading big, high quality images. According to Kissmetrics<\/a>, 40% of people abandon a website that takes more than 3 seconds to load. Each extra second that people have to wait loses a substantial part of your audience. One of the main culprits of slow-loading websites? A non-optimized images.<\/p>\n\n\n\n

Understanding some techniques for optimizing image downloads will help make your site faster and lead to more potential sales. Pages that load faster get better search engine rankings, too.<\/p>\n\n\n\n

Scale images to the optimal size<\/strong><\/p>\n\n\n\n

If an image’s pixel dimensions are bigger than its display dimensions, that’s pure waste. You should size your uploaded images to the largest display dimensions they’ll use, but no larger. When you’re preparing images for the your site, keep the full-size copy, but save a resized copy to upload to the website.<\/p>\n\n\n\n

To do this and make other changes to images, you’ll need an image editing program. Photoshop is everyone’s favorite, but it’s expensive. If you aren’t doing professional image editing, you can get by with Photoshop Elements. If you don’t want to spend anything, the open-source Gimp<\/a> will let you fix up images. Resizing images is easy in any of them.<\/p>\n\n\n\n

Choose the right file type and compression<\/strong><\/p>\n\n\n\n

JPEG is the best choice for photographs. It compresses them to a fraction of the raw image size. When you save an image, you get a choice of how much to compress the file. There’s no standard way to express it; Photoshop calls it \u201cquality\u201d and lets you choose a value from 0 to 12. A low value will give a blurry image. 8 to 10 is good in most cases.<\/p>\n\n\n\n

For line-art drawings, PNG can be a better format. It compresses without blurring, so drawings in the browser will look as sharp as the originals. PNG lets you set transparency values, which is nice for certain effects. It will produce bigger files than JPEG for photographs, though. The tool TinyPNG<\/a> lets you compress PNG files with very little loss of quality.<\/p>\n\n\n\n

Be very sparing in your use of GIF. It allows clever animations in small files, but an image can have only 256 colors, so it loses fine shading and can look cheap.<\/p>\n\n\n\n

Use platform-specific tools<\/strong><\/p>\n\n\n\n

Many web platforms support tools for image optimization. Several plugins are available for WordPress, including the popular WP Smush<\/a>, to let images download faster. A caching plugin, such as WP Super Cache<\/a>, will reduce the number of times users need to fetch pages and images and improve page load speed. Shopify offers a free app for its customers — SEO Image Optimizer by Booster Apps<\/a>.<\/p>\n\n\n\n

Give responsive pages separate images<\/strong><\/p>\n\n\n\n

A website which is responsive \u2014 one which adapts to the screen size \u2014 is almost a must for an e-commerce site. You may be able to upload the same image in different sizes for mobile and desktop viewing. Desktop users, who have faster connections, get the full-sized image, while mobile users with smaller screens get a smaller one that loads faster.<\/p>\n\n\n\n

Exercise moderation<\/strong><\/p>\n\n\n\n

There’s a story about Mozart and the Austrian emperor: Joseph II remarked that a piece had a great many notes, to which the composer replied, \u201cExactly as many as were necessary, your Majesty.\u201d Your e-commerce site should have exactly as many images as are necessary\u2014and no bigger<\/em> than necessary, either. A page that shows multiple products should usually have just thumbnails, with the full-size images on the pages for the individual products.<\/p>\n\n\n\n

Don’t make your e-commerce site barren for the sake of speed, but don’t add images that serve no purpose. Use images that don\u2019t waste bytes. If your site has optimized images, it will be one that customers will enjoy coming back to.<\/p>\n\n\n\n

\"Download<\/a><\/span>