{"id":67101,"date":"2022-09-10T09:00:30","date_gmt":"2022-09-10T09:00:30","guid":{"rendered":"https:\/\/www.cryptocabaret.com\/?p=67101"},"modified":"2022-09-10T09:00:30","modified_gmt":"2022-09-10T09:00:30","slug":"5-ways-to-resize-and-optimize-images-for-the-web-on-linux","status":"publish","type":"post","link":"https:\/\/www.cryptocabaret.com\/?p=67101","title":{"rendered":"5 ways to resize and optimize images for the web on Linux"},"content":{"rendered":"

5 ways to resize and optimize images for the web on Linux<\/span>
\nSeth Kenlon<\/a><\/span>
\nSat, 09\/10\/2022 – 03:00<\/span><\/p>\n

\n

There was a time when 5 MB was the reasonable maximum size for an email attachment. Today, it’s easily possible for a single photo to be 5 MB. Accordingly, the maximum attachment size has increased to, say, 25 MB. But of course file sizes are getting bigger and bigger too, and so eventually the attachment limit will go up too. It’s an endless cycle, common in the digital world: the tools are built for today’s data, and today’s data increases in complexity and size until the tools are revised and improved. You have to contain data, preferably in the smallest packaging possible, so that sharing it online goes faster for everyone. Here are five ways to optimize images for the Internet.<\/p>\n

What image size is good for the web?<\/h2>\n

First of all, there are two kinds of “sizes” when discussing digital images. The image size<\/em> represents how many pixels wide and high an image is when you look at it on your screen. The file size<\/em> represents how many bytes on a hard drive or SD card the image uses. It’s the file size<\/em> that limits how easy something is to send it over the Internet because we all have different bandwidth allotments from our Internet providers and infrastructure. Of course, the larger the image size<\/em>, the larger the file size<\/em>, so the two are related.<\/p>\n

To avoid confusion, in this article I use the term “image size” to refer to the pixel width and height of an image, and the term “file size” to refer to the bytes on a hard drive occupied by an image file.<\/p>\n

It’s hard to know exactly what a “reasonable” image size and file size is for a photo on the Internet or being sent over email. There are some reasonable expectations, though. If you’re posting a photo to a website, whether it’s your own blog or to social media, it’s probable that most<\/em> people are going to be viewing the photo at a resolution consistent with whatever’s in stores. Your screen size, at least in 2022, is probably 1920 by 1080 (high definition, or HD) or thereabouts. Your photo, then, probably doesn’t need to be any bigger than 1920 by 1080. Even people with a screen twice as big as yours could let your photo take up half<\/em> their screen, which is probably sufficient.<\/p>\n

The other part of the equation is the file format. Many file formats, like JPEG and PNG, imply a certain amount of compression. The more compression, the smaller the file size, but too much compression can render a blurry image. I like the WEBP<\/a> format, which tends to have quality better than JPEG at a smaller file size. It’s well supported by image applications and all major web browsers.<\/p>\n<\/p>\n

\n
More Linux resources<\/div>\n
\n
Linux commands cheat sheet<\/a><\/div>\n
Advanced Linux commands cheat sheet<\/a><\/div>\n
Free online course: RHEL technical overview<\/a><\/div>\n
Linux networking cheat sheet<\/a><\/div>\n
SELinux cheat sheet<\/a><\/div>\n
Linux common commands cheat sheet<\/a><\/div>\n
What are Linux containers?<\/a><\/div>\n
Our latest Linux articles<\/a><\/div>\n<\/p><\/div>\n<\/p><\/div>\n

1. Resize an image with Krita<\/h2>\n

The open source application Krita<\/a> is technically a digital painting application but it happens to be a really great photo editor<\/a> as well. I use it to load a photo, shrink it down to a reasonable size, and then save it in a web-optimized format.<\/p>\n

Three easy steps:<\/p>\n

    \n
  1. \n

    Go to the File<\/strong> menu and select Open<\/strong> to open your image in Krita.<\/p>\n<\/li>\n

  2. \n

    Go to the Image<\/strong> menu and select Scale image to new size<\/strong>. Type in the maximum width or height you want to resize your image to.<\/p>\n<\/li>\n

  3. \n

    Go to the File<\/strong> menu and select Save As<\/strong> and save the image as a WEBP image. Krita is smart and switches to WEBP as long as you use the .webp<\/code> extension while saving your file (for example, myphoto.webp<\/code>.)<\/p>\n<\/li>\n<\/ol>\n

    \n
    \"Resize<\/div>\n
    Image by: <\/span><\/p>\n

    (Seth Kenlon, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n

    Krita<\/a> is available for Linux, Windows, and macOS.<\/p>\n

    2. Resize an image with GIMP<\/h2>\n

    The open source GNU Image Manipulation Program (GIMP)<\/a> is a photo editor, and it can resize images.<\/p>\n

    Three easy steps:<\/p>\n

      \n
    1. \n

      Go to the File<\/strong> menu and select Open<\/strong> to open your image.<\/p>\n<\/li>\n

    2. \n

      Go to the Image<\/strong> menu and select Scale image<\/strong>. Type in the maximum width or height you want to resize your image to.<\/p>\n<\/li>\n

    3. \n

      Go to the File<\/strong> menu and select Export As<\/strong> and save the image as a WEBP image. The application is smart and uses WEBP as long as you give the .webp<\/code> extension while saving your file (for example, myphoto.webp<\/code>.)<\/p>\n<\/li>\n<\/ol>\n

      \n
      \"Resize<\/div>\n
      Image by: <\/span><\/p>\n

      (Seth Kenlon, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n

      GNU Image Manipulation Program (GIMP)<\/a> is available for Linux, Windows, and macOS.<\/p>\n

      3. Resize an image with ImageMagick<\/h2>\n

      The ImageMagick<\/a> suite is a set of terminal commands that can manipulate images without even opening the files in a user interface. It’s a fast and efficient way to modify lots of images all in one go<\/a>.<\/p>\n

      One easy step:<\/p>\n

      \n$ <\/span>convert 2022<\/span>-09-09-PHOTO.JPG -scale<\/span> 1920x myphoto.webp<\/code><\/span><\/pre>\n
      In this command, convert<\/code> is the component of ImageMagick that performs conversion, and -scale<\/code> is the option that resizes. The 1080^<\/code> argument specifies that the converted image must be 1029 pixels wide, and the height (left blank after the x<\/code> character) is auto-calculated.<\/p>\n
      4. Archive an image<\/h2>\n
      Sometimes you may not want to resize an image, but you still need to reduce the file size (the bytes the file uses up on your hard drive or SD card.) Images from consumer cameras, like those found in phones, are often already highly compressed, which doesn’t leave much for a computer to optimize without resizing it. However, professional cameras often shoot in formats that assume you want no or minimal compression, which means that you can reduce the file size of an image without loss of quality with a good archiving utility.<\/p>\n
      There are several archive utilities out there, and many may already be installed on your computer. For instance, if your computer can create ZIP archives, then you’ve already got the ZIP compression algorithm available.<\/p>\n
      Two easy steps:<\/p>\n
        \n
      1. \n
        Open a file manager on your computer and locate the photo you want to compress.<\/p>\n<\/li>\n
      2. \n
        Right-click on the photo, and select Compress<\/strong> (on some operating systems, this may called Archive<\/strong> instead.)<\/p>\n<\/li>\n<\/ol>\n
        Provided there’s enough uncompressed data in your image to allow for compression, the archive version ought to be smaller in file size than the original. You can send the archive over the Internet, and the recipient can un-archive the image with<\/p>\n
        \n
          \"Archiving<\/div>\n
        Image by: <\/span><\/p>\n
        (Seth Kenlon, CC BY-SA 4.0)<\/p>\n<\/div>\n<\/article>\n
        7-zip<\/a> is an excellent archive tool for Linux, Windows, and macOS<\/a>.<\/p>\n
        5. Split an image<\/h2>\n
        If you’re a Linux user, you can use the split<\/code> command to cut an image into a few different pieces of a specific file size. Then you can send the pieces to someone, and they can reassemble the file using the cat<\/code> command.<\/p>\n
        Assume the file 2022-09-09-PHOTO.JPG<\/code> is 6.7 MB. You could cut it into four pieces by splitting it at every 2 MB. On your computer:<\/p>\n
        \n
        $ split<\/span> 2022<\/span>-09-09-PHOTO.JPG --bytes<\/span> 2M
        \n$ ls<\/span> -l<\/span> --human<\/span>
        [<\/span>...]<\/span> 6.7M Sep \u00a07<\/span> 14<\/span>:50<\/span> 2022<\/span>-09-09-PHOTO.JPG
        [<\/span>...]<\/span> 2.0M Sep \u00a07<\/span> 14<\/span>:54<\/span> xaa
        [<\/span>...]<\/span> 2.0M Sep \u00a07<\/span> 14<\/span>:54<\/span> xab
        [<\/span>...]<\/span> 2.0M Sep \u00a07<\/span> 14<\/span>:54<\/span> xac
        [<\/span>...]<\/span> 667K Sep \u00a07<\/span> 14<\/span>:54<\/span> xad<\/div><\/div><\/pre>\n
        On the recipient’s computer:<\/p>\n
        \n$ <\/span>cat<\/span> xaa xab xac xad ><\/span> myphoto.jpg<\/code><\/span><\/pre>\n
        Save space<\/h2>\n
        In the eternal struggle between file size and carrier capacity, it’s likely we’ll always have to make concessions. Using open source tools to save space either through lossy compression, lossless compressed archiving, or through clever work-arounds, is a great way to save space and maximize speed of communication. Sure, a picture is worth a thousand words, but it doesn’t have to take up a thousand megabytes!<\/p>\n<\/div>\n
        \n
        Resize, archive, and split images to make big files better for the Internet.<\/p>\n<\/div>\n
        \n
        \n
          \"web<\/div>\n
        Image by: <\/span><\/p>\n
        kreatikar<\/a>\u00a0via Pixabay<\/a>, CC0<\/a><\/p>\n<\/div>\n<\/article>\n<\/div>\n
        \n
        Art and design<\/a><\/div>\n
        Linux<\/a><\/div>\n<\/p><\/div>\n
        What to read next<\/div>\n

        \n        \"Creative<\/a>This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.<\/div>\n
        \n
        \n
        Register<\/a> or Login<\/a> to post a comment.<\/div>\n<\/p><\/div>\n<\/section>\n
        Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
        5 ways to resize and optimize images for the web on Linux Seth Kenlon Sat, 09\/10\/2022 – 03:00 There was a time when 5 MB was the reasonable maximum size for an email attachment. Today, it’s easily possible for a single photo to be 5 MB. Accordingly, the maximum attachment size has increased to, say, […]<\/p>\n","protected":false},"author":1,"featured_media":67102,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[307],"tags":[],"class_list":["post-67101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source"],"_links":{"self":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/67101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=67101"}],"version-history":[{"count":0,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/posts\/67101\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=\/wp\/v2\/media\/67102"}],"wp:attachment":[{"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=67101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=67101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cryptocabaret.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=67101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
      ImageMagick<\/a> is available for Linux, macOS, and Windows.<\/p>\n