We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies.If you want to ask for a budget, we hare available for hire!.
Speeding Up Your Website: Optimizing JPEGs images
February 6th, 2009
In last article we have seen wich kind of image format we can use in each situation in our websites, so now it’s time to know how to optimize these images.
We are going to learn how to optimize our JPEGs images by reducing useless information and without losing quality in very clear steps.
We are going to use jpegtran to our purposes of optimization.
Actually we have published these articles:
- Minimize HTTP Requests
- Selecting the Right Format for your Images
- Optimizing JPEG images
- Optimizing PNGs images
- Optimizing GIFs images
Let’s dive into the tutorial guys!
How to reduce the image size without losing quality?
JPEGs images contain information that sometimes can be useful but not in our situation (creating a website). This information is called metadata and it can be:
- Information about the camera
- Date of the photo
- Thumbnails of the current image (and sometimes audio)
- Specific application information (in example Photoshop)
- Comments about the image
- And so on…
As you may suppose photographers can find useful some information such as information about the camera, the configuration of the camera… etc, but for our websites we don’t need any kind of information, just display the image.
Optimizing with jpegtran
As we said in other tutorials about optimization JPEG is a lossy format, but some operations are lossless, so we can do some of these without lose quality:
- Rotation
- Cropping a part of the image
- Modifying metadata
So as we said we are going to use jpegtran to remove this useless information and make our images smaller in size.
Once you have downloaded jpegtran we only need to use this command:
[code language="php"] > jpegtran -copy none -optimize original_image.jpg final_image.jpg [/code]
In some versions the command will be this one:
[code language="php"] > jpegtran -copy none -optimize original_image.jpg > final_image.jpg [/code]
The “-optimize” command will make a better compresion helping us to have a smaller image size.
Remember that you can go one step further in jpegtran features.
It’s important to know that stripping the meta information will delete the copyright information contained in the image, so be careful if you don’t own the images!
And that’s all guys! Thank you one more time for reading our posts and see you on next tutorial!
Don’t forget follow us on twitter and visit our forums!
Get professional PMI-001 training to learn how to improve your website functionality. Download the 642-426 tutorial and 642-374 guide to pick useful tips on optimizing jpeg web images.
jpeg, optimize, optimize images, optimize jpeg, speeding up
Articles, Tutorials
Enjoy this post?
Your vote will help us to grow this website and write more entries like this one :)
We available for hire! — Need help with a web or mobile project?
From yensdesign we develop technology projects based on web apps, mobile apps, consulting and databases. We are young and hard workers, passionate about innovation and focused in new technologies. We try to help you, sharing our knowledge acquired on worked projects, while helping the community and showing our capabilities.If you want to ask for a budget, we hare available for hire! Don't doubt in get in touch with us!.
Speeding Up Your Website: Optimizing JPEGs images…
We are going to learn how to optimize our JPEGs images by reducing useless information and without loosing quality in very clear steps….
Great post, images seem to be one of the biggest causes of website load times.
[...] Aumentar la velocidad de tu web: Optimizando los ficheros Jpegs. vía: Yensdesign [...]
[...] Speeding Up Your Website: Optimizing JPEGs images | yensdesign – Tutorials, Web Design and Coding Optimize your JPEGS and Speed up your site! (tags: webdesign tips speed webdevelopment quality optimization) [...]
[...] interesante artículo para aumentar la velocidad d etu sitio Web, optimizando las imágenes JPEGs. Entra aquí [...]
Losing is spelled L-O-S-I-N-G.
@Rob Thanks! I will fix it!
appreciate the info guys, thanks
Wow! what a resource ! Amazing …
This is quite a up-to-date information. I think I’ll share it on Digg.
Is there some way to optimize JPEGs in PHP, using ImageMagik or GD?
This might be very useful for webdevelopers, because you can optimize JPEGs after uploading and before saving..
Keep up the good work! Cheers!
It
Wow! Great resource for Optimizing JPEG images. Thanx !
I upload images to the site is opened too late. Is there a solution?