How to optimize images for your web projects

How to optimize images for your web projects

Home < Blog < Tips < How to optimize images for your web projects

May 31, 2020

Do your web pages or files get too heavy when you want to use your images? We will see how to lose their weight without losing much quality.

I think that more than one person has happened that when using images in a report it increases a lot of weight and there are only a few pages, reaching more than 5 MB causing problems in some emails from companies that do not allow attachments of such weight. Or also when one commissions a Web Designer or Agency to create a website one realizes a problem, when seeing certain pages with JPG or PNG images they take a lot of time to load, for example 7 or more seconds, and when one is asked they answer: "It is the image that passed me"...

One option is to decrease its size... But that can distort what you want to show. The other, recommended in several web pages, is to change in an image editing software certain settings and quality, etc, etc, etc. Between us, they are CHEAP SOLUTIONS and that can take us time on something that can be as easy as drag and drop, but let's start with the basics.

Image file types

There are 4 most commonly used file types:

  1. JPG or jpeg, which stands for Joint Photographic Experts Group, uses compression of image data into pixels or bitmaps.
  2. PNG, stands for Portable Network Graphics, supports transparency and very good quality because it does not compress, but it is heavier than a JPG or GIF file.
  3. SVG, stands for Scalable Vector Graphics, which corresponds to a two-dimensional vector image that is not affected when resized.
  4. GIF, stands for Graphics Interchange Format, used for many years, it uses a palette of 256 colors, uses transparency and animations, of very low weight.

There are more formats but in terms of web pages and files they are the most used. Like everything in life, each type of file has its advantages and disadvantages.

It may be trivial or simple the question What type of image file to use? According to the experience of many, and also personal, only 3 types of files are used:

JPG

Used to display a photograph or image that does not require the use of transparency. But you must be careful that if you want to edit it, it should be as big as possible, and then reduced to the size to be used.

PNG

If I want to show an image with transparency I use this format. I must emphasize that it is a format very used for logo, although for me erroneously since in some moment it will be seen pixeled (or with mosaics) when increasing the zoom of the document or web site where it is, but this has solution using SVG.

SVG

Ideal for logos, icons or diagrams. As indicated above, SVG is a lightweight vector drawing format, reflecting quality without pixelation or mosaics no matter what zoom is used. This type of file DOES NOT REQUIRE OPTIMIZATION. See the following example using the SiERRA eStudio logo in PNG version (on the left) and SVG version (on the right).


OFF-LINE image optimizers

There are software alternatives that optimize images that can be downloaded to the computer, but that in general require configuration and testing many times to obtain what is required, but when compared to web software alternatives (or web application) the resulting quality is lower.... and also the weight of the image file.

ON-LINE image optimizers

There are many web alternatives to optimize JPG or PNG images, but the one that gives the best results in QUALITY and WEIGHT is Optimizilla, and its advantages are:

  1. 100% Free.
  2. No matter the weight of the image, some require the file to weigh less than 1 MB.
  3. It is in multiple languages.
  4. Simple to use, just drag the file where indicated and then click on download.
  5. Secure website, with SSL Certificate.

For example see the following image, it shows the ORIGINAL and COMPRESSED (optimized) version but the only important difference is that on the right (optimized) it has more grains or points (almost imperceptible) PNG images, but the one that gives the best results in QUALITY and WEIGHT is Optimizilla, and its advantages are:


If you want to try, click on the next button:

Visit Optimizilla

Well, I hope this tip was clear and useful. Do you know of any other software or web application for optimizing quality JPG and PNG images?


What do you think?

Talk

Name (*)

Mail (*)

Country (*)

Message (*)

(*) Required




Newsletter:

Subscribe FREE to our emails to receive regular updates, offers, exclusive discounts and great FREE content.