The important thing to remember is that every webpage has a PAGE LOAD TIME.
This is calculated by how much data needs to be uploaded to the users computer. The data on a page can also be called the WEB PAGE WEIGHT.
Other factors include the internet providers service, such as high speed vs. dial up. So more web page weight= more web page load time = poor user experience = poor return rates and poor conversion of web traffic to sales. So keeping your web site load times in check and optimal increases your likelihood of having a successful website.
Sites like Pingdom can help you figure out how fast your website’s webpages are loading. https://tools.pingdom.com/
The largest culprits of a heavy page weight/ slow page load time is media. Images are the biggest culprit of a slow website. Video and audio can also be suspect. After that, forms, java script and other special bells and whistles can really drag on a pages load time.
My clients primary concern is images and this is what we will concern ourselves with here today.
Estimates are that you should try and keep your websites webpage weight at under 200 kb. These means that all elements on that page should total the web page weight at under 200 kb.
One image can easily be twice that size if you don’t compress it. But if you know how to save your images for website optimization and if you know how to compress them, you will gain the advantage! Your site will be in control of your image content rather than you image content being in control of your site.
FIGURE OUT YOUR IMAGE DIMENSION AND SIZE
Figure out what you’re working with and how much work you need to do to get your images optimized properly. This should be as simple as right clicking your image and clicking “get info”. This will display some of the info data on the image including these two main factors of “size” & “dimensions
SIZE THE IMAGE HEIGHT AND WIDTH APPROPRIATELY
Images displayed on your computer use pixels. The quality and amount of pixels needed to display a large printed photo to hang on your wall is much bigger than what you want to display on a computer screen. Typically a full screen background image is ideal with the proportions of 1250 X 800 pixels.
Your camera could be taking photos 3-6 times that amount which is great for printing but very superfluous for use on the web.
So start by saving your photo with smaller dimensions in an image editor on your computer (you can even do this in wordpress itself under “edit image”) so now save it to these full screen background proportions of 1250 X 800 if that’s what it’s being used for. Otherwise you can save it smaller than that for a banner or blog post image which don’t need to be fullscreen and will probably display at half that size or smaller.
How to compress your image for web optimization
Next is to compress the image in some file format, usually a jpg
This site offers info on working with the different file formats such as .gif, .png and .tiff
http://inobscuro.com/tutorials/optimizing-images-for-web-35/
1.Use an Image Editor
Compress the newly and appropriately sized image (1250 X 800px or less ) by finding the option in your image editor to save for web . This option should display your compression options and data
THis one is free
https://pixlr.com/
here’s some more..
9 Best Free Image Editors
http://mashable.com/2013/07/22/free-image-editors/#WAVaAS9jzmqo
16 essential photo editor apps
http://www.creativebloq.com/software/best-photo-editor-51411752
2. Use a Plug IN (wordpress)
There are many image optimization plug ins out there for wordpress. If you google image optimization plug in, you can find reviews on several of the most current and relevant.
I have recently tried this popular one called SMUSH IT . It is easy to use, once you’ve downloaded it and activated the SMUSH IT plug in, your image files in your website media library will now have a SMUSH IT botton and all you need do is press it.
SMUSH IT
https://en-ca.wordpress.org/plugins/wp-smushit/
3.COMPRESS ONLINE
Websites like Optimizilla may give you the most efficiency for the least tech proficiency. Just load your images to the site and voila! Compressed jpgs
With Optimizilla you can control the amount compressed and preview it with the Quality meter on the right. Lower the quality meter and you reduce the file size. This may sound unfortunate to lose “quality” but for the purpose of a website, a fair bit of quality loss can go mostly unnoticed. Optimizilla allows for you to preview the compressed image rates so you can decide for yourself how much compression the image can take while maintaining a good enough quality image to display.
I hope this covered some of what you need to know to achieve a fast loading website and confidence using images on your website and blogs. Images are a great tool for the web and I encourage you to use them. But you’ll be doing your website a favor if you know how to use them wisely
Wikipedia explains data compression:
“In signal processing, data compression, source coding, or bit-rate reduction involves encoding information using fewer bits than the original representation. Compression can be either lossy or lossless. … The process of reducing the size of a data file is referred to as data compression.”
Compression is useful because it reduces resources required to store and transmit data. Computational resources are consumed in the compression process and, usually, in the reversal of the process (decompression). Data compression is subject to a space–time complexity trade-off. For instance, a compression scheme for video may require expensive hardware for the video to be decompressed fast enough to be viewed as it is being decompressed, and the option to decompress the video in full before watching it may be inconvenient or require additional storage. The design of data compression schemes involves trade-offs among various factors, including the degree of compression, the amount of distortion introduced (when using lossy data compression), and the computational resources required to compress and decompress the data.[5][6]”
(Read more at https://en.wikipedia.org/wiki/Data_compression )