Welcome to Katana. If you're here you are probably trying to improve your website's user experience. There's a very easy way to know if your images are the problem: If your page takes more than 5 seconds to load, the large majority will stop using it. At Katana we do this for all our websites.
Before you continue reading, please go to GTMetrix and take a look at your page score. If your image score is anything but an "A" and the images seem to be slowing your site, this article is for you! Or if you want to save time and learning curve drawbacks, take a look at our Optimization Services.
Optimizing images is a quite important part of Web Development. However, many amateurs and some professional web builders use the automatic image optimizers. However there's a better way that is far more effective and in the long run, saves time. But first, what is image optimization and why is it so important? This article covers the three big questions:
What - Why - How.
What...
Images are one of the most common components of a website. For exampe, Instagram uses two images to display. Initially one gets to see 150px square thumbnails. However the real size of the image is set to 1080px. Image optimization is the balance of bringing the image size and quality to the precise amount the website needs. There are two ways of making it wrong and only one way of making it right. When a browser picks up a website, it gets the image and does its best to show images in the right location and the correct size. Image optimization helps the browser do extra work and results in better user experience.
Image optimization observes at two measurable parts of an image: Size (width and height), Quality. Those two ultimately determine the filesize (Kb or Mb) of the image. Correct image optimization requires uploading an image that is served at the correct scale its quality has been lowered to the minimum without distorting or compromising the visual beauty of the picture. Therefore, Image Optimization can be automated but human input can make a big impact because it requires a human eye to determine what is the perfect quality.
Why...
Page Ranking and Page Scores are an automated way of quantifying User Experience. Ideally, any website should fully load in 2-3 seconds and a page score analyzer like PageSpeed and GTMetrix can tell you what is taking so long to load. Images are always a big portion of the score and those tools can only look at the original size of the image, compare the original height and width to the served size and evaluate if the image weight (Kb) falls in the correct range. Typi
How...
The steps to optimize images are quite simple. This is preciselly how we do it at Katana.
Content is step one. We always choose to find a design that features the text in simple, yet efficient ways. Therefore, we would recommend you to have a layout of one page of your website ready. Once this si set, add the images and see what is going on in your page. This will help you determine the size and quality you will need.
Go to GTMetrix and analyze your page score. You will find that the image rankings are low. If not you were very lucky and/or you have a good eye, probably your score for image size and quality is an F in both cases. GTMetrix will offer you an optimized version of the image (but this could lead into undesired quality loss). At Katana however, we do one image at a time to make sure that every detail is accounted for.
Determining the size (height and length) is easy if you use Firefox. Simply open your page, right click on your image and select “view image info”. This will tell you the current size of your image and if it is being scaled, the two new numbers that you should apply when optimizing the image.
Open the original image in Photoshop. Select the crop tool and set the correct pixel size for your image and execute the crop. Go to file, select “save for web and devices” and observe the quality of the image. In the window before saving you will get to select the quality and how much it impacts the size in Kb of the file. Find the lowest acceptable quality and save the file.
We would recomend to add the proportions in px of the image. A good example is picture-550x350.jpg. This way we know that the file is 550px wide and 350px tall. Upload the file and substitute the image url for the nee optimized file. Do this same pricedure for all the images you were flagged for in GTMetrix. The page will show a signifficant higher score.