fbpx

Better Speed And SEO With Image Optimization

Better Speed And SEO With Image Optimization 860 534 mdesigners
MDesigners-mdjournal-image-optimization-image1


WEB DESIGN


Better Speed And SEO With Image Optimization

In a world where everything moves fast, how long would you wait for a page to load before you closed the window? Unless you had a burning desire to see its content, it wouldn’t be more than 3-4 seconds. Speed is one of the many elements that the bad use of images can affect a website. For that reason, optimizing any image that is used on any website is necessary. Let’s see what optimizing means and why it is of utmost importance.

The right file format JPEG/PNG

This might seem simple but if not chosen correctly the file format might have a negative effect on your website’s overall performance. The two most common file formats are JPEG and PNG.

JPEGs have a wider use and are ideal for photographs, banners on the homepage, to portray products, and generally, for the most uses, a picture can have on a website. Their advantage is that they allow gradation of quality from low to very high, so one can find a balance between quality and image size.

PNGs on the other hand, don’t have this advantage, which, combined with the limited color palette they offer, makes them a bad choice for photography or pictures with many elements on them. Where PNGs are extremely useful is logos due to the “transparency” element, meaning they have a transparent background, so they can go on top of any color or picture.

By knowing the properties of each file format, you can choose which is more appropriate for the way you want to use the image and, at the same time, secure a picture of good quality at the smallest size possible. This leads us to our next point.

Small image size for great speed

The file size, meaning the MB or KB and the dimensions of the pictures that are imported on a website can dramatically affect its loading time. By saying pictures we mean photographs, logos, icons and pretty much anything that is uploaded in JPEG or PNG form. All together, they compose a quite large total and it’s becoming obvious why each image needs to have the smallest size possible, ideally less than 100KB.

If you don’t wish to lose visitors due to slow speed, each image also needs to be “saved for web”, a function that is available in tools such as AdobePhotoshop and ensures the smallest possible size. There are also simpler and free tools for the same result, such as Canva, PicMonkey and PIXLR.

The role of image optimization in SEO

Images are part of the content of a webpage. In the same way that the search engines read key words in a text and can bring the website higher in the list of results, they also read keywords that have been used on the imported files.

In plain words, this means that if a picture has been imported with the file title “image259-2020” it’s very unlikely that it will show up in the results of a Google search, as (probably) no one will look up something by typing “image259-2020”. If, however, your files’ title contain keywords relevant to your product or service or your website’s name or, even better, a real description of what is shown in the picture, the chances of your picture appearing in the search results go up and that can only mean one thing: traffic.

In the same way, another important element of imported pictures can bring traffic to your website, the so called “alt (alternate) attribute”. If a search engine cannot display the image, for instance, due to slow connection, it will need an alternative way to explain what is shown in the picture. By adding key words in the alt attribute, once again, the odds of your website to appear get better and you get traffic without any toil or money.

It goes without saying that a website’s performance and how high it scores in search engines depend on much more. However, these are a few basic steps that everyone who handles content on a website should know.

At MDesigners we believe in open communication between prospect clients and designers, aiming at creating visual identities and experiences that will move and inspire their audience.

Mdesigners-Logo
MDesigners

We are MDesigners. A digital design & branding studio. We think, design and create projects like the corporate identity of a brand, the usability of an application, a website or software.


Found it interesting?
Share the article!

We’ll send you every month a newsletter full of inspiration.
Mdesigners-close-button

Privacy Preferences

When you visit our website, it may store information through your browser from specific services, usually in the form of cookies. Here you can change your Privacy preferences. It is worth noting that blocking some types of cookies may impact your experience on our website and the services we are able to offer.

For performance and security reasons we use Cloudflare
required
Cloudflare uses the _cflb, _cf_bm, and _cfduid, cookies to maximize network resources, manage traffic, and protect our Customers’ sites from malicious traffic.

 

Click to enable/disable custom content.
Click to enable/disable Google Analytics tracking code.
Google Analytics is a tool that helps website owners measure how users interact with website content. As a user navigates between web pages, Google Analytics provides website owners JavaScript tags (libraries) to record information about the page a user has seen, for example, the URL of the page. The Google Analytics JavaScript libraries use HTTP Cookies to "remember" what a user has done on previous pages/interactions with the website.

 

Click to enable/disable Google Fonts.
Google Fonts logs records of the CSS and the font file requests, and access to this data is kept secure. Aggregate usage numbers track how popular font families are, and are published on our analytics page. We use data from Google’s web crawler to detect which websites use Google fonts. This data is published and accessible in the Google Fonts BigQuery database. To learn more about the information Google collects and how it is used and secured, see Google's Privacy Policy.

 

Click to enable/disable Google Maps.

For users of Maps Embed API, Google uses anonymous cookies to determine the number of unique users of the API. Google also accumulates statistics about the types of features used from the Maps product.

Click to enable/disable video embeds.
Video providers (e.g. YouTube, Vimeo) can collect user data and record information that helps measure how users interact with site content. By enabling video embeddings you agree to the terms of use stated by each provider in their privacy policy.

We and our partners use technologies such as cookies, and we process personal data, such as IP addresses and cookie identifiers, to tailor ads and content to your interests, to measure the performance of your ads and content, and to gain in-depth knowledge of the audience that saw the ads and the content. Click below to agree to the use of this technology and the processing of your personal data for these purposes. You can change your mind and change your consent options at any time by returning to this site.