{"id":50171,"date":"2017-07-10T16:34:41","date_gmt":"2017-07-10T11:04:41","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=50171"},"modified":"2017-07-11T12:39:23","modified_gmt":"2017-07-11T07:09:23","slug":"image-optimization-using-jpegtran-with-aws-lambda","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/image-optimization-using-jpegtran-with-aws-lambda\/","title":{"rendered":"Image Optimization Using Jpegtran with AWS Lambda"},"content":{"rendered":"

Image optimization is an important thing when designing a website. Through image optimization using the open source Jpegtran, one can reduce their image size while preserving\u00a0their visual quality, which is also known as lossless compression<\/a>. This results in saving many bytes or KB. Upgraded pictures utilizing Jpegtran likewise increment PageSpeed positioning in Google. Jpegtran mainly works on lossless compression with no effect on image quality.<\/p>\n

Prerequisite:<\/strong><\/p>\n

Jpegtran can be installed in both ways i.e. using the source as well as using Yum or apt-get.<\/p>\n

The source code is available here<\/a>.<\/p>\n

apt-get install libjpeg-progs<\/p>\n

\"Jpegtrans\"<\/p>\n

Use Case<\/strong>: I was approached to enhance the pictures for one of our application which was running in Drupal. All the images were stored directly on AWS S3 bucket<\/a> and had to optimize the images on the fly. In Drupal<\/a>, we can utilize ImageMagic, which is likewise one of the best advancement instrument for pictures, yet we need to fine grain the pictures to accomplish great positioning in PageSpeed<\/a>.<\/p>\n

Jpegtran Description of options<\/strong>:<\/p>\n

– Copy the:<\/strong> Copy no extra markers from the source file. This setting suppresses all comments and other excess baggage present in the source file.
\n– O<\/b>ptimize<\/strong>: Perform optimization of entropy encoding parameters.
\n– P<\/b>rogressive<\/strong>: Create progressive JPEG file.
\n– O<\/b>utfile name<\/strong>: Specify a \u00a0name for the output file.<\/p>\n

How to use<\/strong>:<\/p>\n

Jpegtran can be used in one file as well as in multiple files without changing the name of the original file.<\/p>\n

jpegtran -copy none -optimize -outfile file.jpg file.jpg<\/strong><\/p>\n

Before Optimizing images:<\/strong><\/p>\n

\"before-optimization\"<\/p>\n

After optimization:<\/strong><\/p>\n

\"After-Optimization\"<\/p>\n

Before optimizing the image size, it was 600K and after using Jpegtran, the size becomes 48K.<\/p>\n

Recursively optimize all image under folder:<\/b><\/p>\n

find \/home\/gaurav\/Gaurav\/imagesFolder\/ -name “*.jpg” -type f -exec jpegtran -copy none -optimize -outfile {} {} \\;<\/p>\n

How to use Image Optimization in AWS Lambda with S3 Bucket.<\/b><\/p>\n

Jpegtran can be used to optimize images on AWS S3 Bucket on GetObject of or Put. Any object with suffix jpg or jpeg can be optimized using AWS Lambda functionality<\/a>. The lambda function is written in Node js.<\/p>\n

Below are the steps to create lambda function in AWS.<\/span><\/p>\n

    \n
  1. Login into your AWS console.<\/span><\/li>\n
  2. Create <\/span>S3 Bucket<\/b> in the same Region where Lambda function will use.<\/span><\/li>\n
  3. Create IAM role to allow Lambda function to have full access to S3 bucket and Cloud watch.<\/span><\/li>\n
  4. IMA -> Roles -> CreateNewRole->Select AWS Lambda -> Select AmazonS3FullAccess and \u00a0CloudWatchEventsFullAccess\u00a0\"Lambda-fucntion\"<\/span><\/li>\n
  5. Select Lambda service and create Lambda function.<\/span><\/strong><\/li>\n
  6. Under Select blueprint -> Select Node.js 6.10 and filter S3-get-object<\/span><\/strong><\/li>\n
  7. Bucket – select Bucket Name<\/span><\/strong><\/li>\n
  8. Event Type – Put<\/span><\/strong><\/li>\n
  9. Enable trigger – Select check box.<\/span><\/strong>\"lambda-function-2\"<\/li>\n<\/ol>\n

    10. Upload the Zip compress code which is available on my Git Repo <\/span>Download<\/a><\/span><\/strong><\/p>\n

    \"lambda-function-3\"<\/p>\n

    11.\u00a0Under Lambda function handler and role:<\/p>\n

    a. Handler* Index.handler<\/p>\n

    b. Role* Choose an existing role<\/p>\n

    c. Existing role* <\/span>name of function<\/b><\/strong><\/p>\n

    \"lambda-function-4\"<\/p>\n

    12.\u00a0Create Function<\/span><\/strong><\/p>\n

    13.\u00a0Now upload any image on S3 and lambda function will optimize those images on <\/span>runtime.\u00a0The actual size of the image in 608K and after uploading on S3 the images size become 42K.<\/p>\n

    \"Lambda-Function-4\"<\/p>\n

    \"Lambda-function-6\"<\/p>\n","protected":false},"excerpt":{"rendered":"

    Image optimization is an important thing when designing a website. Through image optimization using the open source Jpegtran, one can reduce their image size while preserving\u00a0their visual quality, which is also known as lossless compression. This results in saving many bytes or KB. Upgraded pictures utilizing Jpegtran likewise increment PageSpeed positioning in Google. Jpegtran mainly […]<\/p>\n","protected":false},"author":1168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14},"categories":[1174,2348,3602,1185],"tags":[248,2366,1679,4862,4646,1124,1177,1276],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/50171"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1168"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=50171"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/50171\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=50171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=50171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=50171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}