Need help with image resizing (re: slow site)
-
I'm trying to figure out why I'm having speed issues with my site, and using google speed test to help me knock out some of the issues.
One of issues deals with image resizing. I have a responsive design and so even though on the home page the normal width is 580 of the blog area, the full post can go up to 1170. So I size all of my images to 1170 wide and let CSS resize them depending on the size of the browser. (The images on the most recent post are a little bigger than this because I was testing something.)
I was wondering what the best practice was in regard to what I'm trying to do.
Also feel free to check out my site and let me know of any other feedback / advice you have. Thanks !:)
-
Thanks a lot Keri,
These days with the online competition being so strong we should pay more attention to the website architecture, usability, visual impact, speed and technical problems. SEO it's so complex that you'll find yourself overwhelmed by the number of critical issues that needs to be addressed and fixed. Don't focus just on the content try to enhance every aspect of your page from to . Optimizing pictures takes only a few moments and you can use automated functions in Photoshop.
-
Another area to help with the images is to host them on a content distribution network.
Amazon is not the cheapest, but its the easiest for low volume.
A few stats:
I host about 4000 images on Amazon S3.
My bill is about 4 bucks a month.
You can put your images in a few areas (west coast vs east coast etc)....
This will help get your images closer to your audience, but it will not help you with the "last mile"
I had a customer uploading 7 MB images in Wisconsin using dial up....
can't help them...
I'm alos moving to Cloud Front, amazon Content Distribution Network...
Also, you use chrome to determine what's causing the delay.. many times, images are just part of a larger problem...
-
Hi Rick,
To the best of my knowledge, smushit compresses what it can while keeping the quality exactly the same. Saving for the web will lower the quality to "looking good on screen" from "good enough to print and hang on your wall". I also looked at the most recent post about Noah standing, and saw that the original size was 1900 pixels wide -- you certainly want to resize that to the 1170 wide before uploading it.
Being a photographer with a portfolio, Coltaire can give you a lot more details than I can, and help guide you with settings to use in Photoshop to get pictures that still look great on the web but aren't bigger than they need to be.
-
Thanks for the kind words. As I mentioned sometimes I like to do full width posts which are 1170 wide so if I use 800x600 the images won't show up correctly on full screen.
-
Rick, you have a wonderful son and the story of your website left me without words and I don't know if I can give you a good response at this moment... Try resizing them to 800x600, the size accommodates a lot of user screens / mobile traffic.
Have a wonderful day
-
Yes, i use catching. But like I said, saving it for 640 wouldn't work for me since I want image to show up bigger than that if the screen is 1170. I'm assuming the images wouldn't be able to be resized any bigger than 640 without looking stretched.
-
I never used that tool and I think it's ok to use it in some situations but you have a lot more control of the file saving for web in PS, lot more options and the quality loss is insignifiant.
Take a look at my Portfolio page. All of my files are 640x480px/72dpi/50-60quality/jpegs.
Also are you using any caching / minifing plugins?
-
I'm using smushit to make the file size smaller, but I need to be able to at least have 1170 for full width posts (like this one.) I don't think I need to use save for web if I'm using smush it do I?
Does having css resize the images cause a site to slow down a lot?
-
I think that your images are very big and are slowing down your page speed and affect your rankings. Why don't you try to scale and reduce the quality using the "Save for web" feature in PS, it's fast and you have the option to compare with the original file when saving? 800x600 , 640x480 px are large enough to be properly visualized, Think about the different screen resolutions your visitors have. I avoid using pictures larger than 100kb and my average picture quality when saved for web is 60%. Hope it helps.
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Is WP okay for E commerce sites?
Do any of you out there use wordpress for an ecommerce site? I'm getting some mixed reviews on it (but it's the internet, so that's bound to happen). Is there any sort of site traffic or page limit that would make using wordpress a bad idea? Thanks, Ruben
Web Design | | KempRugeLawGroup1 -
404 page in Windows IIS. HELP!
I run a real estate website.
Web Design | | Jeepster
My webmaster needs to create a 404 page for listings when they get deleted.
So far all he's come up with is 302-redirect to a standard "error template" page.
Can anyone suggest a 404 how-to guide I can show him?
Thanks0 -
Image sliders & site speed
We are having a new website designed using WordPress and the Genesis framework. We wanted to include header image sliders on a number of internal site pages, but our designer says that sliders on more than just the home page will slow down the site significantly. How much could they slow down the site, and what can be done to minimize their effect on site speed?
Web Design | | GordyH0 -
Tips for Panda-Proofing an Image Gallery
I'm currently working on a website that has a video, image and media gallery with over 9,000 items. The gallery can be found here:
Web Design | | Peter264
http://flyawaysimulation.com/images/16/microsoft-flight-simulator-x/ Every image has a page of its own. Therefore, essentially 9,000 pages of very thin content, especially the image pages with no UGC comments. Does anyone here have any tips to "panda-proof" these pages? The images still need to be indexed. What can we do here? The site also hosts videos, which of course the page the video resides on needs to stay in the index too (like youtube). Example of the video page here: http://flyawaysimulation.com/images/media/9371/fsps-3d-real-cockpit-effect-for-fsx/ Really want to hear your thoughts. Thanks in advance!0 -
Site Re-Design - Running old XML site map for 301's
Hi all, We are going to launch a new site design for our current e-commerce site. I have taken this opportunity to change some categories due to keyword research and all old categories will be 301ed to best fitting new category. So I have 2 questions about moving stuff over; 1. I read that leaving the old xml site map running for the first week, would help, because this would give crawlers the chance to run through the site and follow the 301s, which would help pass the juice. How true does this sound? 2. I was thinking of re-writing all category and sub category titles, meta descriptions and on page content. The positive of this is loads of fresh content - but doing this all at the same time with the new site launch might see some major dropping in search ranking. I've identified our top traffic keyword terms/pages, would it be more wise to leave these pages, and change the others, or would the total new fresh burst have a better impact? Cheers
Web Design | | ToxicFox0 -
How will a sites ranking be affected??
Hey guys, My MD has just put this to me, we have a site the is currently ranked in top 3 for all there chosen search terms. The company is undergoing an overhaul of their design and want a new site to match this. They have asked how changing the site design will affect their rankings. More content is going to be added with this there will be new pages links etc Any information would be greatly appreciated.. Thanks Anthony
Web Design | | Anthonykal-group0 -
Does anyone think the <figcaption>attribute from HTML5 will have any influence for image search?</figcaption>
There is a <figure>element that is supposed to provide better descriptions of image on the web in HTML5 - do you think that will replace the importance of the "Alt" tag? Link to figcaption description </figure>
Web Design | | RankSurge2 -
Development site accidentally crawled - Will this cause problems?
We are currently developing a new version of our website and to make it easy to access for all team members, we just set it up on a server accessible via a publicly accessible domain name (ie devsite.com). There has been no SEO and no links created to this site, or so I thought. Recently, I found out that Google somehow found its way to this development site and has been indexing the pages! I was a little alarmed, as there are no links to the domain and we'll soon be transitioning all the content over to our primary production domain. I immediately created a robots.txt file to disallow access to the entire development domain. My fear is that there may be some duplicate content penalty if Google sees that the content that is on our new site (once it goes live and is pushed to our REAL domain name) was previously indexed on our test domain. We're slated to launch in 2-3 weeks. Is there anything else I should do? Should I even be worried? I'm probably a bit paranoid, but given the amount of time and effort that has gone into this new site, I love any advice or thoughts. Thank You!
Web Design | | AndrewY0