Optimizing web images is about producing high quality images in the right format, dimensions, size and resolution by reducing the task of the image without compromising on quality. Image optimization can be done in a number of ways, whether by resizing images, saving them to your computer, or compressing the size for optimal use.
What are the benefits of image optimization
The importance of images to connect users to your products is well established. Indeed, if the loading of your website lasts more than 3 seconds, it is much more likely that the users leave your website, which will considerably increase your bounce rate and will eventually affect your conversions.
Did you know that optimizing your images can boost your ranking on Google? Optimizing your images means optimizing your user journey. A satisfied user allows you to reach your goals faster!
Loading pages speed
The page loading speed is the time required for a full web page to be displayed. Websites with less than 2 seconds of loading speed are the ones that convert best. Thus, if you optimize 50% of the weight of your images for example, you will improve the loading speed of your website by the same rate, a decisive element in your SEO strategy.
SEO ranking improvement
While the numbers aren't exactly official, Google said that every day hundreds of millions of people use Google Images to discover and visually explore web content. According to Moz, image search accounts for 27% of all queries generated by the top 10 US web search sources. In fact, about a year ago, Google changed the "View Image" button from Image Search to "Visit [Page]". As a result, analytics platforms have started to see an increase in the number of image-specific sessions and increased visibility of host page content (instead of contextless random image files). In addition to content and improving the user experience, images are again an important source of traffic and should not be overlooked.
Storage gain
No less negligible details, the storage space. Indeed, a host is provided with a well-defined storage space. Who says storage says limitation! To make the best use of your hosting space, compressing your images will allow you to gain speed but also to save money over time. Thus, optimized images allow not to clutter your host but also to upload more content to your website.
How to optimize your images?
For a convincing result, it is necessary to adopt good habits in order to offer your site the best chances of achieving your online objectives and of making yourself known. Between the importance of exporting your images.
Well exporting your images
Saving for the web in Photoshop helps balance the quality and weight of the image. A resolution of 72 DPI keeps all the quality of the image.
There are different image formats, each has its specificities and advantages that you should take into account when you export your images. It is essential to select the right format for optimal use on the platform you have chosen.
GIF (.gif)
GIF or Graphics Interchange Format files are widely used for web graphics, as they are limited to 256 colors, can provide transparency, and can be animated. GIF files are generally small and are very portable.
- Compression : Lossless - lossless compression
- Ideal for : Web Images
- Special attributes : can be animated, can record transparency
Learn more about GIF file types.
PNG (.png)
PNG or Portable Network Graphics are a lossless image format originally designed to enhance and replace the gif format. PNG files can handle up to 16 million colors, unlike the 256 colors supported by GIF.
- Compression : Lossless - lossless compression
- Ideal for : Web Images
- Special attributes : Save transparency
Learn more about PNG file types.
JPEG (.jpg, .jpeg)
JPEG, which stands for "Joint Photographic Experts Groups", is a "lossy" format, which means that the image is compressed to create a smaller file. Compression creates a loss of quality, but this loss is generally not noticeable. JPEG files are very common on the Internet and JPEG is a common format for digital cameras, making it ideal for web use and unprofessional printing.
- Compression : loss - some file information is compressed or lost
- Ideal for : Web images, Non-professional printing, E-mail,
- Special attributes : PowerPoint: Ability to choose the compression level when saving in image processing programs such as Adobe Photoshop or GIMP.
Learn more about JPEG file types.
Well naming your images
Name and correctly describe the images for referencing
One of the simplest and often overlooked optimization possibilities is the very name of the image files. These should use a few carefully chosen keywords - ideally, the keywords for which the image could rank - omitting the stop words (a, the, in, of, etc.) and separating the words - keys with hyphens (for example, IMG-458752.jpg would become brooklyn -bridge-night.jpg).
The alt and title attributes of the image (of the HTML <img> tag) are the simplest settings: they not only help the images to rank higher in the search, but also increase the relevance of the page and improve user experience. In the case of image links, these attributes also provide context to the search engines regarding the landing page, which makes it easier to rank. Unlike file names, write these attributes in a grammatically consistent and concise manner: alt attributes are played aloud by accessibility software, screen readers and title attributes appear when visitors hover over images.
For e-commerce and product images, it's often a good idea to also add SKUs, ISBNs or model numbers to alt attributes, as we sometimes look for very specific products. Note that the captions of the images on the page and the keywords in the surrounding text box also help search engines to get more context for the images and improve their ranking.
Note that the HTML title tags of the host page are also displayed in the image search results. You should therefore make sure that these are as relevant as possible to the image (see screenshot above).
Optimization tools
It's nice to say that you have to optimize your images ... But how? Don't worry, here are some tools that can do the job for you. Try them to find the one that suits you ;-)
WP SMUSH is a WordPress plugin that allows you to optimize images without losing quality. Install it on your CMS to see what it's capable of :-)
Advantages
- Very easy to use: the plugin is very suitable for beginners to improve the performance of their website
Multi-function: it allows you to resize, optimize, and compress all your images just by uploading them to your site
Mass Processing: For your older images, you can go to Media > WP Smush to process 50 images at a time.
100% free!
Good to know...
- Not the best of the market: the performance obtained with this plugin is not as important as the one you can get with other methods. For example, if you upload a 3MB photo to your WordPress site, WP Smush will reduce it by 10% to 20% without loss of quality. It will still 2.4 to 2.7 MB of file, which is still huge.
- No control over the optimization degree: the software acts alone and is responsible for making decisions about the importance of optimizing the image.
Imagify
Imagify is one of the best WordPress Image compression plugins from WP Media. It is fast and easy to set up and optimizes image formats such as JPEG, PNG, GIF.
To use Imagify, you have 2 solutions:
- Download the Wordpress plugin for free to integrate directly into your CMS
- Create an account on their website to obtain an API key that you can integrate into your custom development.
Advantages
- Automatic: the plugin optimizes the images automatically when uploading
- Mass Processing: Its mass optimization feature allows you to compress all previously uploaded images.
- 3 optimization levels: you can adapt the optimization according to your needs. There are 3 optimization levels possible:
- Normal: lossless optimization and no visible change but with less weight reduction.
- Aggressive: optimization with a very slight loss of quality invisible to the naked eye with a very significant reduction in weight.
- Ultra: optimization with a strong reduction of weight of the images but a slight deterioration of the quality.
- Usable without downloading: to optimize images of less than 2Mo, you can import them directly on their site by clicking here.
Good to know...
- Not easy for beginners: if you don't have Wordpress, using an API key will probably require you to call a specialist to set it up on your CMS.
- Free Subscription: You will get 25 MB of data per month for compression.
- Paid Package: If you need more resources, you can subscribe to their paid plan starting at $ 4.99 / month for 1GB of data.
EWWW
EWWW is a Wordpress plugin that offers optimization in all formats (JPG, PNG, GIF and PDF). There are also options for lossy and lossless compression, which results in very satisfactory results.
Advantages
- No limit: EWWW has no limit on the files size or the number of images downloaded.
- Free version: It performs optimizations on your own web server, while all other tools use external servers.
- Secure: the plugin has a strict privacy policy
Good to know...
- No mass processing: EWWW can put a strain on your server if you optimize multiple images at once.
- Rudimentary and technical interface: even if the extension does what it is asked to do, it remains rather difficult to use as for its interface rather rudimentary and technical.
Photoshop
For those who like to do the work manually, nothing like Photoshop to help you optimize your images. Open your image in the software, click File > Export > Save for web. The window that opens allows you to choose your format. Most of the time, you will choose the JPEG format (choose the maximum quality). After changing the size of the image, you just have to save it and you're done!
Advantages
- No limit: we do not say that you can do everything, but ... In fact though, everything is possible with the software from the moment we know a minimum handle it. You can even do minor alterations if necessary.
- Very well documented: there are many tutorials and help manuals to help you use it.
Good to know...
- Not free: For a photography package, the foreground is $ 9.99 / month for a 20GB storage space (it includes Photoshop and Lightroom software). If you want more space, one Adobe software costs $ 20.99 / month with 100GB of space.
- Quite technical: even if the software is quite intuitive when you are used to software of this type, it still requires a minimum of knowledge.
You know everything!
Put lots of images on its website is a very good idea, provided you respect the few rules to not impact the performance of your site:
- Work on your images before importing them to the right size and format
- Export your images especially for the web (in 72 dpi) to reduce the weight while maintaining the quality
- Don't forget to associate them with an alt tag and a title tag
- To verify that your images are properly tagged, use a crawler tool that will scan your site to help maximize your optimization.
Need help to optimize your website? Come and tell us about your project, we will be happy to help you bring your site to the maximum of its performance!
Image banks and the royalty free
Did you know that there are image banks to help beautify your site and your publications? But beware, these images are sometimes subject to copyright and the rules of the free right. You are told everything in these articles: