BLOG

We write about great things, you know.

Reinventing brands with high value ideas

How to optimize images for a website – and speed up load times -

By: Victoria Marafetti

Jun 6, 2014 • codingNo Comments

If you are reading the title of this post, maybe this is something you’ve heard about before, but if you are here, it means that at some point, i got your attention.

During the last 4 months, I had the pleasure to work on a project for a great company here in Buenos Aires – we are also great friends, by the way. We were asked to completely redesign their website, upload new images and content, change the navigation and the main structure of the site. Basically, we started from scratch.

One of the things that we had to consider was that the client wanted to improve their search engine ranking on Google. Furthermore, the entire page had to have a responsive design.

To accomplish these goals, we established the following objectives:

  • – We had to generate relevant and interesting content for users
  • – The site needed to be fast and viewable on any device
  • – A big portfolio had to be included on the site so we can show their experience and their clients.

The third requirement of being able to display a large product portfolio started to dramatically increase the final size (in megabytes) of the entire site. This would have impacted the page loading time, especially if someone uses a 3G mobile phone network.

This required a solution to optimize their website speed and performance.

FIREWORKS / SELECTIVE JPG MASK

In the example we will be using here, what we need to display is the bag, its colors and shapes. Backgrounds are not that important, because our eyes will not be paying attention to them. Our focus here is the bag itself. The rest is at another level.

So, let’s get started!. To start optimizing images:

1. Open Fireworks. Then open the image you would like to optimize
For our example we are going to use a real image from our project

Optimize images for a website

2. From the “Original” view tab – using one of the Marquee tools – select the area of the image where you want to keep as much quality as possible.

Optimize images for a website

3. Go to Modify > Selective JPEG > Save Selection as JPEG Mask

Optimize images for a website

4. Window > Optimize.

Once you have saved your selection, open the Optimize panel.
Note: I changed to the 2-Up view option just for my own preference. You can always work in whatever view you prefer but take into consideration that the Preview tab will show you exactly how your image will look like.

Optimize images for a website

5. The Optimize panel will let you set the level of compression for your image.

In Quality it is better to set small numbers because if we look at our example, this part controls the background (this means the area that remains outside of the mask) and as explained before, we are not interested in having the best quality here.

Now, in Selective Quality we need to enter a higher value, because this area belongs to the mask we applied and we want as much resolution as possible here.

Note: In the Preview tab, it is possible to see exactly how your image is being edited. And at the bottom of the window, the final file size. This is really important. I strongly recommend to play around with the values in the Selective Quality input. 100% is always perfect, but 80% is also good and it makes a huge difference in the final file size. Once you get to the optimal point where you have a great image with the lowest file size possible, export your file.

Optimize images for a website

6. Once you finish setting the parameters up, go to File > Export to save your JPEG.

Optimize images for a website

7. Our final result. Isn’t that bad!

Optimize images for a website

Now, let’s compare both images at the same time : the original and our example. Do you see a big difference?

Optimize images for a website

Not at first glance. right? but what if we compare the file size of both files…

Optimize images for a website

Voilà! Now you see what happens. Well, imagine this example but consider when you have 20,30, or 40 images in a site. Can you see how this will impact your page load times?

Maybe this is just another and sometimes annoying thing you need to consider when uploading content to your server. More than once, I wish I could export everything from Photoshop but here you can see that in some situations, the easiest route is not always the best solution.

The time a page takes to load isn’t a small thing; sometimes it determines if the user stays on the site or abandons the site and goes somewhere else. So, in other words, sometimes it is worthwhile investing some extra time to optimize your site images and content so that visitors will stay on your site.

That’s my little secret. What process do you follow to reduce your file sizes?

Note: This article applies to Bitmap images only. If you intend to work with 2D vectors, we recommend to opt for SVG format; it is lighter than a PNG, you can scale it, apply CSS and JS animations and, because it is XML, Google will find it.

Keep in mind that if you want to speed up your website load times, images file sizes are not the only problem. It is important to remember that a lot of javascript, css, and html files generate a lot of server requests and can increase load times. Everything has to be optimized for your site performance, but this post will help you optimize images for your site.

Tags: , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *


− 3 = zero

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>