Theme "Sketch" Best Optimised Image Size
-
Dear staff,
I would like to adopt the Sketch Theme and my website’s front page will be like how I currently built – a slideshow; while all my pages under the top down menu will be a slideshow followed by small images like this page –
https://littlemauiisland.wordpress.com/photo-theme-testing/I have studied many webs about image sizes and also the Sketch Theme but i’m having a bit of headaches. For examples, according to the Sketch Theme,
//Quick Specs (all measurements in pixels):
The main column width is 764.
The sidebar width is 273.
Featured Images for portfolio projects are 800 wide by 600 (landscape), 1067 (portrait), and 800 (square) height
Featured Images for single posts are 764 by 300
Images for Featured Content should be at least 1092 in width.
Custom header image should be at least 1092 in width.//
and
//Full size images at least 1272 wide//However, I have already forgot and mixed up my front pages of slideshow and all the pages under the top down menu are whether a portfolio projects or single posts whatever. Also I am not sure if I built it systematically.
All I want to enquire is, with my current web setting and my design –
Front page: all slideshow – https://littlemauiisland.wordpress.com/
All other pages: slideshow followed by small images – https://littlemauiisland.wordpress.com/photo-theme-testing/**What is the minimal tolerance (at least … pixels) and the best optimized image size and to be resized for this theme?**
I will double the minimal tolerance pixels, KB/MB for imac screen. I will add watermark to prevent image stolen, and will resize all images to save storage, and to keep the best image quality but preventing a good images to be used by others (stolen). My expected visitors will be iMac 24inch screen users and window users with a HD LCD monitor (though currently the only visitor of my site is a tablet user)
Thank you very much. I just need this advice then I can re-start building this project again, as it’s been half a year of procrastination already…. and I got stuck here….. Thank you so much as I’m not good at computers and no one to ask for this specific question. Thank you all.
The blog I need help with is: (visible only to logged in users)
-
P.S. I have a lot of photos to upload,
current plan
– upload 1000 large size photos for slideshow+ 2000 small size photos
future plan
– upload 2000 large size photos for slideshow+ 4000 small size photosI wanna use the free space available as much as possible to make the web self sustainable first, therefore I care much about the best optimal image size to balance the quality and free space….
-
Hello there,
Happy to help you with this.
**What is the minimal tolerance (at least … pixels) and the best optimized image size and to be resized for this theme?**
I’d recommend following this guide here: https://en.support.wordpress.com/media/image-optimization/ when it comes to image optimisation.
With regards to space, our plans carry different storage limits as seen here: https://wordpress.com/pricing/
I hope this helps.
-
Thank you for the reply.
I have already read the above links months ago. I’m gonna study more from google.
I have another question – will my internet speed be affected when my site is close to the media library upload limit of 3.0 GB? or as long as my site is under 3GB storage, it won’t affect much of the speed?
Thank you.
-
Hi,
will my internet speed be affected when my site is close to the media library upload limit of 3.0 GB? or as long as my site is under 3GB storage, it won’t affect much of the speed?
A site’s storage has no effect on its loading speed. Therefore, your site will load at the same speed, no matter how many items you have stored in the Media Library.
-
Thank you Fstat.
New question – when I add a new page, does it matter on my photo presentation, (for example the dimensions / full width of my photo available to display in slideshow, as featured images) whether I chose a blank page instead of a photography page or a portfolio page?
I think I started most pages from a blank page, then I added slideshow and image gallery manually. And I just discovered some other options like photography page, portfolio page.
Thank you all again.
-
And I have this question becos of the below –
//on individual blog posts, try to limit the number of large images to 10-15, there’s usually no need to have more. Wedding photographers, in particular, have the bad habit of treating blog posts as portfolio pages, listing a ton of images from each event.//
-
New question –
1. ) Is my wordpress theme “Sketch” a responsive theme? In short, what is a responsive theme about?
2.) Plugin – a.) Is that all new plugin to be installed for this Sketch theme, need to pay + upgrade plan in order to be used? b.) If I upgraded and installed the image optimized plugin to resize my images, one day when I unsubscribed to all plan and go back to the free plan, what will happen with my images – will the image be deleted? will the image size still keeping the same? do I need to resize and upload all images manually if one day i do not use the plugin?
Thank you very much……
-
New question – when I add a new page, does it matter on my photo presentation, (for example the dimensions / full width of my photo available to display in slideshow, as featured images) whether I chose a blank page instead of a photography page or a portfolio page?
No, it doesn’t matter.
Is my wordpress theme “Sketch” a responsive theme? In short, what is a responsive theme about?
Yes, in the theme description it states “Sketch is a responsive portfolio theme”.
Responsive themes offer an easy way to set up a website that looks great on any device – that includes your desktop computer, laptop, tablet, or mobile device. In addition to loading properly on any device, the best responsive themes also perform as needed and are easy to navigate on any screen size. Responsive themes also remove the need to have a specific mobile-only theme – the theme will respond to the device viewing the content and resize the content accordingly.
Is that all new plugin to be installed for this Sketch theme, need to pay + upgrade plan in order to be used?
You must purchase a Business or higher plan in order to use plugins.
If you move from the Business plan to the free plan, the following would happen:
– Custom plugins, themes and custom code you had installed as well as any premium features not available in the lower-level plan will be removed.
– Your site will return to how it looked before you installed the first plugin, theme, or custom code, although we will preserve your posts, pages, and media files.
– The site will be made private so you can check it over before making it public on the new plan.
However, you wouldn’t need to upgrade if you optimize your images before you upload them.
I hope that clarifies things.
-
Thanks heroponriki.
New question – When I check my image theme container from the Sketch Theme and also check by image ruler, and featured image is around 1092px wide. However, when I resize a photo in Lightroom (File> Export> Image Sizing > Width/ Height or Long Edge) in 1092px wide, after it’s been exported and file opened in 100%, the resize image from Lightroom is obviously a lot smaller in actual size BY VIEWING than that in my WordPress Web. When I checked the file info, it’s 1092px wide though. Why? How to handle this?
Thank you for your help.
-
Can you link us to a page where you’re seeing this behavior? Once we have that information, we’ll be better able to advise.
-
Thanks heroponriki.
I have uploaded it here –
https://drive.google.com/drive/folders/1S4_-uNZ7YK1fZKJ5MJJMXDdJqXufupQ8?usp=share_link
-
Hi there,
I see a folder of images there, but I’m not exactly sure what I should be looking at. However, I don’t think it will help to see screenshots of your issue as much as it will help to observe the issue directly.
With this in mind, can you share the URL of the page you are on when you are viewing an image from your site? You mean when you are directly viewing images based on their media URL, like this one? https://littlemauiisland.files.wordpress.com/2022/11/chinesemedicinetrip-philippines-1092×728-240dpi-318kb.jpg
Or do you mean you see this when viewing an image on one of the pages of your https://littlemauiisland.wordpress.com/ site. If so, which one?
Thanks for the additional info!
-
-
Could you double check that link? It’s giving me a 404 error.
Also, if you could please send a link to the affected page or post rather than to the image, that would be helpful as well.
-
Thanks Supernovia
The photo container size of this page, and the last 2 Ants photos on this page.
https://littlemauiisland.wordpress.com/photo-theme-testing/ -
Hi there,
I think it will help if I clarify that “Retina” or “hi-dpi” displays have a much higher pixel density than regular displays, which can cause images with a regular pixel density to appear fuzzy. To prevent this, if we detect a Retina display we serve the image at double the size so it displays with maximum sharpness.
This only works if the image that appears in your Media Library is larger than the size that appears on your site. For example, if the image spec for the site is 1000px, you will want to prepare your images to be double that: 2000px.
This will make your images appear sharper on hi-dpi displays, and explains why the two photos (of ants) on that page are different. If you want the sharpest images possible, it will help to keep this in mind and make your images 2x larger than the website design indicates.
The photo container size of this page
I’m not sure I understand, can you clarify the issue with container size? Is this an issue with the photos of the ants? Or with another image on the page, and if so, which one?
-
Hi there,
I think it will help if I clarify that “Retina” or “hi-dpi” displays have a much higher pixel density than regular displays, which can cause images with a regular pixel density to appear fuzzy. To prevent this, if we detect a Retina display we serve the image at double the size so it displays with maximum sharpness.
This only works if the image that appears in your Media Library is larger than the size that appears on your site. For example, if the image spec for the site is 1000px, you will want to prepare your images to be double that: 2000px.
This will make your images appear sharper on hi-dpi displays, and explains why the two photos (of ants) on that page are different. If you want the sharpest images possible, it will help to keep this in mind and make your images 2x larger than the website design indicates.
The photo container size of this page
I’m not sure I understand, can you clarify the issue with container size? Is this an issue with the photos of the ants? Or with another image on the page, and if so, which one?
-
Thanks, that’s helpful. I couldn’t quite understand what you were asking, but seeing it on the page makes sense.
The image is displaying at 1024 pixels wide on that particular page. If you’ll optimize the image to twice that width, it should display better.
If 1092 is the width for this theme, I’d recommend using widths of 2184px. It’s still a lot smaller than what your camera produces, right? But those should display nicely. You might test that with the ant image to confirm.
https://wordpress.com/support/media/image-optimization/#retina-displays
Regarding the rest of the site:
– The total number of items in your media library will not slow the site down, because you aren’t displaying all of them at once.
– The number of images on a page absolutely does determine the page speed, because a viewer has to download all of the images to view them. So a page with more than 40 images will be quite slow, especially on mobile data.
So if you want to optimize the pages for faster loading, choosing a few favorites rather than showing all, or breaking them apart into smaller galleries, is probably wise. I hope that helps!
-
Thank you Totoro and Supernovia.
About image resizing –
l have studied a lot about image size. And I summarized that, to balance the image quality and to prevent image theft, normally resize a picture at least or the same size of the image container (here on my site is 1024 image wide) would be ok. Here, https://littlemauiisland.wordpress.com/photo-theme-testing/ I tested the 2 ants images, with my 12inch non retina monitor, I can still notice the quality difference. So it seems resize just around the image container size is not enough? For my small screen i still need to double the size into ~1980px to show better quality, if this image is prepared for retina viewer, even I upload ~1980px is not enough?
About the correct way to resize an image
What I understand is, the webpage container shown is 1024 image wide. Then, I resize my image into ~1024image wide, I thought the image exact viewing size is 1:1 in proportion. However, when I just open the resized image exported from Lightroom by any image viewer viewing in 100%, that image is much much smaller then the size of my webpage image shown…… no wonder when the image uploaded to a 1024 container, it is not sharp? Why the resized image shown in 100% full size, is much smaller than the container size? Am I resized it correctly?
- The topic ‘Theme "Sketch" Best Optimised Image Size’ is closed to new replies.
WordPress.com Forums 
