![\"image](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/image-optimzation-and-SEO.jpg\")
Search engine optimization (SEO) is an exciting topic for website owners. Image optimization, on the other hand, is often overlooked and misunderstood. But they actually have a very close relationship. In fact, they could be considered a pixel perfect match.<\/p>\n
What is a pixel?\u00a0<\/strong>Computer\u00a0monitors display images\u00a0by dividing the screen into tiny pixels. Each pixel is\u00a0one color. However, since they are so small, they can blend together to form shades of color.\u00a0Web browsers sometimes struggle, though, to display complex images with millions\u00a0of tiny\u00a0pixels.<\/p>\n Fortunately, images can be optimized to help the browsers out. Images on the Web\u00a0can still be spectacular, yet\u00a0cleaned up a bit and presented online in such a way that search engines, such as Google and Bing, will be impressed.<\/p>\n <\/p>\n There are 4 Basic Steps to getting an image in tip top shape for your website.<\/p>\n (1) Measure it. (2) Compress it. (3) Name it. \u00a0(4) Describe it.<\/p>\n It is important to create an image that is the correct size for a web page. So be sure to add a width and height. If your image is too large, it will not load properly. If it is too small, it will be difficult to see. Most social media sites will tell you the optimal image size for their site. Be sure to follow their guidelines.<\/p>\n It can be trickier to figure out the right size for a web page. Often a web page is 960px wide. (“px”\u00a0is short for pixel.) If the page has a sidebar, the main content is likely 600px wide or less. So a 600px wide image is probably the maximum width you will need. If you upload it and it doesn’t seem to fit right, you can try again. Software such as Photoshop can help you resize your images for your\u00a0website. There are also many online options available to use. Image Optimizer<\/a><\/strong>\u00a0is a\u00a0\u00a0great example of a free\u00a0online image optimizer.<\/strong><\/p>\n Defining the height and width of your image allows the page to load faster. The browser will know the size of your image and can continue to place content on the page while the image loads.<\/p>\n Here’s a fun way to visualize image compression. We’ll use YOU\u00a0as an example. Let’s say that you were on a gurney headed for surgery. The surgeon greets you on the way in and tells you that she has an amazing opportunity for you.<\/p>\n She has the ability to\u00a0surgically remove microscopic bits and pieces of your body while you’re under anesthesia. These\u00a0snippets will be\u00a0so tiny that you won’t even notice. Then when you wake up, you will be 20 pounds lighter.<\/p>\n This is similar to what happens when an image is optimized through compression for the web. Tiny pixels are removed here and there in an image. This can be done in Photoshop or with free online image optimization tools such as Image Optimizer.<\/a><\/strong><\/p>\n Images uploaded to social media sites, such as Facebook and Google+, are automatically compressed, but images uploaded to a CMS such as WordPress are not. If you are uploading images through a CMS, you could \u00a0utilize a plug-in to optimize your images after you upload them.<\/p>\n WP Smush.it<\/strong><\/a> lets your compress images individually through the WordPress media manager or in bulk.\u00a0EWWW Image Optimizer<\/strong> <\/a>\u00a0optimizes your images as you upload them to your WordPress site. It can also optimize images that you have previously uploaded. But, keep in mind that plug-ins can also slow down your website. So optimizing your images before you upload them is\u00a0best.<\/p>\n Most image tools, such as Photoshop,<\/strong> compress images when you save them. It happens in an instant. An\u00a0image is analyzed and unnecessary pixels are removed. It is so efficient that you won’t notice a difference, unless of course you overdo it. If you go too far, it would be similar to the overzealous surgeon, in the fictitious body optimization procedure, removing whole body parts, such as kidneys, fingers and knee caps. If too much is removed,\u00a0you will notice.<\/p>\n Most photos can be compressed down to 60% of the original image for the web.\u00a0Experiment with compression to see how your image\u00a0looks. \u00a0(NOTE: Images for the web are either JPEGs, PNGs or GIFs.) If you’ve over compressed a JPEG image, it is best to go back to the\u00a0original image and try again. So be sure to\u00a0save a\u00a0copy.\u00a0<\/strong><\/p>\n Be sure to give your images meaningful filenames. If you use a non-sensical name such as\u00a09303038.jpg, Google will not pay much attention to that\u00a0image as it decides how to rank your web page. You want to help Google understand your image.<\/p>\n \u2022 Don\u2019t\u00a0use just\u00a0one word to name your image files. An ALT tag helps describe an\u00a0image.\u00a0It\u00a0defines what will appear in place of the image for those who can’t see it, such as search engine spiders and people with screen readers. Use up to 10 words\u00a0to define the image content. The recommended maximum length of ALT text is 125 characters. (This will appear in the source code of the page.) If you are using a CMS such as WordPress to upload your image, there will be a box waiting for you to add the ALT\u00a0Attribute. Don’t leave this important box empty.<\/p>\n Also see: Image ALT Tags for SEO: What, Where, Why & How<\/a><\/p>\nImage Size Matters<\/h3>\n
STEP 1: Measure it.<\/h4>\n
Image Compression<\/h3>\n
STEP\u00a02: Compress it.<\/h4>\n
![\"body](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/body-optimization-procedure.jpg\")
<\/a><\/p>\nLet’s call it a Body Optimization Procedure.<\/h4>\n
WordPress Images<\/h4>\n
Image compression happens in an instant.<\/h4>\n
More Image SEO Optimization Factors<\/h3>\n
Image Filenames &\u00a0ALT\u00a0Attributes<\/h4>\n
STEP\u00a03: Name it.<\/h4>\n
![\"Wordpress](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/wordpress-image-upload-screen.jpg\")
<\/a><\/p>\n
\n\u2022 Uses hyphens (not underscores) to separate the words in the filename.<\/p>\nSTEP\u00a04: Define it.<\/h4>\n
Image SEO Tool<\/h4>\n
![\"Image](\"http:\/\/www.crimsondesigns.com\/blog\/wp-content\/uploads\/2014\/09\/image-optimization-steps.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"