Warning: Use of undefined constant MCW_make_available_outside - assumed 'MCW_make_available_outside' (this will throw an Error in a future version of PHP) in /home/customer/www/islamzatary.com/public_html/wp-content/plugins/mycustomwidget/my_custom_widget.php on line 127 Best Practice For Using Images On Web Pages – Islam Al-Zatary
Don’t scale images in HTML.
Images should be saved to the exact size you want them to be viewed on the web. Do not resize images using size attributes in your HTML code. Taking a large image and having it display at a smaller size not only slows down loading times but also distorts your image.Don’t use a bigger image than you need just because you can set the width and height in HTML, example:<img width=”100″ height=”100″ src=”yellow-balloon.jpg” alt=”Yellow Balloon” />
Use PNG instead of GIF.
Convert any GIF image you may be using to PNG format and there should be a saving in the size amount.
Use small favicons
16*16px, its extremely important because they are requested before any other components of your website by the browser. So guess what happens when you have a big sized favicon or even worse, no favicon? the browser is 404′d. You don’t want to 404 a browser or make it struggle loading your favicon, so it is preferred to have your favicon reduced to a size under 1K.
Minimize HTTP Requests: * CSS Sprites, are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment, for example look at this image: http://img.b8cdn.com/images/icons/sprite_all.png * Image Maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended. * Inline Images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.
Use a Content Delivery Network ( CDN ).
Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective.
Remove hidden metadata from your images.
Image also has metadata embedded in it, such as the EXIF data, which describes about the date when the photo was taken, type of camera you used, shutter speed, white balance and more, this meta data has extra size we don’t need it, you can remove it by some of softwares, like : “PNGGauntlet” ( we use it at Bayt designer), “JPEG & PNG Stripper “, smush.it and more, by this tools you can reduce the size of image from 5% to 35%.
Optimizing images for better search engine rankings:
Use proper name to name of image, example:For example, “widescreen-wallpaper.jpg” is better than “image.jpg”.
SEO Friendly Images , write correct ALT and TITLE to tag, those will enhance SEO images to your site.