Request a budget

Web: How to optimize images for your design?

Either if you are in charge of updating a website with new content (texts and images) or you want to learn more about the subject, you need to know how to reduce the weight of the graphics that you are going to upload so that in general the page is the most optimized as possible and easy to navigate. If, on the other hand, you are looking for web design in Seville, it is also important that you know how you can optimize the images that are going to be used in web design. Is there a difference between image formats? What are the most common? Keep reading!

Why should I worry about the weight of images nowadays?

You may be wondering why you should worry about the weight of the images for a blog or website if today we have broadband and the internet, in many parts of the world, is quite fast. Well, there are 3 simple reasons to do it:

1. Mobile navigation: Lots of people surf the web from their mobile and it is a figure that will most likely continue to increase. For this reason, if our site has optimized images, it will load completely faster and users will have a better experience.

2. Lower bounce rate: A slow and heavy website will cause many to get bored and lose patience to wait for content to load. This will result in a high bounce rate, loss of leads, and bounces.

3. SEO positioning: The less your website weighs, the better for search engine rankings. Google has limited times to crawl the web and therefore the lighter it is, the more pages it can crawl, which will give a greater chance of positioning in the results.

How to optimize my images?

Before performing any optimization, we recommend that you carry out a speed test on your website so that you know with greater security what impact the images have on your website at this time. There are many free sites on the internet with which you can do this check. For example: Google PageSpeed Insights, Pingdom Tools, GTMetrix and WebPageTest.

These tools will tell you if you have very heavy images on your website and how long it takes to load it. If the diagnosis is that you have to improve your graphs then you can check a few things. Let's start with the format of the images.

We have the .GIF that is only used today to make animated images, but the rest is an obsolete format. On the other hand .PNG is great because it supports transparencies and is a lossless image format, but it doesn't reduce the size as much as JPG is. The latter is ideal for photos that have a lot of detail and color and is a lossy compression format. In other words, quality may be lost if the file size is reduced.

So, the ideal is to use PNG for everything except for photographs and if possible vector formats such as .EPS or .SVG.

Optimize images easily in Adobe Photoshop

If you are looking for or doing web design, these tips will help you. For those with Adobe Photoshop, they can choose to save the images using the "Save for web" option. Then you can select the desired format, either GIF, JPG or PNG. In addition, the program allows you to choose the level of quality.

However, there are other free, cloud-based image compression options. For example, TinyPNG It is a very popular one where you upload your images and the tool compresses them between 50% and 80% maintaining the quality.

If you feel that you don't understand anything and that this is too complicated for you, don't worry! You can contact designers who are experts in the field who will optimize the images on your website two by three and thus improve its performance on the web.

We invite you to take a tour of our blog if you have not done it yet so that you can enjoy other articles of interest. And, if you want help with the design and optimization of your website,you can contact us!