Should I still down-size photos for my website?

Hi - I am making a website.  I know - or at least I think I know - that you should down-size your images for fast loading times.  For example, if I have a photo that's 3800x3800 and is 2 MB in size, I always down-size it to maybe 1000x1000 and about 150KB or so.
I know we like to think that "everyone" has a fast web connection but I don't think that's always the case and with mobile you have to factor that in too.
A colleague working on another website asked me what I thought of her photo gallery.  She had a thumb nail and when you click on it, it opens up much like a light box effect.  Her large photo is 1200 x 1200 and is 1 MB in file size.  I pointed out to her that she may want to take the larger photo and if she wants to keep the 1200 x 1200 fine, but she may want to reduce file size.  I got it down to about 180KB and sent them to her side by side.  She said she was worried about the quality (I honestly did not notice anything but maybe her eyes are better than mine).
I know there's always a catch-22 of "quality vs. file size."  So with all of this said, I'm just asking for links, opinions, and so forth about this.  I also tried explaining that phones don't always have great connections so the down-sizing should be taken into consideration.
Should I continue to scale down my photos like I have been as described above?  Or doesn't it matter any more - that I can take a 1 or 2 MB photo and just use that for my web image to display in a photo gallery?
Any thoughts, links to articles, etc., are appreciated.  Thanks, Deaf Guy

Hi Osgood - I'm fully aware of shooting high res and down-scaling for whatever you need the image for.  Some folks I've worked with over the years were totally unaware.  They thought you could shoot a low-res image and then blow it up to your heart's desire.
I totally understand and respect your thoughts on your post.  I basically look at as to each his own - whatever makes you and your clients happy is the key.  At the same time there should be at least a minimum amount of standards and expectations, too.  Taking a client photo that was given to me and it's 2500x2500 and 2.5 MB and they say, "Stick this on my web page," I think it's important that they understand that this is not smart because of the large file size, possible slow connections and so forth.
The only time I would post it as is if it was some kind of photo gallery where you would want the person to have access to the large file (similar to what iStock does).
I think educating your client is also important.  When I sent the side by side photos to her, she said, "So how do you do this?"  This person is also a web developer to boot.  I'm not criticizing her, but I thought most web developers would at least know about scaling down photos for websites.
But anyway, thanks for your post on this.

Similar Messages

  • I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing  photos for a website I was adding to.  I now have a new computer which runs windows 7.  Is it worth installing it again on my new computer?

    I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing  photos for a website I was adding to.  I now have a new computer which runs windows 7.  Is it worth installing photoshop elements 8 again on my new computer or will it be a waste of time?

    I have PSEv.8 on my computer running WINDOWS 7. It works perfectly..
    Perhaps you need help with saving files for web use.. Will be pleased to assist you when you get everything set up.

  • Spry Slide Show-how to use one size photo for large photo and thumbnail?

    Hi all,
    I'm am using Adobe's Spry Slide Show. I can only use one size photo 640x480px for both the large photo and the thumbnail.
    I changed the size of the small thumnail on the html:
                     <li><a href="Photos/TestPhoto640x480.jpg" width="490" height="367"><img src="Photos/TestPhoto640x480.jpg" width="63" height="47" alt="photos-1.jpg" /></a></li>
    The thumbnail looks fine until you hit Live View or Preview in Browser then photo comes in full size and you can only see the upper left hand corner.
    I assume that the java is doing this. But I have no training in Java.
    How can I change the Java Code so the thumbnail comes in at 63x47px?
    Many thanks.

    Wish I could use scaled down versions of the thumbnails-but I can't.
    Why not?
        img.src = info.src;
        img.style.width =  "490px";<!--Large Photo size on internet-changed from info.width + "px"; to "490px";  *********-->
        img.style.height =  "368px";<!--Large Photo size on internet-changed from info.height + "px"; to "368px";  *******-->
    You're shooting yourself in the foot with this.  It's overriding your HTML and CSS  values.
    As an FYI, Adobe Abandoned the Spry framework late last year.
    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
    You might want to cut your losses right now and switch to something better suited to modern web devices & browsers.
    jQuery Fancybox
    http://fancybox.net/
    20 of the best jQuery Slideshows
    http://vandelaydesign.com/blog/web-development/jquery-slideshow/
    Nancy O.

  • Using iPhoto to optimize photos for a website.

    How do you specify 72 dpi when resizing images for a website? I have iPhoto 09 v.8.1.2 (424)

    You don't.
    Export using the File -> Export option. In the resulting dialogue the "Size" setting will determine the dimensions of the photo (length by breadth) and the Jpeg Quality will decide the level of compression used. For web use medium is usually just fine.
    Regards
    TD

  • What size photos for iPod?

    I'm about to load some photo images onto my iPod but don't know where to start for re-sizing them for this purpose.
    What's a good size to use for photos on an Ipod? I assume I would use a jpg file format.
    Thanks for your advice!

    Here's something that is very odd. I took two photographs and sized them to 640x480 pixels. As level 10 JPGs, the resulting files were 196kb and 116kb. Loaded them onto my iPod Touch. An iPod cache folder was created and I found the two files that it created for my photos. Each file was 656kb!
    How can you take a 196kb file and a 116kb file and make it 656kb? What the heck is this software doing to these image files?

  • Can not re-size photos for wall paper, any ideas?

    As a photographer my main reason for purchasing the ipad 4th gen. Was to be able to customize my wallpaper display.  thanks IOS7, that has all gone south.  Anyone know of a way to re-size images so they fit?

    Hi,
    This issue can be caused by corrupted system files during update installation or incompatible update.
    Please first try following suggestions:
    1. Update your keyboard driver in Device manager.
    2. Run command SFC /SCANNOW as admin, any error, post back the cbs.log.
    3. Run this command to repair Windows:
    dism /online /cleanup-image /restorehealth
    If there's no changes on this issue, please restore your system back to the point when the Keyboard work fine, and manually install checked out updates one-by-one, after each one, please restart computer to check the issue.
    Then let me know which update cause this issue.
    Kate Li
    TechNet Community Support

  • How do I create full width photos for a website with Photoshop - Fireworks - Dreamweaver CS3 ?

    Greetings & Help!
    I'm trying to create a full width photo layout using Photoshop or Fireworks CS3 and then end with Dreamwaver CS3 without the photo's being tall.
    Exactly as the following websites - which all seem to be using the same size of photo or very close to it.
    This site is static with full width photos that are not tall.
    http://www.jenniferhandyproperties.com/selling
    This site is static for the most part and full width photos that are not tall
    http://www.gnvpartners.com/web/
    This site is Flash with full width photos that are not tall.
    expodesigncenter
    I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.
    Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.
    The problem...
    I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are
    425 x 282 px (5.9" x 3.9")
    849 x 565 px (11.8" x 7.8")
    1698 x 1131 px (5.7" x 3.8")
    I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.
    If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.
    I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.
    I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.
    So if you can offer a solution in "Non-Tech Terms" I would appreciate it.
    Thank you in advance for your time.

    In the second example, the photo is set to background with a tile. The other parts are over top of the photo and done with layers with a background color setting.

  • Resizing photos for a website?

    I a building a website and when I resize -- even to make a photo or logo smaller -- everything gets wavy and low-quality.  Help!

    I like to keep the footprint of my web images as small as possible.  Especially for mobile users who must pay for bandwidth.  Nothing chops a mobile data plan to hell faster than a web site that uses excessively large images.  I only use 100% quality for printed output.  On the web I compromise at 20-50% quality to keep the file size down & improve page load speed.
    Go to File > Save for web.  Use the 4-up panel and compare image quality with file size.  See screenshot.
    For Photos, use JPEG.
    For Gradients or graphics requiring alpha-transparency, use PNG-24.
    I rarely use GIFs anymore.
    Nancy O.

  • Video playback still not working right, for any website videos.....

    I have downloaded SilverLight, I have updated Windows, I have unchecked the Acceleration option from Flash Player, yet all videos from any website are still playing slowly. Audio is fine, but not the video. At my wits end, as this was one of the key reasons I downloaded FF in the first place. Please help. I have read and done most if not all of the suggestions so far, so now posting this. Thank you. Craig.

    '''''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode Start Firefox in Safe Mode]''''' {web link}
    While you are in safe mode;
    Press the '''<Alt>''' or '''<F10>''' key to bring up the tool bar.
    Followed by;
    Windows; '''Tools > Options'''
    Linux; '''Edit > Preferences'''
    Mac; ''application name'' '''> Preferences'''
    Then '''Advanced > General.'''
    Look for and turn off '''Use Hardware Acceleration'''.
    Poke around safe web sites and see if there is still a problem. Then restart.

  • Why is the item count in Photos for Mac significantly higher after upgrading from iPhoto?

    Since upgrading to Photos for Mac from iPhoto, I've noticed the number of photos and videos in my library is higher than what I had before. Granted I imported some photos into the new app since then but taking that into account there's still a big discrepancy.
    In iPhoto 9.6.1, the item count is 13,394 and I have since imported 95 new items into Photos for Mac. The total then should be 13,489 but Photos for Mac lists the item count at 13,626. That's a difference of 137 items.
    Even taking into consideration that Photos for Mac might be including the 32 photos and videos that were in iPhoto's Trash (now Recently Deleted) folder, it still wouldn't account for 105 mystery items.
    Does anyone have any insight into this difference in the number of items?

    Since upgrading to Photos for Mac from iPhoto, I've noticed the number of photos and videos in my library is higher than what I had before. Granted I imported some photos into the new app since then but taking that into account there's still a big discrepancy.
    In iPhoto 9.6.1, the item count is 13,394 and I have since imported 95 new items into Photos for Mac. The total then should be 13,489 but Photos for Mac lists the item count at 13,626. That's a difference of 137 items.
    Even taking into consideration that Photos for Mac might be including the 32 photos and videos that were in iPhoto's Trash (now Recently Deleted) folder, it still wouldn't account for 105 mystery items.
    Does anyone have any insight into this difference in the number of items?

  • I used Iphone sofeware edit one photo by cuting its size, however, when I connect with computer. The photo edited still was old photo, no any changed. I want to edit the photo, and cut the size of photo. What should I do now??

    I used Iphone sofeware edit one photo by cuting its size, however, when I connect with computer. The photo edited still was old photo, no any changed. I want to edit the photo, and cut the size of photo. What should I do now??

    I used Iphone sofeware edit one photo by cuting its size, however, when I connect with computer. The photo edited still was old photo, no any changed. I want to edit the photo, and cut the size of photo. What should I do now??

  • Firefox is scaling down the photo sizes, along with chrome and internet explorer but Firefox's photos are usually smaller

    I sell products on a site, along with other sellers, that is owned by someone else.
    We have many sellers there. Some of us are having problems with how we are able to view the size of our photos taken of our products that are up for sale.
    From seller to seller, we have different versions of Firefox that we are using. I have the newest Firefox, which I believe is 4.
    I was having, like others who use 4, the same problem seeing smaller photos before I did the upgrade as well.
    It seems to be the case for most of us who are having the problem, that Firefox photos scale down smaller than Internet Explorer and Chrome.
    We have been told that this may be a browser issue as the site owners say they have not made any changes. At this point we are unsure since there are so many variations from seller to seller (keep in mind that some sellers are not seeing the photos scale down through their computer).
    We have asked the site owners to look into this problem further. I also wanted to see what the Firefox community had to say. Do you think it may be a browser issue? We would greatly appreciate your input.
    Below are some examples of photos that have been scaled down for the sellers who are seeing a problem with smaller photos while both in Firefox; all using different versions of Firefox:
    One photo that was originally the size of 419px by 1, 007px is being seen by one seller to a scaled down size of 81px by 64px.
    Another seller is viewing this same photo scaled down to 163px by 329px.
    Another seller is able to view this photo as the original size it was intended to be, which is 419px by 1, 007px.
    The above scenario has been the worst scaled down size we have heard of so far.
    Typically a photo that is the size of 1, 000px by 930px has been scaled down to 420px by 391px.
    There are other examples as to size, but you can see that the photos have been scaled down quite a bit.
    You can see that it has been scaled down to less than half of the original size. This can pose a real problem for us depending on the type of product that is being photographed.
    Thank you!!

    Thank you!!

  • What size should my background layer image be for web?

    I'm doing a logo design for someone I know and he wants it placed ontop of a steel texture background. I've sourced out a good quality image but despite my diligence in trying to understand how image size and resolution works, I can't seem to grasp what I need to do with it. I've watched countless videos, but it must be a problem with the ol' brain in the head I have.
    This is most likely (at least for now) just for web. My main focus is just getting this right so that it looks crisp and sharp on screen.
    The image I have is 1024 x 1384 pixels 72dpi. So 14.2 inches wide by 19.2 inches high.
    Do I need to change this at all? I will be cropping the image, but I'm worried that I will make it too small and therefore it will need to be enlarged and I might encounter some blurring.
    Should I enlarge it? I heard this isn't the most ideal thing.
    72dpi is as high as the resolution needs to be for screen images, but is there any advantage in bumping that up? Why couldn't I just make it 300dpi for the heck of it?
    Do I need to pay attention to inches, or is that just good guide for when you are printing something?
    I'm honestly just trying to get my head around it all so that in the future I don't have to spend so much time figuring out what I need to do. Everything I read and any help is greatly appreciated.

    Bayne86 wrote:
    Ok be prepared for a dumb question...
    If you're telling me to forget dpi/ppi when working with screens, how come you then say to think in terms of pixels for screens and to double the resolution for retina screens? I'm obviously a bit confused about the terminology here..
    With screen based design work, design with pixels in mind. So if you design for a website that is 1140px in width, then that is your base target width. With retina screens the screen resolution is effectively doubled up, but the relative size of elements show on such a screen is ideally the same as if you would be working on a screen with half the resolution.
    Example iPad:
    old iPad: 1024x768px.
    new iPad retina: twice that: 2048*1536.
    Your logo would be rendered at the same size on both screens. Let's say at 800X400 on the older screen. Because the retina screen behaves like a 1024x768 screen in rendering all elements, but effectively doubles the available resolution, you would have to provide an ipad developer with a 1600x800 version, which can be used for both screens, and makes sure that it looks razor sharp on the retina screen.
    No ppi. No dpi. Think in pixels only. With 4k screens around the corner this will become even more harrowing. That is why we are currently seeing the return of true vector graphics for screen and interface development. To complicate matters, since this is a relatively new development a lot of information on the web is completely outdated. I would not trust most info that is much older than two years, and double check even that. Check out Apple's icon and graphic creation guide for more ideas:
    http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/I consImages/IconsImages.html
    Now, things become even more confusing once you decide the graphics have to be prepared for a fluid and/or responsive designed web page or application. That background graphic you chose will not work well at all on a web page background, because it does not seamlessly repeat. That means it will be automatically scaled up and down to cover the entire browser window frame. Using an ultra-high resoluton background image just will not do: it eats up video memory for breakfast, is slow on certain devices, and may take ages to download. For these reasons, and many more, you need to be efficient and clever.
    So I would choose a seamless repeating metal background with enough detail that does not stand out too much (otherwise it would be noticed too much as to repeat). Another trick is to provide a lower resolution alpha transparent png mask to add a soft lighting effect to the metal background, and perhaps the logo. That png mask could then be scaled up because you would not notice the low resolution at all - better, the mask would become fuzzier, which does not matter for a soft lighting mask! Even a 512x512 mask or lower would work very well.
    That logo of yours (second image) will NOT render as a vector at all. It must be saved as a bitmap.
    The logo in the last image could work as an SVG, and become completely scalable on a web page or in an application (depending on the support for SVGs)
    Bottom line is that, for web page development and for app development, seperate layered versions will be required for the highest quality and most flexible result. A merged version will probably be quite useless. At least, it would be for me as a website/app developer and UX designer. Ideally I would like access to the Photoshop file, but I will settle for high resolution png files for each element. And if vector files can be send to me as SVG files: YES PLEASE!
    So the question remains: what are the client's output requirements? Is this for a website? What are the target platforms? And so on. Also remember that most people probably would not notice the difference between a "normal" 1024x768 image and a retina version for a background like yours, because the focus would be on the logo. So another approach is to provide a lower resolution (smaller file sized!) background image, and a higher resolution logo image that takes advantage of retina resolutions. Our brains cannot differentiate a lot of detail in darks. Take advantage of this.
    Hope this helps a bit!

  • What is the ideal size and resolution of a photo for display on the iPad?

    I'm finding no info on the size of a photo for the best possible display on the iPad.  The screen is obviously much larger than iPod Touch or iPhone; photos sized for them are fuzzy on the iPad.  Ideally, a photo should be sized for the exact number of pixels on the iPad screen.  Can anyone help me here?  Thanks!

    This is done automatically via the iTunes sync/transfer process - photos are optimized for viewing on the iPad, and there is not an option to change the default optimization settings.

  • Need help with adjusting size for photos in my website

    Wow it's super to know about adobe forum which i never thought existed, i have been to the adobe site several times befor but never noticed there is a forum
    Ok i have few issues would like some help if possible.
    I have a website for public holidays and festivals and i have been really stressed in the ways i am adding the photos which i am buying from fotolia. First in my featured images the screen is very wide and slim...so i am really having hard time with adjusting the photos so they would fit in a way and show the best part of the photo in the screen, once the featured image is clicked on then their is no problem since it opens up in the full size. Is their a speacial tool in adope (i have cs4) which deals with images in this aspect? Secondly, before i was downloading the image with the regular size in which i bought them (around 3000 px) but that significantly slowed my webiste and i had to resize them into around 500 px, but now the image is small. what is the way around that, is there a feature where i can keep the photo big size with high resolution and little px. I see many big nice resolution photos but very small in size. i have just purchased a lot of photos that i would be posting soon and would like to do them right from the start.
    I don't know if i explain the situation right in words but you can take a look here, most photos for the posts are on the main page, please take a look and tell me how i should revise or make better for my photos in the featured images.
    I have very little experiance in photoshop so i made a very simple logo, but is there a tool that is speacialy designed to help make it easy doing a professional logo?
    Any comments, hints or help would be highly appreciated
    Hmmm one more thing....how do i add a pic for my profile? i don't see anywhere i can do so

    You should use the crop tool to crop your images. You should never squish your images, it really looks unprofessional:
    For your problem with saving images, you can optimize your images for web using the "Save for Web…" menu option:
    Make sure that you save your images at the dimension that you want them to display on your website (It looks like all your images in the blog are 620px wide, go with that).
    As for your logo, you can make them in Photoshop or Illustrator, but I would reccomend making yours in the latter. Here are some tutorials on logo creation: http://ibrandstudio.com/tutorials/46-adobe-illustrator-tutorials-logo-design

Maybe you are looking for