• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    How to Prepare Images for the Web

    July 28, 2015 by ProfK 3 Comments

    One of the most common problems I see on websites is the use of images that are not optimized. Two telltale signs are (1) images that are too large and require the user to scroll and (2) resolution is too high and the images load slowly. Optimizing means: resizing the physical dimensions to fit the maximum width for the content area on your website; reducing the resolution to 72 ppi; compressing the image by saving it as a JPG, PNG, or GIF. Your website will load faster with optimized images.

    How do you figure out the maximum size?

    On most websites that I design, the maximum width of the site container is 1140 pixels. But there is always some left and right padding, so on a full width page, the maximum width is usually between 1080 and 1100 pixels. On pages with sidebars, the maximum width of the main content area is around 740 to 800 pixels. If you know how to use Firefox Firebug or Chrome Developer tools, you can figure out these widths. Otherwise, ask your web designer to give you the measurements.

    ASK-content-sidebar

    Column width next to sidebar = 800px on my website.

    If the site features a lightbox or slideshow, the considerations change. In a lightbox, a viewer clicks on a small or medium size of the image and a larger version of the same image will appear above the page; the viewer can then navigate to the next large image. Some slideshows can be configured so that the larger images take up the full browser screen. If you are implementing such features, you must upload appropriately-sized images. According to w3schools.com, 97% of web users have a monitor screen resolution of 1024 x 768 pixels or higher (my computer’s resolution is 1920 x 1080). Among those users, 33% have a monitor resolution of 1366 x 768. So, I use this figure (1024 x 768) as a baseline for my dimensions when resizing to make sure a user can view the entire image without having to scroll.

    Once the images are uploaded to the web, upscaling will result in loss of quality. Downscaling is no problem. That’s why you want to find the largest size that is most common at the present moment. Resolutions and desktop screen sizes are increasing yearly, and image sizes will have to increase to keep pace. Using CSS and JQuery, we can code for responsiveness and the images will automatically scale down when appearing on smaller viewports.

    Reducing the Image Resolution Density

    Pixels per inch (ppi) refers to 2 things: resolution density of an image and how many pixels exist across the surface area of a monitor screen or a print piece. For years, we’ve been taught that web images must be 72 ppi to match the screen resolution. But, image ppi only matters in the print world, where 300 ppi is the standard. The 72 ppi is actually a Mac-based number. When you do a screengrab on a PC, then open the screengrab file, you’ll discover its resolution is 96 ppi. There’s a nifty online tool for calculating the actual pixel density of your computer monitor, and it reveals a little-known fact: most monitor pixel densities are actually above 100 ppi!

    So, where does this leave us? There are many compelling articles that show how an image’s ppi doesn’t make any difference in its display quality on the web. The only reason, then, to reduce an image’s ppi is to reduce the image’s physical size. The smaller size will take less time to upload to the web and will render faster for the viewer.

    Compressing the Image

    Before saving an image to a compressed file format, make sure that its color mode is RGB to match the color space of the web. RGB files are also smaller than CMYK files, because there is 1 less color channel.

    When saving an image for the web, use one of these file formats (all with built-in compression):

    • JPEG (Joint Photographics Expert Group) — Offers different levels of lossy compression, which means you lose and cannot retrieve data when compressing. Best used for continuous tone images.
    • GIF (Graphics Interchange Format) — Supports transparency and animation. Best used for graphics.
    • PNG (Portable Network Graphic) — Supports transparency and has much better color quality than GIF.
    • SVG (Scalable Vector Graphic) — A vector format for high-quality web graphics.

    SVG is a relatively new option that has many benefits: scalability, SEO-friendly, and resolution-independence. It will likely become the next standard for crisp vector web graphics. Right now, it’s not yet supported on all browsers. For continuous tone images, like photographs, JPG and PNG are still necessary.

    Compression Tools

    Photoshop is my tool for optimizing. It has an effective Save for Web option that offers a nice range of settings. If you don’t have Photoshop, there are many free options that you can try, such as:

    • Preview: one of several free applications pre-installed on new Macs. Preview is often used as the default PDF viewer. But, it can also be used to resize your images. Go to the TOOLS menu > Adjust Size … You’ll still need to compress the image, though, with another tool.
    • Pixlr: Great, free online image editor that can crop, resize, modify, and compress files. Chrome and Firefox have extensions for it.
    • GIMP: Free alternative that is PC and MAC compatible, but not for the iPad. It has most of Photoshop’s capabilities, with a more PC-style interface.
    • Pixelmator: Not free, but a great, affordable alternative to GIMP and Photoshop that iPad users might want to investigate and use. Mac/iOS platform, with a 30-day free trial period.
    • Image Optimizer: This free, online application can resize and compress files.
    • ImageOptim: Free compression tool with drag and drop interface.
    • Photoresize Pro: A photographer client has used this for years. It’s not free, but very inexpensive.

    You may notice that JPG files are smaller than PNGs. Both file formats are great for continuous tone images, but use PNGs only when you need transparency, like masking out the background. In Photoshop, the SAVE FOR WEB (File > Save For Web) option provides better compression than the standard SAVE AS… My favorite presets are:

    • JPEG High – High Quality 60, Optimized
      OR
    • PNG-24 – PNG-24, Transparency

    Naming Conventions

    It’s good practice to establish a naming system for your files. This system will help you find the files on your computer, and it will also help search engine optimization if those files are uploaded to the web. My system is based on dates. Each project is assigned a date number and given a descriptive shortcode. All project folders and images will have that date number. Your system could be based on event titles, art medium, location, or whatever makes sense to you.

    In Summary

    1. Resize the physical dimensions of the image to fit the maximum width of the content area on your website:
      – 1024 x 768 pixels as a baseline
      – 1080 to 1100 x 768 pixels for full container widths of 1140 pixels
      – 740 to 800 x 768 pixels for containers with sidebars
      – 1366 x 768 pixels for full screen widths
    2. Reduce the resolution to 72 ppi
    3. Compress the image by saving it as a JPG, PNG, GIF, or SVG
    4. Name the file appropriately

    Related Posts

    How to Create and Edit WordPress Galleries

    How to Resize an Image in WordPress

    How to Resize an Image in Photoshop

    How to Scan within Photoshop CS6, CS5, CS4

    Effective Resolution: Key Factor of Image Scaling

    Image File Formats: print vs. web

    Filed Under: Web Design Tagged With: low-resolution, optimizing images, web images

    Reader Interactions

    Comments

    1. anonymous says

      September 1, 2015 at 11:11 am

      Thank you for sharing this information. The information was very helpful and saved a lot of my time.

    2. Info Judi says

      January 12, 2020 at 11:14 am

      Good post! We are linking to this great content on our site.
      Keep up the good writing.

    3. Leo says

      January 9, 2021 at 10:23 am

      Well written.
      I’ve only just begun writing a blog very recently
      and realized lot of people simply rework
      old content but add very little of benefit.
      It’s good to read a helpful article of some genuine value to myself and your other followers.

      Some good suggestions; you’ve absolutely made it on my list of writers to follow!

      Carry on the fantastic work!
      All the best

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design