fbpx
MENU
800-590-6985

5 Tips for Optimizing Your Website Images

5 Tips for Optimizing Your Website Images

By Forward Web 19 April, 2016

 

Optimizing your website images is essential for the success of your website. If you have ever wondered why your product photos never show up when you do a Google image search, what the difference between a JPEG, GIF and PNG is or if you are supposed to add “Alt Tags” to your images, then you have come to the right place!

What is image optimization? And why is it important? Image optimization consists of using the most compressed (smallest file size) yet visually acceptable image in the proper file format for the specific role of the image.

 

 

In this article you will learn more about the importance of optimization as Forward Web provides 5 tips for optimizing your website images:

 

Tip #1: Reduce the File Sizes of Your Images:

Why is this relevant? Well, considering that most customers wait about 3 seconds for a website to load on a desktop or laptop (about 5 seconds on their mobile device), if you have images that take over 15 seconds to load, you can basically say goodbye to that prospective customer. Also, Google uses page load time as a factor in their ranking algorithm.

What can you do? Your website load time is affected by the size of your files, especially with images. The larger the file size, the longer it will take for the webpage to load. Therefore, if you can decrease the size of the image files on your webpage and increase page load speed, less people who visit your site will click away. One way you can reduce image file size is by using the “Save for Web” command in Adobe Photoshop. You want to adjust the image to the lowest file size acceptable while maintaining the quality of the image when using this command.

If you don’t have Adobe Photoshop, there are many online tools you can use for image editing as an alternative. Adobe even has an online image editing application at photoshop.com. This online tool does not have all of the capabilities of the desktop version of Adobe Photoshop but it does cover all of the basics of image editing and doesn’t cost an arm and a leg.

Other alternate (but impressive) online image editing tools are:

  • Pixlr which is very user friendly and even comes with a 100% free app for your smartphone;
  • PicMonkey which has been described by the experts as a “staggeringly great photo editing tool”;
  • FotoFlexer which is another fairly advanced online image editor (it even allows you to work with layers!);
  • GIMP which is an open-source, free image editing software application that cab be run on Windows, Mac or Linux and can do everything that Photoshop can do.

As you can see there are several useful online image editing tools available!

 

 

Tip #2: Name Your Images As Simply and Descriptive as Possible:

It is really easy to develop the (bad) habit of going through hundreds of product shots and keeping the default file name your camera gives them. Although you might think this isn’t a big deal, this is actually very harmful because when it comes to SEO (search engine optimization), it is important to use acceptable keywords to help your website rank on search engines.

It is absolutely critical to create descriptive, keyword-rich file names for image optimization and keep in mind that search engines not only crawl the text on your webpage, they also search for keywords within your image file names. Understanding the importance of naming files for your website images is worth the effort, as it can surely increase your on-page SEO and help your website and images rank highly.

Looking at your websites analytics to see what phrasing patterns your customers use to perform searches is another aspect you can consider. Determine the most common naming patterns used and apply that formula to your image naming process for maximum results.

 

 

Tip #3: Optimize Your Alt Tags Intelligently

Alt tags are a text alternative to images when a browser cannot properly render them. Depending on your browser settings, even when the image is rendered, you can see the alt tag text created for that image if you hover over it with your mouse pointer.

The alt attribute adds SEO value to your website as well. Your website can achieve better rankings in the search engines by associating keywords with images when you add appropriate alt tags to the images on your website. In fact, using alt tags is probably the best way for your ecommerce products to show up in Google image and web search.

To understand this concept better, let’s explore the source code of an alt tag (keep in mind that when it comes to image optimization, filling out each alt tag for each product image on your site is the highest priority). The following are some of the basic rules when it comes to alt tags:

  • Do not keyword stuff your alt tags
  • If you sell products that have model numbers or serial numbers, use them in your alt tag.
  • Do not use alt tags for decorative images because search engines may penalize you for over-optimization.
  • Describe your images in the simplest for possible, just like you do for your image file names.

As a final thought, always do a sanity check of your website and view the source of your webpages to make sure your alt tags are filled out.

 

Tip #4: Strategize Your Product Angles and Image Dimensions

Displaying multiple angles of your products is a common trend these days. It makes sense, if you’re trying to sell a product, you don’t want to show just one side of the product; the more shots you have of your product, the better the odds you have of selling it.

With that in mind, the best way to capitalize on these extra photos is to fill out your alt tags and you can do this by creating unique alt tags for each product shot. The key is to add descriptions to your base alt tag so that potential searchers land on your website. If this seems redundant, it is totally worth the extra effort because Google will reward you with many hungry searchers.

A word of advice: Be careful when using larger images because although they are a great user experience enhancement, they can however, increase your page load time because of the larger file size associated with the large image. Whatever you do, do not place the largest image on your page and simply shrink the dimensions via the source code. Instead, you can make the image smaller and provide the option to view a larger image in a pop-up or display it on a separate webpage.

 

 

Tip #5: Be Cautious of Your Decorative Images

It is not uncommon for websites to have an assortment of decorative images (basically anything non-product related can be considered a decorative image) such as buttons, borders and/or background images. Decorative images can add aesthetic appeal to a webpage but this oftentimes results in a large combined file size and slow load times. Consequently, it would be wise to consider taking a closer look at the decorative images used so that they do not impair your website’s ability to perform at it’s full potential and convert visitors into customers.

Make sure to check the file sizes of the decorative images on your web pages. You can use a template that minimizes file sizes for all or most of the pages on your website. Another method you can use to reduce to decrease the file size substantially is to cut out the middle of the background image, and make it a flat color or transparent.

Review the following tips to cut down the file size of your decorative images:

  • Pay attention to large wallpaper-style background images because those can be huge files. We recommend that you shrink them down as much as possible without depleting the quality of the image.
  • You can create great looking images that make up simple patterns or borders by using PNG-8 or GIFs (making them only a few hundred bytes big!).
  • Use CSS to create colored areas instead of using images whenever possible and use CSS styling to replace any decorative images.

 

 

From the information provided in this article, it is easy to conclude that the optimization of your website images is in fact, very relevant to the success of your website. We learn that there are two extensive reasons for image optimization: download time and bandwidth used. Optimization is definitely an art that you want to master! For more information or if you have any questions about the material covered in this article, please contact Forward Web.

 

 

Optimizing Your Website Images

FORWARD WEB CORE

Meet our core team members.

blank

Fernando D. Alfaro

FOUNDER / LEAD DEV

blank

Fernando D. Alfaro

FOUNDER / LEAD DEV

Husband, Brother, Son, Friend, father to our son Amadeus and various fur-babies, oh and business owner/entrepreneur.

What I love most about what we do here at Forward Web is the problem solving component. The internet is always changing and everything can always be improved (which keeps things exciting for me). My goal here at Forward Web is to create the most efficient web platforms possible, empowering the end user to either spend less time on the internet or to solve some form of inefficiencies that exist within the business through the web (think automation, but not necessarily limited to automation).

I have a deep fascination with A.I (Artificial Intelligence) and decentralized platforms. However outside of the internet I enjoy listening to music, working on various side projects and boxing (yes, boxing).

blank

Julia Alfaro

Creative / Accounts

blank

Julia Alfaro

Creative / Accounts

Helping people has always been a passion of mine. People are interesting to me. In fact, I believe that everyone is like a book because we all have a story to tell. I gain great satisfaction in knowing that I am able to make someone’s day, life or business a little better, even if it’s just by sharing a smile or a little positivity.

I strive to be a professional woman, I take pride in that. I am very hardworking, kind, intelligent and ambitious. I am a dreamer; I have very high hopes, dreams and goals. I am talented, creative and funny, with a great imagination! I am not perfect, I accept that, but I do tend to be a perfectionist (that can sometimes be a good thing or a bad thing). But in reality, I am a work in progress and I am learning to live life one day at a time.

blank

Branden Tobin

Customer Relations

blank

Branden Tobin

Customer Relations

Branden spent 7 years in the gaming industry as a quality assurance specialist and product design consultant. After becoming a
customer at Forward Web in 2013 and experiencing the great services and company values first hand. When the opportunity came up to help improve client experiences at Forward Web, Branden did not hesitate to get involved. “My goal is to help people, and in terms of the web, Forward web is the best place for me to do that”.

blank

Ankur Kavathiya

Project Manager

blank

Ankur Kavathiya

Project Manager

With a vast knowledge in IOS/Android app development, as well as various web applications. My experience allows me to ensure projects at Forward Web are on-time, as well as meeting various Quality Assurance checks.

blank

Ramani Chintan

Back-End Dev

blank

Ramani Chintan

Back-End Dev

I have over 6 years experience in web development. With Forward Web I primarily work on back-end development which includes the customization of various CMS or Shopping Cart platforms like Magento where I am able to use my experience and knowledge in PHP, JQuery and other relevant languages.

When im not working on projects with Forward Web, I enjoy spending time with my lovely wife Nidhi, married on 3/13/2019

.

blank

Nevin Davis

Systems

blank

Nevin Davis

Systems

I have a degree  in Computer Science and Engineering. I’m a redhat certified engineer with 8 years of experience as a server administrator. I’ve been working with Forward Web for close to 4 years now and I am primarily responsible for the securing and optimization of our network as well as general management of our dedicated servers.

blank

Franny Kenney

Media Specialist

blank

Franny Kenney

Media Specialist

California’s Central Valley based photographer; Frances (Franny) Kenney completed her Associate degree in Photography at Modesto Junior College in 2017. She is currently pursuing her bachelor’s degree in photography at California State University Sacramento and is on track to graduate in May of 2021. Franny is a licensed commercial drone operator. She is highly motivated and has a strong work ethic. Over the past three years Franny has been working and volunteering as a lab technician at the photo lab on the Modesto Junior College campus.

blank

Brandon Miltsch

Advisor

blank

Brandon Miltsch

Advisor

During my 15+ year marketing and sales career, I have gained unique expertise and achieved significant accomplishments for leadership brands in the technology and communications industries.

With a solid Oracle track record with both the Social and Marketing Cloud – along with over 15 years of digital agency experience and a successful sales record at NTT/Verio – BrandON brings a strong mix of expertise and business development skills to the Oracle team. BrandON has also been thrilled to speak at several engagements monthly internally and externally, further illustrating his passion and desire for Oracle executives to optimize and promote their “personal brands”, teaching Social Media and Networking skills. Outside of work, Brandon enjoys spending time with his wife Christina and their 5-year old son, Riley. He is also excited to announce the release his new book, Networking on üBER Steroids.

Contact FORWARD WEB

blank
Office Hours (Appointment Only)
Monday through Friday from: 8:30am-5:30pm