fbpx

Optimizing and Preparing Your Images for your Website

optimize images before you upload

Optimize your Images before you upload

It is a good idea to pre-format images before they are uploaded to the website. This ensures that the image files are transferred in the quickest time, using the least amount of bandwidth and taking up the least amount of space on the server, potentially saving you time and money.

This is particularly important when you are dealing with a large number of images, either for galleries or product databases.

Your images may be supplied to you by your suppliers or a third party photographer. We recommend that you pass on the following specifications to ensure that your images are provided to you in the correct format.

Format

These formats are the most preferred file types you can use to post images:

  • JPEG – An old file type which has become the standard image of the Internet. JPEG images are compressed to give you quality images minus the bulk. Useful for large and medium-sized product or post images and photographs.
  • GIF – Lower quality images used for simpler images such as icons. GIF’s can also support animations. GIF’s must never be used for product images, or larger and more complex images and photos, such as posters and artworks. It is best used for line arts with solid areas of the same color, such as logos
  • PNG – Another popular file type for images, PNG is often larger than both GIF and JPEG as these compresses photos without losing detail. They have more colors than GIF, and does not degrade over time with multiple saves, unlike JPEG. Often, they are used for high quality company logos, or product images which require a transparent background. Do note that some older browsers don’t completely support this filetype.

File and Image Size

For optimal website loading

Uploaded images must (ideally) be less than 500 kilobytes (0.5 MB) in size. Images that are more than 20MB in file size may not be processed by the website, or may take a long time to load, which could deter customers from your site.

Image Size Recommendations

  • Ensure that image sizes are within post display area. For instance, if your website post’s display area is around 700px wide, your full-sized images should have a width of 700px or lower in order for it to fit your website display.
  • We recommend that images are sized and optimised to a format suitable for its use.
  • It is important to note, that when preparing images for your products, to ensure that the dimensions are all the same. For example, it is best to have all portrait images or all landscape images or all square images. If you have a mix of all three then the product category pages are not going to look uniform and tidy.

NOTE: Images can only be scaled down, not enlarged. If you enlarge a previously scaled down image, you’ll get a pixelated (grainy) version of that image.

Colour mode

If you are providing images in a JPEG format, you need to ensure that the colour mode is set to “RGB” as opposed to CMYK. Software designed for print graphics such as Photoshop allows you to export images in a “CMYK” colour mode. This mode is specifically for print and the web browser will display it differently, usually the colours in a CMYK JPEG will display much “brighter”.

Resolution

72 pixels / inch – The standard resolution for screen display.

Optimisation

If your images are to be saved in a JPEG format you will have the option of compressing the images. This compression is measured on a 1-100 or a 1-10 scale, depending on the software that you are using to format your images. 100 representing high quality but larger file size and 1 low quality and small file size.

When saving an image for web use, choose image quality of 60 – 80.
You will find images saved at less than 60 will have a noticeable blur but be small in file size. Images saved at 80 or greater will appear much sharper but the file size will be significantly higher.

Aspect Ratio

Aspect ratio is the proportional relationship between an image’s width or height. Simply put, it’s the width to height (width/height) ratio of the image.

Certain platforms automatically adjust, or simply allows you to adjust the aspect ratio of an uploaded thumbnail or collection images. Squarespace, for instance, lets you crop collection images to aspect ratio, while Zest generally has a fixed width for thumbnail images.

However, for platforms like Shopify, you will need to edit the aspect ratio using a third party photo editing tool before uploading your images to your e-commerce store, if you want your product images to appear in the same size.

Image Thumbnails

Depending on the platform your website runs on, or how it is set up, your product images can get automatically cropped as thumbnail images for your gallery or your product collection.
In some instances, your images will get zoomed in and cropped.

If you would like the thumbnail to show the subject matter in its entirety, you can add white spaces on the image sides. By adding a white space around the image, it retains the entire subject when it gets cropped into a thumbnail image for your collection or gallery.

Naming Convention

Image file names should have names that are alphanumeric only, with no characters such as $ or #. Instead of having spaces in the image name, use an underscore or dash instead eg. ideal_image_name.jpg

To improve your search engine rankings and make your images easier to manage, name images using relevant keywords. IE for the image of a children’s book, instead of using the names from the camera eg IMG0637.jpg rename it to be the full name of the book “the-cat-in-the-hat.jpg”

Image Alt Tags

Alt Tags (Alternative Tags) are designed to explain the details of an image for the users who can’t or choose not to view images on their browsers. Alt tags also help search engines understand the image content and index it properly for search results.

When processing large numbers of images use batch processing functions, supported by some advanced image edit software. Please see the help files of your image edit software for support and more information about this.

Optimizing for Performance

Optimizing for performance is a step one should not overlook if you want to get the most of your new or existing website. I am going to break this guide up into sections for image optimization, minification and caching. By following this guide and taking care of the items mentioned you should be able to achieve a respectable gtmetrix PageSpeed & YSlow score.

Image Optimization

Missing this step will result in huge hits to your page speed score and could potentially cause your loading time to raise by a good amount depending on how careless you get.

Resizing: if you are uploading images directly from your camera, make sure you resize them first. Modern cameras can output images over 7000px wide with file sizes larger than 20mb!! Even if you are using a full width page on your Website, there is just no need for the image to be over 2000px wide.
Resize unnecessarily large images in your go-to program before uploading them. If you don’t have a premium image editing tool such as Photoshop, there are free solutions out there such as Gimp or Irfanview.

Compressing: After you have ensured the images you are using are not massively oversized – you need to verify that you are compressing or optimizing them properly for the web. If you use Photoshop, leaving the default quality setting on 100% is a big no no. The goal here is to balance the quality with file size – if you compress too much you’ll end up with undesirable artifacts, but leaving it too high could double or triple the file size for no reason. Here is a great article covering the topic in detail over at tutsplus.
Compressing plays a huge role is file size and thus download speed to your user. It’s also worth noting there are two solid WP plugins (Smush it & EWWW) which you can use to bulk compress images on your setup.

Minification

Minification removes all unused spaces in the theme asset files to make the size smaller. By default the files are shipped to be human readable with normal spacing and comments to help you understand if you wanted to inspect it and make modifications through a child theme.

Besides just removing spaces to reduce file size, mification through the plugin we recommend will also combine all the javascript & css files into one .js and one .css file. This reduces the number of requests your server has to make, thus yielding more page performance and greater PageSpeed scores.

Some Plugins will do the Job for you BWP Minify

The reason I suggest BWP minify over other solutions is because it’s free and provides great control over the minification process. There are other plugins out there that can get the job done – but keep you in the dark over the process and don’t allow you to configure the settings deeply.

W3 Total Cache

There are many different types of caching offered in W3TC, but in this guide we’re going to focus on the simplest and the only one used on the demos: browser caching. This will allow the theme assets to be cached on your users computer after initially downloaded, to save your server from having to serve them more than once. The result significant performance increases.

If you would like a quick overview on what caching is and the various types please check this resource.

In the “Browser Cache” tab of your W3TC plugin panel, ensure these settings are checked.

GZip Compression

If you are new to optimizing for speed you may be missing out on the easiest yet most impactful steps. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the theme files, reduce data usage for the client, and improve the time to first render of your pages. This means that by simply telling your server to use this feature, all theme assets will be drastically reduced in size.

In the “General Settings” tab of your W3TC plugin admin panel, scroll down until you see the browser metabox and ensure that gzip compression is enabled

Conclusion

As you can see, all of the above techniques are essential to ensuring high performance for your website – basically with any Theme or CMS System you use. Once you’ve leveraged these web standard recommended items, you will notice much higher performance and significantly higher scores in PageSpeed testers such as GTMetrix, YSlow etc.

X

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close