Before you start exporting images, you should familiarize yourself with some of the important issues relevant to using graphics on the Web, such as file size, file types, and image optimization. Many of the available graphics tools will do this optimization for you, but to make good choices that best suit your situation, you should understand the how and why of optimization.
Graphics optimization is the process of reducing the file size of images used on web pages, while preserving the quality and clarity of those images. This process provides a few key benefits:
- Smaller images are friendlier to your end users. People will be able to download the web page faster if you’ve optimized your images.
- Your website will appear faster to them, and they will be less frustrated than if they had to wait thirty seconds for all your huge, unoptimized images to appear.
- Smaller images are more bandwidth-friendly. Web hosts usually limit how much data your website can serve per month. If your images are smaller, you won’t hit your quota as fast. Some providers will even charge fees when you exceed your limit. Commercial organizations that host their own websites also pay a bandwidth fee. It might seem trivial, but the savings will add up if you get a significant amount of unique visitors to your site.
- Smaller images take up less space. Sure, we’ve all heard the argument that disk space is cheap, but disk space is even cheaper if you don’t have to buy as many disks to store all your huge images. Amazon’s S3 service charges for both the space used by your files and your bandwidth. It’s in your best interests to keep the image sizes small so you pay less for storage and data transfer.
Download Times
Even though many people have fast Internet connections, you still need to think about download times for your assets. A 100KB JPEG might appear small, but add in five of them, the 122KB Prototype JavaScript library, several CSS files, and several other assets, and it can take a few seconds or more for those images to download.
Users tend to be incredibly impatient, and you want to do everything you can to make your pages load as quickly as possible.
You can use various methods to calculate the total size of a page. Adding up the file size of your page, scripts, style sheets, and images using a calculator is one way. Another, more accurate way is to let an outside service do it for you.
Visit Website optimization service here , and enter the address of your site to see a detailed report.
Dealing with Different Graphics Formats
Optimizing images can be difficult because you need to consider the type of image you’re working on.
For example, photographs need to be optimized differently than charts or logos.
When you work in a web browser, you work primarily with three graphics formats: GIFs, PNGs, and JPEGs. We’re using each of these formats in our site.
GIFs
GIF, short for Graphics Interchange Format, is a graphics format that uses a palette of up to 256 distinct colors from the 24-bit RGB color space. You don’t use it for photographs because of this limited-color space, but it’s great for logos. The GIF format also supports animations.
Historically, GIFs have often been used for logos and buttons because they support transparency, which means you can place a GIF on the page and see the background through parts of the logo. However, developers are increasingly adopting PNGs because of that format’s superior transparency support.
PNGs
PNG, short for Portable Network Graphics, is a bitmap image format that uses lossless compression and was designed to replace the GIF format. It supports only RGB colors, and it’s designed for use on the Web.
It also supports transparency quite well. Unfortunately, this transparency is supported only in newer browsers, but don’t be afraid to use it because the image quality can be amazing.
Be sure to watch your file sizes when using PNGs; a 24-bit PNG with transparency can be quite large.
Don’t Recompress a JPEG!
You should avoid recompressing a JPEG whenever possible. If you’ve compressed the original image by 20% and still haven’t gotten the file size you wanted, don’t compress the new image further; instead, compress the original file again. It’s important to keep your original files uncompressed, so you can go back and re-create them.
JPEGs
JPEG is a compression format for photographic images. It’s widely supported, but it uses a lossy compression, so artifacts can be created if you compress too much or recompress multiple times.
JPEGs do not support transparency at all, and you should use them only for photographs. Logos, screenshots, and gradients are definitely not appropriate uses for JPEGs.
What are the methods you’re using to speed up your website? Do you compress images?
Let me know if you find this article useful.
Information is provided along with some magnificent tips to be used in our day to day online life. Really looking forward to see more post based on this regarding tools to be used to speed up the initial loading of page,,and so on..
Cheers. thank you.
I never really thought of compressing images on my blog, but it is something to think about in order to shorten load times. I do not use many images on my blog, usually one or two per blog post to make it visually appealing to the reader.
I think another way to increase loading times is to host images on a separate server. I never used this method, but know that large websites often do this to increase loading times.
Hi Denis,
The images from your homepage are the ones you should consider to resize.
these tips are amazing. But I have a problem in my blog. My images are not displaying in homepage could you please help me out..on this issue. Thanks.
Hello Tharun,
Seems like a database problem (phpMyAdmin).
As a constant reader of different blogs, I really consider the speed of the website. I really find it irritating if the website loads sio slow.
i Think Speed of any website really matters . It opens quickly and have very benefits . I thinks every website have at least medium speed except graphic sites but have fast speed on social media sites like facebook , twitter etc . SO i agree with this article and thanks for publishing this nice article.
Hi Abhay!
Thanks for your appreciation.
Never a truer word said my friend. Site speed is super important – to the user (who might leave while waiting) and to Google who measures it as part of their ranking (who knows how much but they have stated it as we know). Images are a huge part of our page load and often slow it down alot (then there are those pesky plugins we all use).
I also did a post on this back in April as it is such an important topic.
I look forward to more create info on this topic
ashley
Hello Ashley,
Nice of you to show your opinion about my article, thanks… that really helps.
Yes, indeed the images are usually the cause for a slow website/blog.
Right. Thanks for the post. I was looking for this type of content, and I’m positively surprised. I look forward to further entries on the subject.
Hi Adrian,
I’ll try to meet your expectations!
Thank you. I found the tool, which shows how long the page is loaded. For my blog is just one second :-) well is not it?
Hello Adrian,
Yes, 1 second is fine.
Hi thanks for your lines, website loading time has great concern especially after introducing Google Panda and Penguin,because more you have loading time more chances are there to be penalized. Choosing right image format will help great in decreasing page loading time and in bounce rate.
I must add some words that do not use image height or width to reduce image size,because it may also increase loading time.
I started using MaxCDN about a month ago. Since then I have noticed that my site is faster. I also optimize my pictures before I post them on my blog. I still feel like my blog could be faster, seems like something that I am always working on.
Thanks for the heads up on not compressing a jpeg file. I had absolutely no clue about that.
Hi Susan,
Glad to help. :)
Hi Marius
Yeah Reducing your file size through compress is always a best option. it saves time, bandwidth and your visitor too
but in case someone really don’t want to use compression then he/she can you content delivery network (CDN) or CloudFlare for saving time and bandwidth.
what you will say about this..?
Thansks for sharing
Hi Maddy,
Yes, cloud hosting services can be effective against low speed blogs – through the best option would be to compress the big files that may slow down your blog.
Great tips Marius. It’s true and I experienced a massive load time increase after reducing the images sizes and optimizing for the web. One question, do you think PNG is better or JPEG is the best for better on-page optimization?
My designer from ADLAV UK tells PNG is the best for the web… Looking forward for you or Ammar’s opinion.
I’d be agree with your designer. I too use PNG for most of my images here. :D
If you PNG isn’t too large, yes… you can use it without any worries.
I agree with you that the speed of our website is very important. As you rightly said that users tend to be incredibly impatient and therefore we want our page to load as quickly as possible. Thanks for the tips you shared for optimizing the use of images.
Keep sharing.
Another way to increase Page loading time is we should insert maximum 2 images in article.
or if we insert images of lesser size then there are chances of faster loading time of page or Google will increase SERP for our blog.
Bloggers should now try responsive theme on their blog which is equally good for all types of displaying modes like PC, laptop, tablets, smartphone and iphone. It also supports the speed of your blog ultimately taking the ranking of blog higher.
yes dear agree with you website speed is more important than every other task if our website will be low then no one is like to visit our website. I also agree with “Himanshu” after installing MaxCDN service, we can increase our website traffic. thanks dear for such types of post sharing here.
I don;t know about other people, but speeding up my blog is a never-ending quest, no matter how fast I manage to get it I continue to keep trying to quicken the loading time up. I have found removing unnecessary plugins to help.
I feel the same way! It’s a never ending quest! Drives me nutty! I have found that unnecessary plugins do slow down your site for sure!
Hey excellent post, having a fast website is extremely crucial for staying alive in the modern era of web design and there is simply no room for slow websites anymore. I think we should compress all images for web-based quality. We can do this by using the default image compressor built into Google’s Page Speed plugin.
Thanks for the information, ;)
Noah
Great Post
Google wants to provide its user base with the best experience possible when browsing the web – this is what retains their customers. A poor page load speed can have a serious effect on user experience, that is arguably the main reason Google sometimes ranks these sites less favorably.
Hi Marius,
Website speed is very important for us as blogger because reader don’t want to waste their time and if your website speed is fast then they don’t hesitate to come again and share it with others. Thanks for sharing your knowledge about it.
Blog speed is not just important as visitors point of view, it is also important and has major value in Google ranking factors as well. That is why currently i am using cloud hosting on many of my sites.
I guess I miss this one. I think my blog speed was slow. Can’t stop myself exporting images on it though :). Thanks for this post, going to review mine for better performance
Website loading speed is really create a problem when people are visiting and they are looking it Your WEbsite is down now You must need to care off your website speed when you are developing it.
When you are purchasing your hosting package, You must care of your website requirement. Ask to a developer about this what is best hosting plan is suitable for you..
I use SmushIt for optimising my images, plus I always add at the max 300×300 sized images, providing a link to the bigger image.
I’ll try that plugin.
Thanks for the tip.
Speed is a very important part of a website. Google ranks are also based on speed and faster websites will also get more users as we all love faster blogs and websites.
Yup. Obviously. Website speed is one of the most important part. Because if our blog speed too slow for readers. They never like to loading page.
One question, I’ve seen too many tools online for compress / optimize > CSS / HTML / JavaScript codes. If we compress or optimize it, is it harmful for website or not? Is those online tools give benefits?
Hope I will get the answer soon. :)
Thanks.
Regards,
Mohammad Reaz
Helloy Reaz,
Usually if you compress a image too much you’ll automatically lose quality.
It’s okay if you just convert it from PNG to JPEG.
If you want to increase the speed of your website, i suggest you to go for MaxCDN service.After installing it, you can easily create 6-7 cdns for your website.With these different cdns your website speed will increase.
I usually prefer WPsumsh.it plugin for compressing images.Great plugin …
Blog speed is not more important than before because Google also minutely check it while ranking your blog; the above tips are excellent to increase your blog speed. Apart from them uniformity in images including their size, medium and scaling can also help to push the speed up.