Design+Code logo

Quick links

Suggested search

What’s behind a search engine?

Search engines use sophisticated and unique series of algorithms to return the best and most relevant results for any given term in a fraction of a second. According to Google’s documentation, these algorithms look at many factors such as the wording of your search query, relevance, freshness of content, UX, domain authority, location and settings. 2

SEO Main Benefits

An efficient SEO strategy will help you rank higher in search engine results pages - also known as SERP - increasing the quality and the quantity of traffic. The organic traffic you get from your SEO efforts is free, consistent once you reach in the top results, and targeted. People who land up on your page are already interested in the content you offer, therefore your **will have a bigger chance to **increase conversion rate. 3

How To Implement an Effective SEO Strategy

The main pillars for a successful SEO strategy are:

  • Keyword Research: understand what your audience wants to find, using tools like Keywords Google Planner, Ahrefs, Semrush. 4
  • On-Page SEO: optimize your written content for users and search engines (title tags, content, alt-tags, UX, internal links and URLs.)
  • Technical SEO: optimize your website for crawling and indexing. 5
  • Link Building: to earn trust and authority with search engines, you'll need other credible sources linking to your pages. This will make Google trust your website more and help you rank higher.

Exercise: Optimize Images for SEO

Image optimization will help you fully optimize an image for search engines, helping you increase your ranking and speed up page loading, which is crucial for UX.

Scale your images

Images with a higher resolution and large pixel dimensions slow down your page loading time. That’s why you need to resize your images to be in line with your site's max-width dimensions. Let’s say we need to scale down this image to 720px in width. 6

We’ll use a free tool, Adobe Photoshop Express.

Name your images

You need to name your file with a relevant short title that contains your target keyword. Let’s say we want to optimize for “paleo pancake recipe”. The name of the image should contain our keyword like this: “paleo-pancake-recipe”. Use hyphens to separate the words. 7

Choose the right file type

For photos or illustrations, it’s recommended to use .jpeg because it will give you a smaller file size. If your image has transparent background, use .png. For logos and icons, always use SVGs. In our case, we’ll use jpeg. 8

Reduce file size

You also need to make sure the file size is not too big. You can use paid tools or any free tools like Impageoptim or Optimizilla to compress your images. If you use WordPress, try the Smush plugin. 9

Use descriptive alt text

The "Alt tag" is crucial to image optimization and ensuring that a descriptive text will appear in case the image can’t be loaded. It’s also important for visually impaired people that use screen readers. Be descriptive and specific. Example: ”Plate of fluffy pancakes topped with fresh blueberries, raspberries and powdered sugar.” 10

Conclusion

Here you go! Now you know how to optimize your images for a better page speed, better UX and better rankings. If you want to stand out from the competition, implementing an SEO strategy is something that you should definitely do.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Wireframing

READ NEXT

Readability and Legibility

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Assets

Videos

ePub

Meet the instructor

We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.

Mica Andreea

Product Illustrator • UX

An always- curious, unrested mind, seeking to understand the human behaviour, interested in behaviour biology, human-centered design, anthropology and science in general

icon