It is very important to have fast loading web site. Especially after recent Google updates. The loading time of the site is connected to the images. In this tutorial you will learn how to optimize your images and improve your overall loading speed. It may seems easy, but NEEDS to be done in order to be #1 in SERPs and improve your visitors’ experience! :-)
- Do not add too many images. Less images = faster loading time = better experience
- Before uploading a new image to your blog, make sure you remove any excess white space by cropping the image with any image editing software such as Infanview – click this tutorial to read more about this free program and how to use it.
- Always Determine IMG Width and Height Attributes. Whenever you add an image, you want to make sure you add its dimensions. Otherwise, your browser will not be able to tell the size of the image -this will affect site’s performance. Save your modified files and upload them to your server, overwriting the old ones.
- Always Serve Resized Images. There are plenty or image-optimizing programs available – Photoshop, IrfanView, etc. Instead of trying to make an image appear smaller by scaling it on the fly inside HTML code, resize the image to your desired dimensions. Otherwise, browsers will still have to download the bigger image before scaling it down, thus decreasing the performance of your site.
- Before uploading images, make sure you save them as optimized file formats. The best formats to choose from are: PNG 8/24 bits, JPEG, GIF
- Change any text images to CSS Stylized text instead. Use Google’s web font library to include more creative fonts in your blogs. Read more about that here.
Smush Your Images
Recently I’ve discovered one excellent and FREE service from Yahoo called “smush it”. It allows you to improve your images and decrease the size without changing the quality! :-)
- Using an FTP Solution such as FileZilla, download your WordPress theme to a local folder on your Desktop.
- Go to http://www.smushit.com/ysmush.it/
- Go to “Uploader”, click on “Select Files and Smush”
- Find your downloaded theme, and search the folder containing all the images of your theme, or find all the images inside your theme folder.
- Select all images and click on Open. Yahoo Smush It will smush all the images for you.
- Download the Smushed Images and extract the .zip file.
- Overwrite the Smushed Images by replacing your original images with the new ones.
- Upload the new smushed images back to your server using a FTP Solution.
Sprite Your Background Images
Consider using the SpriteMe! Service on different page types of your site, such as single posts or single pages. You might find other images worth spriting. Remember only to combine images that are loaded on the same page and that are always loaded together.
- Head over to http://spriteme.org/
- Save the Installation link by adding it to your favorites or bookmarks toolbar.
- Head over to the Homepage of your site
- Click on the SpriteMe! Link
- A new window will appear on the right side.
- Sprite the suggested sprites by clicking on Make Sprite.
- You can also drag other non-suggested images to the upper box to add them to the sprite or even create a new sprite.
- After clicking on Make Sprite make sure your Web Page looks identical to what it should look like.
- Click on Export CSS. A new window will open up with the CSS rules you need to modify.
- Download the Sprited Image and upload it to your theme folder.
- Using an HTML Editor such as Notepad++, open the stylesheet of your Theme – .css.
- Using the Rules provided by Sprite Me as a guide, find the images that were sprited and replace the code with the location of your sprited image. Add or modify the background position to reflect the changes provided by SpriteMe!
- Upload and overwrite the new modified style sheet to start using the sprited images and reduce the number of objects.
Speed up your images and optimize images
Consider spreading your static resources (including images) across a content delivery network. This will help parallelize downloads and decrease loading times.
If you want to save your time, you can use special plugin to bulk process your images! Read More HERE.
Learn how to build optimized and well structured sites with our web design course! Click HERE to learn more.