One of the main causes of slowness on websites and applications is the inappropriate use of images. Learn how to optimize images for the web, make them powerful allied to search engines and contribute to a higher permanence rate.
Understanding the basics of compression, image quality and advantages in using each type of image allows us to make better choices. This can mean better quality images and faster loading speed.
What is optimizing an image?
An optimized image means that it has high performance, that is:
- High quality of file format;
- Ideally sized file size – uses the lowest possible safe value.
Why optimize images for the web?
From reports made on thousands of sites, they found that the ideal time to load a site is a maximum of 3 seconds. Lack of patience or not, what the study points out is that more than half of the visitors give up if the interval is longer than that. In addition, optimized images:
- Enhance the user experience;
- Reduce the user’s early abandonment;
- Allow the visitor to go deeper and visit more pages of the site;
- They improve their ranking, their position in search engines – more chances compared to competitors, without costs.
Common mistakes made when choosing the file type:
- Inappropriate size – large images in height and width;
- Inappropriate format – each format has a better use in a given situation;
- Heavy images – excess KB;
- Less storage and bandwidth – possible savings in hosting and CDN (Content Delivery Network);
- Faster backups of website content.
Optimizing images for web
You can optimize the original image using graphics software, website, computer utility or plug-in.
Using Photoshop
- Open the image in Photoshop;
- “File” menu> “Save for Web”;
- In the dialog box, choose the JPEG option and one of the quality options;
- You can click on “Preview” to see how the image looked and click on “Save” to confirm.
Using GIMP
- Open the image in GIMP;
- File menu> Export as;
- In the dialog box, name the file and click “Export”.
Using Affinity Photo
- Open the image in Affinity Photo;
- “File”> “Export” menu;
- In the dialog box, choose the JPEG option;
- Reduce the image quality to around 80%;
- At the bottom of the export box, click on “More” and select “Progressive”;
- Uncheck “Embed ICC Profile” and “Embed Metadata”;
- Click “Close”.
Removing the metadata attached to the image will eliminate what is not needed for the web, making the image lighter.
Some suggestions for measures:
- Large banners: 1200px – 1400px;
- Images that are half of the web page and beyond the content: from 600px to 800px;
- Smaller images and thumbnails: from 250px to 450 px.
Using the TinyPNG/TinyJPG website
Both are free applications that use an intelligent compression technique with some loss when reducing the size of PNG and JPG files, respectively.
- Visit the TinyPNG/TinyJPG website;
- Upload or simply drag and drop the images in the indicated box;
- After the compression is finished, download the files.
They also have an extension for Photoshop that combines the best of TinyPNG and TinyJPG within Photoshop.
Using the JPEG Mini website
It uses lossless compression technology, which significantly reduces the size of images, without affecting quality and with real-time comparison of the quality of your original image and the compressed image.
You can use the web version for free or purchase the program for your computer. They also have a paid API to automate the process for your server.
Using the ImageOptim utility (iOS) or Trimage (Windows)
For those who prefer to use utilities, both allow compression without loss of quality, seeking better compression parameters when removing unnecessary color profiles.
Using image optimization plugins for WordPress
If you have a website with multiple authors and need an automated solution, you can try out a WordPress image compression plugin. Using any of these will help you speed up your website.
- Optimiole – popular plugin by the team behind ThemeIsle;
- EWWW Image Optimizer – allows you to optimize images automatically when downloading older images, with the advantage of optimizing images generated by other WordPress plugins and stored outside your media library.
- Compress JPG & PNG images – TinyPNG team plugin. Requires creating an account and has a limit of 100 optimized photos per month, in the free account;
- Imagify – WP Rocket plugin. Compresses images, based on algorithms. Restores images from the gallery automatically when uninstalled.
- ShortPixel – timizes the images as soon as the plugin is activated and stores the original images in a separate folder. The free account only allows 100 images per month;
- Smush – detects images that are larger than the space in which it is being used. The plugin highlights the image on the website so that it is optimized for the exact size and can optimize several images simultaneously;
- reSmush.it – allows you to optimize images automatically during download and offers an option to optimize older images. If you are not looking for very flexible image compression options, it offers the best performance, making a real difference in file size.
With information: hobo and wpbeginner